跳到主要内容

样式

ONLYOFFICE 提供了用于不同界面元素的样式表。若要使你的插件界面适配 ONLYOFFICE 的样式，可以在 index.html 文件中通过以下链接引入 plugin.css 文件：

<link rel="stylesheet" href="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.css">

为了保持用户插件界面的一致性，您可以使用一组专为生成插件 UI 设计的预构建基础组件。您可以在我们的 Storybook 中探索组件功能，并进行交互。

所有可用的控件也都在控件示例插件中展示：

控件示例

按钮​

用于用户交互的按钮组件。

备注

按钮颜色由开发者自行选择。按钮颜色越深，表示其重要性越高。通常，btn-text-default.submit.primary 类的按钮用于确认操作并提交结果（例如，确认按钮）。

btn-text-default​

类型: class

为您的插件添加默认的白色按钮样式。

示例:

<button class="btn-text-default" style="width:75px;">Button 1</button>

CSS 参数:

.btn-text-default {
    background: #fff;
    border: 1px solid #cfcfcf;
    border-radius: 2px;
    color: #444444;
    font-size: 11px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    height: 22px;
    cursor: pointer;
}

Button 1

btn-text-default.submit.primary​

类型: class

为您的插件添加主要的深灰色按钮样式。用于确认操作并提交结果。

示例:

<button class="btn-text-default submit primary" style="width:75px;">Button 2</button>

CSS 参数:

.btn-text-default.submit.primary {
    color: #fff;
    background-color: #7d858c;
}

Button 2

btn-text-default.submit​

类型: class

为您的插件添加浅灰色按钮样式。

示例:

<button class="btn-text-default submit" style="width:75px;">Button 3</button>

CSS 参数:

.btn-text-default.submit {
    font-weight: bold;
    background-color: #d8dadc;
    border: 1px solid transparent;
}

Button 3

btn-edit​

类型: class

为您的插件添加编辑按钮图标。

示例:

<label class="for-combo">Edit button</label><div class="btn-edit" style="display: inline-block; margin-left: 10px;"></div>

CSS 参数:

.btn-edit {
    width: 13px;
    height: 13px;
    cursor: pointer;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGZSURBVHgBfZI/y4FRGMavx7+SRQaTTQab74CVlBKL/FukDGQhEgsDNh/Apiw+gcXm70DJoEikKMUk7vec8/Yi75O7Tj2d+/4913Wuc6Tz+UyQqev1itvtBr1e/6+nkgP2+z0qlYr4DgaDsNls36HtdotisYhoNAqLxYJyuSz230HFO7DZbISC0+lEp9OBRqNBLpdDq9XCeDx+DfIz8TWZTIhZodFoRMvlknw+H8XjcdrtdrRarYgpU6/XE7MC4oMc4OB8Pie/30/ZbJba7TYlk0k6HA4CDIVCxNyQYrFYoNFoIJ1OQ5Ik5PN5WK1WpFIprNdr8H61WhVn5X2VisXg8XhoNpvRYDAgt9tNbICOxyOVSiVyuVzU7/epXq9TIBAQtrkzxeVygclkQrfbhd1uRzgcRq1Ww3A4FKparRbspyJRo9H4G4TD4RD06XQS3pkt8nq9NJ1OiSVGsVjsqfC3nvekVCrxeDxgMBgQiUTEa2g2m8hkMi8FuXtSq9VIJBK43+8iHB7GJ8BL4vY+N3U6HQqFAsxmM+TqB5Je/SVNoN18AAAAAElFTkSuQmCC');
}

Edit button

输入控件​

用于用户数据输入的输入组件。

textarea​

类型: element

为您的插件添加文本区域输入字段。

示例:

<textarea style="height:45px;width: 100%;" class="form-control" placeholder="textarea control"></textarea>

CSS 参数:

textarea.form-control {
    resize: none;
}

Textarea

input[type="text"]​

类型: element

为您的插件添加文本输入字段。

示例:

<input type="text" class="form-control" placeholder="text field" style="width: 100%;margin-bottom: 2px;">

CSS 参数:

.form-control {
    border: 1px solid #cfcfcf;
    border-radius: 2px;
    box-sizing: border-box;
    color: #444444;
    font-size: 11px;
    height: 22px;
    padding: 1px 3px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

Text field

input[type="checkbox"]​

类型: element

为您的插件添加复选框输入。

示例:

<input type="checkbox" class="form-control" style="vertical-align: middle;"><label style="margin-left: 5px;vertical-align: middle;">Checkbox</label>

CSS 参数:

input[type='checkbox '].form-control {
    height: auto;
    margin: 0;
}

Checkbox

标签控件​

用于文本显示的标签组件。

label.header​

类型: class

为您的插件添加加粗标题标签。

示例:

<label class="header">Header label</label>

CSS 参数:

label.header {
    font-weight: bold;
}

类型: class

为您的插件添加链接样式的标签。

示例:

<label class="link">Link label</label>

CSS 参数:

label.link {
    border-bottom: 1px dotted #aaa;
    cursor: pointer;
}

下拉组合框​

类型: function

使用 select2 库为您的插件添加下拉组合框。

示例:

<select id="select_example" class="" ></select>
$('#select_example').select2({
    data : [{id:0, text:'Item 1'}, {id:1, text:'Item 2'}, {id:2, text:'Item 3'}],
    minimumResultsForSearch: Infinity,
    width : '120px'
});

Combobox

加载器​

类型: class

为您的插件添加加载器容器，用于显示加载状态。

示例:

<div id="loader-container" class="asc-loader-container" style="margin: 10px; height: 40px; border: 1px solid #cfcfcf;"></div>

CSS 参数:

.asc-loader-container {
    position: relative;
}

Loader

示例​

此示例演示如何在 YouTube 插件中添加符合 ONLYOFFICE 风格的界面元素。

YouTube plugin

<!-- 默认白色按钮 -->
<button class="btn-text-default" style="width:30px;">OK</button>

<!-- 文本输入框 -->
<input type="text" class="form-control" style="width:100%;">

<!-- 主要深灰色按钮 -->
<button class="btn-text-default submit primary" style="width:90px;">Ok</button>

<!-- 浅灰色取消按钮 -->
<button class="btn-text-default submit" style="margin-left:5px; width:90px;">Cancel</button>