为了使您的编辑器插件具有与 Google 表格、文档、幻灯片或表单类似的外观和风格,请链接到以下 CSS 软件包,将 Google 样式应用于字体、按钮和表单元素。如需查看正在使用的 CSS 软件包的示例,请参阅文档插件快速入门。
若要使用 CSS 包,只需在每个 HTML 文件的顶部添加以下代码即可:
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
请注意,我们无法在所有浏览器中完全控制表单元素的样式。特别是,在 Firefox 和 Internet Explorer 中,<select>
元素会显示一些视觉伪影,但它们仍可正常运行。若要查看样式在给定浏览器中的显示效果,只需在该浏览器中加载此页面即可。
排版
对所有文本使用以下样式(具体取决于使用情况):
使用和外观 |
使用 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> |