Paket CSS untuk Add-on Editor

Untuk membantu Add-on Editor terlihat dan terasa seperti Google Spreadsheet, Dokumen, Slide, atau Formulir, tautkan dalam paket CSS di bawah ini untuk menerapkan gaya visual Google pada font, tombol, dan elemen formulir. Untuk mengetahui contoh paket CSS yang digunakan, lihat Panduan memulai add-on Dokumen. Untuk menggunakan paket CSS, cukup sertakan kode berikut di bagian atas setiap file HTML:

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

Perhatikan bahwa gaya untuk elemen formulir tidak dapat dikontrol sepenuhnya di semua browser. Secara khusus, elemen <select> menampilkan beberapa artefak visual di Firefox dan Internet Explorer, meskipun masih berfungsi dengan baik. Untuk melihat tampilan gaya di browser tertentu, cukup muat halaman ini di browser tersebut.

Tipografi

Gunakan font Arial untuk semua teks, dengan gaya berikut tergantung penggunaan:

Penggunaan dan tampilan Markup dengan paket 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>

Tombol

Anda dapat menggunakan jenis tombol standar—<button>, <input type="button">, atau <input type="submit">, serta <a class="button">. Tombol yang berdekatan secara horizontal akan otomatis keluar. Ada beberapa warna yang tersedia, untuk berbagai penggunaan:

Penggunaan Tampilan Markup dengan paket CSS
Tindakan utama 
<button class="action">Translate</button>
Tindakan sekunder 
<button>Close</button>
Membuat tindakan 
<button class="create">Create</button>
Tindakan berbagi 
<button class="share">Share</button>

Kotak centang

Contoh Markup dengan paket 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>

Tombol pilihan

Contoh Markup dengan paket 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>

Pilih menu

Contoh Markup dengan paket 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>

Area teks

Contoh Markup dengan paket CSS 
<div class="form-group">
  <label for="sampleTextArea">Label</label>
  <textarea id="sampleTextArea" rows="3"></textarea>
</div>

Kolom teks

Contoh Markup dengan paket 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>

Gaya sidebar bisa sulit ditentukan karena tingginya bervariasi, banyak add-on perlu menyertakan area branding yang tidak di-scroll. Berikut adalah salinan sidebar yang sederhana dari panduan memulai add-on Google Dokumen. Jika Anda menarik sudut kanan bawah area teks untuk membuat konten lebih tinggi dari sidebar, area konten akan otomatis di-scroll, tetapi branding tidak akan di bagian bawah.

Contoh ini menggunakan class sidebar untuk menerapkan padding yang benar dan class bottom untuk memaksa area branding ke bagian bawah. Class lokal, branding-below, lalu menentukan area yang harus dibiarkan terlihat jelas oleh area utama sidebar dari bawah.

Contoh Markup dengan paket 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>