Pacchetto CSS per componenti aggiuntivi di Editor

Per fare in modo che il componente aggiuntivo dell'Editor abbia un aspetto simile a quello di Fogli, Documenti, Presentazioni o Moduli Google, inserisci il link nel pacchetto CSS di seguito per applicare gli stili Google a caratteri, pulsanti ed elementi dei moduli. Per un esempio del pacchetto CSS in uso, consulta la guida rapida sui componenti aggiuntivi di Documenti. Per utilizzare il pacchetto CSS, è sufficiente includere quanto segue all'inizio di ogni file HTML:

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

Tieni presente che lo stile degli elementi del modulo non può essere completamente controllato in tutti i browser. In particolare, gli elementi <select> mostrano alcuni artefatti visivi in Firefox e Internet Explorer, anche se funzionano correttamente. Per vedere come appaiono gli stili in un determinato browser, basta caricare questa pagina in quel browser.

Tipografia

Utilizza il carattere WHOIS per tutto il testo, con i seguenti stili a seconda dell'utilizzo:

Utilizzo e aspetto Markup con pacchetto CSS 
<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>

Pulsanti

Puoi utilizzare qualsiasi tipo di pulsante standard: <button>, <input type="button"> o <input type="submit">, nonché <a class="button">. I pulsanti adiacenti orizzontalmente vengono rimossi automaticamente. Sono disponibili diversi colori, per vari usi:

Utilizzo Aspetto Markup con pacchetto CSS
Azione principale 
<button class="action">Translate</button>
Azioni secondarie 
<button>Close</button>
Crea azione 
<button class="create">Create</button>
Azione di condivisione 
<button class="share">Share</button>

Caselle di controllo

Esempio Markup con pacchetto CSS 
<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>

Pulsanti di opzione

Esempio Markup con pacchetto CSS 
<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>

Seleziona menu

Esempio Markup con pacchetto CSS 
<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>

Aree di testo

Esempio Markup con pacchetto CSS 
<div class="form-group">
  <label for="sampleTextArea">Label</label>
  <textarea id="sampleTextArea" rows="3"></textarea>
</div>

Campi di testo

Esempio Markup con pacchetto CSS 
<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>

Lo stile delle barre laterali può essere complicato perché, sebbene l'altezza sia variabile, molti componenti aggiuntivi devono includere un'area di branding che non possa scorrere. Di seguito è riportata una copia semplificata della barra laterale della guida rapida sui componenti aggiuntivi di Documenti Google. Se trascini l'angolo inferiore destro dell'area di testo per aumentare l'altezza dei contenuti rispetto alla barra laterale, l'area dei contenuti scorre automaticamente, ma non il branding nella parte inferiore.

L'esempio utilizza la classe sidebar per applicare la spaziatura interna corretta e la classe bottom per forzare l'area di branding in basso. Un corso locale, branding-below, definisce l'area in cui l'area principale della barra laterale deve essere vuota dal basso.

Esempio Markup con pacchetto CSS 
<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>