CSS-Paket für Editor-Add-ons

Damit Ihr Editor-Add-on wie Google Tabellen, Docs, Präsentationen oder Formulare aussieht, können Sie das unten stehende CSS-Paket verknüpfen, um Schriftarten, Schaltflächen und Formularelemente mit dem Google-Design zu versehen. Ein Beispiel für das verwendete CSS-Paket finden Sie in der Kurzanleitung für Docs-Add-ons. Wenn Sie das CSS-Paket verwenden möchten, fügen Sie einfach oben in jeder HTML-Datei Folgendes ein:

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">

Der Stil für Formularelemente kann nicht in allen Browsern vollständig gesteuert werden. Insbesondere <select>-Elemente weisen in Firefox und Internet Explorer einige visuelle Artefakte auf, funktionieren aber trotzdem ordnungsgemäß. Wenn Sie sehen möchten, wie die Stile in einem bestimmten Browser aussehen, laden Sie diese Seite einfach in diesem Browser.

Typografie

Verwenden Sie für den gesamten Text die Schriftart Arial in den folgenden Stilen, je nach Verwendung:

Verwendung und Darstellung Markup mit CSS-Paket 
<h1>Titles and headers</h1>
<b>Bold text</b>
Normal text
<a href="">Links</a>
<span class="current">Current navigation selection</span>
<span class="error">Form input errors</span>
<span class="gray">Gray text</span>
<span class="secondary">Secondary text</span>

Tasten

Sie können beliebige Standardschaltertypen verwenden: <button>, <input type="button">, <input type="submit"> und <a class="button">. Horizontal nebeneinander liegende Schaltflächen werden automatisch auseinander positioniert. Es sind mehrere Farben für verschiedene Zwecke verfügbar:

Verwenden Darstellung Markup mit CSS-Paket
Primäre Aktion 
<button class="action">Translate</button>
Sekundäre Aktion(en) 
<button>Close</button>
Aktion erstellen 
<button class="create">Create</button>
Aktion „Teilen“ 
<button class="share">Share</button>

Kästchen

Beispiel Markup mit CSS-Paket 
<div>
  <input type="checkbox" id="checkbox1" checked>
  <label for="checkbox1">Checked</label>
</div>
<div>
  <input type="checkbox" id="checkbox2">
  <label for="checkbox2">Unchecked</label>
</div>
<div>
  <input type="checkbox" id="checkbox3" checked disabled>
  <label for="checkbox3">Checked, disabled</label>
</div>
<div>
  <input type="checkbox" id="checkbox4" disabled>
  <label for="checkbox4">Unchecked, disabled</label>
</div>

Optionsfelder

Beispiel Markup mit CSS-Paket 
<div>
  <input type="radio" name="radio-a" id="radio1" checked>
  <label for="radio1">Checked</label>
</div>
<div>
  <input type="radio" name="radio-a" id="radio2">
  <label for="radio2">Unchecked</label>
</div>
<div>
  <input type="radio" name="radio-b" id="radio3"
      checked disabled>
  <label for="radio3">Checked, disabled</label>
</div>
<div>
  <input type="radio" name="radio-b" id="radio4" disabled>
  <label for="radio4">Unchecked, disabled</label>
</div>

Menüs auswählen

Beispiel Markup mit CSS-Paket 
<div class="block form-group">
  <label for="select">Select</label>
  <select id="select">
    <option selected>Google Docs</option>
    <option>Google Forms</option>
    <option>Google Sheets</option>
  </select>
</div>
<div class="block form-group">
  <label for="disabled-select">Disabled select</label>
  <select id="disabled-select" disabled>
    <option selected>Google Docs</option>
    <option>Google Forms</option>
    <option>Google Sheets</option>
  </select>
</div>

Textbereiche

Beispiel Markup mit CSS-Paket 
<div class="form-group">
  <label for="sampleTextArea">Label</label>
  <textarea id="sampleTextArea" rows="3"></textarea>
</div>

Textfelder

Beispiel Markup mit CSS-Paket 
<div class="inline form-group">
  <label for="city">City</label>
  <input type="text" id="city" style="width: 150px;">
</div>
<div class="inline form-group">
  <label for="state">State</label>
  <input type="text" id="state" style="width: 40px;">
</div>
<div class="inline form-group">
  <label for="zip-code">Zip code</label>
  <input type="text" id="zip-code" style="width: 65px;">
</div>

Die Formatierung von Seitenleisten kann schwierig sein, da die Höhe zwar variabel ist, viele Add-ons aber einen Brandingbereich enthalten müssen, der nicht scrollt. Unten sehen Sie eine vereinfachte Kopie der Seitenleiste aus der Kurzanleitung für Google Docs-Add-ons. Wenn Sie den Textbereich an der rechten unteren Ecke ziehen, um den Inhalt höher als die Seitenleiste zu machen, wird der Inhaltsbereich automatisch gescrollt, das Branding unten jedoch nicht.

Im Beispiel wird die Klasse sidebar verwendet, um den korrekten Abstand anzuwenden, und die Klasse bottom, um den Brandingbereich nach unten zu verschieben. Eine lokale Klasse, branding-below, definiert dann den Bereich, den der Hauptbereich der Seitenleiste unten frei lassen sollte.

Beispiel Markup mit CSS-Paket 
<style>
.branding-below {
  bottom: 56px;
  top: 0;
}
</style>

<div class="sidebar branding-below">
  <div class="block form-group">
    <label for="translated-text">
      <b>Translation</b></label>
    <textarea id="translated-text" rows="15">
    </textarea>
  </div>

  <div class="block">
    <input type="checkbox" id="save-prefs">
    <label for="save-prefs">
      Use these languages by default</label>
  </div>

 <div class="block">
    <button class="blue">Translate</button>
    <button>Insert</button>
  </div>
</div>

<div class="sidebar bottom">
  <span class="gray">
    Translate sample by Google</span>
</div>