Pacchetto CSS per componenti aggiuntivi editor

Per aiutare l'aspetto componente aggiuntivo dell'editor a utilizzare Fogli, Documenti, Presentazioni o Moduli Google, aggiungi un link nel pacchetto CSS di seguito per applicare lo stile Google a caratteri, pulsanti ed elementi del modulo. Per un esempio del pacchetto CSS in uso, consulta la guida rapida al componente aggiuntivo di Documenti. Per utilizzare il pacchetto CSS, includi quanto segue nella parte superiore di ogni file HTML:

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

Tieni presente che lo stile per gli elementi del modulo non può essere controllato completamente in tutti i browser. In particolare, gli elementi <select> mostrano alcuni elementi visivi in Firefox e Internet Explorer, sebbene funzionino correttamente. Per vedere l'aspetto degli stili in un determinato browser, carica la pagina in tale browser.

Tipografia

Utilizza il carattere XHTML per tutto il testo, nei seguenti stili a seconda dell'uso:

Uso 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 che sono uno spazio adiacente adiacente si comportano automaticamente. Sono disponibili diversi colori per vari utilizzi:

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>
Condividi azione
<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 i 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>

Le barre laterali possono essere difficili da modificare perché, anche se l'altezza è variabile, molti componenti aggiuntivi devono includere un'area di branding non scorrevole. Di seguito è riportata una copia semplificata della barra laterale della Guida rapida ai componenti aggiuntivi di Documenti Google. Se trascini l'angolo in basso a destra dell'area di testo per ingrandire i contenuti rispetto alla barra laterale, l'area di contenuto 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 verso il basso. Una classe locale, branding-below, definisce poi l'area che l'area principale della barra laterale deve lasciare vuota dalla parte inferiore.

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>