CSS-Paket für Editor-Add-ons

Damit Ihr Editor-Add-on wie Google Tabellen, Google Docs, Google Präsentationen oder Google Formulare aussieht, verknüpfen Sie das CSS-Paket unten, um Google-Stile auf Schriftarten, Schaltflächen und Formularelemente anzuwenden. Ein Beispiel des verwendeten CSS-Pakets finden Sie in der Kurzanleitung zum Add-on für Docs. Um das CSS-Paket zu verwenden, fügen Sie am Anfang jeder HTML-Datei Folgendes ein:

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

Beachten Sie, dass der Stil von Formularelementen nicht in allen Browsern vollständig gesteuert werden kann. Insbesondere zeigen <select>-Elemente einige visuelle Artefakte in Firefox und Internet Explorer an, obwohl sie weiterhin ordnungsgemäß funktionieren. 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:

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>

Schaltflächen

Sie können alle Standardarten von Schaltflächen verwenden: <button>, <input type="button">, <input type="submit"> und <a class="button">. Horizontal benachbarte Schaltflächen werden automatisch eingeblendet. Es sind verschiedene Farben für verschiedene Verwendungszwecke 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 zum 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>

Das Gestalten von Seitenleisten kann schwierig sein, da die Höhe zwar variieren kann, aber viele Add-ons einen Brandingbereich enthalten müssen, der nicht scrollbar ist. Unten sehen Sie eine vereinfachte Kopie der Seitenleiste aus der Kurzanleitung zum Google Docs-Add-on. Wenn Sie die untere rechte Ecke des Textbereichs ziehen, um den Inhalt höher als die Seitenleiste zu machen, scrollt der Inhaltsbereich automatisch, das Branding am unteren Rand jedoch nicht.

Im Beispiel wird die Klasse sidebar verwendet, um den richtigen Abstand anzuwenden, und die Klasse bottom, um den Brandingbereich nach unten zu erzwingen. Eine lokale Klasse (branding-below) definiert dann den Bereich, den der Hauptbereich der Seitenleiste von unten frei lassen soll.

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>