Düzenleyici Eklentileri için CSS paketi

Düzenleyici Eklentinizin Google E-Tablolar, Dokümanlar, Slaytlar veya Formlar'a benzer bir görünüme ve tarza sahip olmasını sağlamak için yazı tiplerine, düğmelere ve form öğelerine Google stilini uygulamak üzere aşağıdaki CSS paketine bağlantı verin. Kullanılan CSS paketinin bir örneği için Dokümanlar eklentisi hızlı başlangıç kılavuzu sayfasına göz atın. CSS paketini kullanmak için aşağıdaki kodu her bir HTML dosyasının en üstüne eklemeniz yeterlidir:

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

Form öğelerinin stilinin tüm tarayıcılarda tam olarak kontrol edilemeyeceğini unutmayın. Özellikle, <select> öğeleri düzgün çalışsalar da Firefox ve Internet Explorer'da bazı görsel yapıları görüntüler. Stillerin belirli bir tarayıcıda nasıl göründüğünü görmek için bu sayfayı söz konusu tarayıcıda yüklemeniz yeterlidir.

Yazı biçimi

Kullanıma bağlı olarak aşağıdaki stillerde tüm metinler için Arial yazı tipini kullanın:

Kullanım ve görünüm CSS paketiyle işaretleme 
<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>

Düğmeler

Standart düğme türlerinden herhangi birini (<button>, <input type="button"> veya <input type="submit">) ve <a class="button"> kodunu kullanabilirsiniz. Yatay olarak bitişik alan düğmeler otomatik olarak yer alır. Çeşitli kullanımlar için çeşitli renkler vardır:

Kullanım Görünüm CSS paketiyle işaretleme
Birincil işlem 
<button class="action">Translate</button>
İkincil işlemler 
<button>Close</button>
İşlem oluştur 
<button class="create">Create</button>
İşlemi paylaş 
<button class="share">Share</button>

Onay kutuları

Örnek CSS paketiyle işaretleme 
<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>

Radyo düğmeleri

Örnek CSS paketiyle işaretleme 
<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>

Menüleri seçin

Örnek CSS paketiyle işaretleme 
<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>

Metin alanları

Örnek CSS paketiyle işaretleme 
<div class="form-group">
  <label for="sampleTextArea">Label</label>
  <textarea id="sampleTextArea" rows="3"></textarea>
</div>

Metin alanları

Örnek CSS paketiyle işaretleme 
<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>

Yükseklik değişken olsa da birçok eklentinin kaydırma yapmayan bir marka alanı içermesi gerektiğinden kenar çubuklarının stil özelliklerini ayarlamak zor olabilir. Aşağıda, Google Dokümanlar eklentisi hızlı başlangıç kılavuzundaki kenar çubuğunun basitleştirilmiş bir kopyası bulunmaktadır. İçeriği kenar çubuğundan daha uzun hale getirmek için metin alanının sağ alt köşesini sürüklerseniz içerik alanı otomatik olarak kaydırılır ancak alttaki markalama değişmez.

Örnekte, doğru dolguyu uygulamak için sidebar sınıfı ve markalama alanını alta zorlamak için bottom sınıfı kullanılmaktadır. Daha sonra, branding-below adlı yerel bir sınıf, kenar çubuğunun ana alanının aşağıdan temizlenmesi gereken alanı tanımlar.

Örnek CSS paketiyle işaretleme 
<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>