用于编辑器插件的 CSS 软件包

使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

为了让您的编辑器插件的外观和风格与 Google 表格、文档、幻灯片或表单相似,请关联以下 CSS 软件包,以将 Google 样式应用于字体、按钮和表单元素。如需查看正在使用的 CSS 软件包的示例,请参阅文档插件快速入门。如需使用 CSS 软件包,只需在每个 HTML 文件的顶部添加以下代码即可:

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

请注意,表单元素样式无法在所有浏览器中完全控制。特别是,<select> 元素会在 Firefox 和 Internet Explorer 中显示一些视觉工件,尽管它们仍然正常运行。要查看特定浏览器中的样式,只需在相应浏览器中加载此页面即可。

Typography

根据使用方式,使用以下样式为所有文本使用 Arial 字体:

用途和外观 使用 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>

按钮

您可以使用任何标准按钮类型 - <button><input type="button"><input type="submit">,以及 <a class="button">。水平相邻空间的按钮会自动自行消失。有多种颜色可用于各种用途:

使用 外观 使用 CSS 软件包进行标记
主要操作
<button class="action">Translate</button>
次要操作
<button>Close</button>
创建操作
<button class="create">Create</button>
共享操作
<button class="share">Share</button>

复选框

示例 使用 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>

单选按钮

示例 使用 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>

选择菜单

示例 使用 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>

文本区域

示例 使用 CSS 软件包进行标记
<div class="form-group">
  <label for="sampleTextArea">Label</label>
  <textarea id="sampleTextArea" rows="3"></textarea>
</div>

文本字段

示例 使用 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>

边栏的样式可能很难,因为高度可变,但许多插件都需要包含不会滚动的品牌区域。下面是 Google 文档插件快速入门中边栏的简化副本。如果您拖动文本区域的右下角,以使内容比边栏高,内容区域会自动滚动,但底部的品牌信息不会滚动。

该示例使用 sidebar 类应用正确的内边距,并使用 bottom 类强制在底部添加品牌区域。然后,局部类 branding-below 会定义边栏的主要区域应该从底部离开的区域。

示例 使用 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>