Paket CSS untuk add-on Editor

Untuk membantu add-on Editor Anda tampilan dan nuansanya seperti Google Spreadsheet, Dokumen, Slide, atau Formulir, tautkan paket CSS di bawah untuk menerapkan gaya Google ke 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 sepenuhnya dikontrol di semua browser. Secara khusus, elemen <select> menampilkan beberapa artefak visual di Firefox dan Internet Explorer, meskipun elemen tersebut 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, dalam gaya berikut, bergantung pada penggunaannya:

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 apa pun—<button>, <input type="button">, atau <input type="submit">, serta <a class="button">. Tombol yang berdekatan secara horizontal akan otomatis menyetel jaraknya. Ada beberapa warna yang tersedia, untuk berbagai penggunaan:

Gunakan 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 bagikan 
<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 jadi sulit karena meskipun tingginya bervariasi, banyak add-on perlu menyertakan area branding yang tidak di-scroll. Di bawah ini adalah salinan sidebar yang disederhanakan dari panduan memulai add-on Google Dokumen. Jika Anda menarik sudut kanan bawah area teks untuk membuat konten lebih tinggi daripada sidebar, area konten akan otomatis di-scroll, tetapi branding di bagian bawah tidak.

Contoh ini menggunakan class sidebar untuk menerapkan padding yang benar dan class bottom untuk memaksa area branding ke bagian bawah. Class lokal, branding-below, kemudian menentukan area yang harus dikosongkan 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>