Untuk membantu tampilan dan nuansa Add-on Editor
Anda seperti Google Spreadsheet, Dokumen, Slide, atau Formulir, tautkan dalam paket CSS
di bawah ini 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 baris berikut di bagian atas tiap 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 keduanya masih berfungsi dengan baik. Untuk melihat seperti apa 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> |
Anda dapat menggunakan salah satu jenis tombol standar—<button>
,
<input type="button">
, atau <input type="submit">
, serta
<a class="button">
. Tombol yang berdekatan secara horizontal
itu sendiri secara otomatis. 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> |
Buat 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> |
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> |
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> |
Sidebar dapat sulit diberi gaya karena meskipun tingginya bervariasi, banyak
add-on yang perlu menyertakan area branding yang tidak dapat di-scroll.
Berikut adalah salinan sederhana sidebar 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 akan di-scroll.
Contoh ini menggunakan class sidebar
untuk menerapkan padding yang benar dan
class bottom
untuk memaksa area branding ke bawah. Class lokal,
branding-below
, kemudian menentukan area yang harus dihilangkan dari bagian bawah
area utama sidebar.
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> |