容器

容器微件类别包括以下微件：

• 基本
• 对话框
• 弹性
• 重复
• 水平拆分
• 垂直拆分
• 标签页

下表提供了有关容器微件可用属性的使用详情。表格后面跟随几个示例。

属性

ITabTitle

IFlexOptions

用法

通过拖动微件进出容器来添加和移除它们到当前选定的标签页中。tabContents属性在原始标签页中不支持，不应手动编辑，也不会响应用户交互的更改。

示例

简单容器

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "selectedTabIndex": 0,  // 当前选中的标签页索引
  "tabContents": [        // 标签页内容数组
    {
      "children": []      // 每个标签页的子元素
    }
  ],
  "tabTitles": [          // 标签页标题数组
    {
      "title": "Title"    // 每个标签页的标题
    }
  ],
  "titlesEnabled": false  // 标题是否启用
}

标签容器

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
  "selectedTabIndex": 1,  // 选中的标签索引
  "tabContents": [
    {
      "children": []  // 第一个标签的内容
    },
    {
      "children": []  // 第二个标签的内容
    },
    {
      "children": []  // 第三个标签的内容
    }
  ],
  "tabTitles": [
    {
      "title": "Title 1"  // 第一个标签的标题
    },
    {
      "title": "Title 2"  // 第二个标签的标题
    },
    {
      "title": "Title 3"  // 第三个标签的标题
    }
  ],
  "titlesEnabled": true  // 标题是否启用
}

从其他微件驱动选定的选项卡

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
  "selectedTabIndex": "{{w8.selectedValue}}",  // 选中的选项卡索引，由变量 w8.selectedValue 动态决定
  "tabContents": [
    {
      "children": []  // 第一个选项卡的子元素，目前为空
    },
    {
      "children": []  // 第二个选项卡的子元素，目前为空
    },
    {
      "children": []  // 第三个选项卡的子元素，目前为空
    }
  ],
  "tabTitles": [
    {
      "title": "Title 1"  // 第一个选项卡的标题
    },
    {
      "title": "Title 2"  // 第二个选项卡的标题
    },
    {
      "title": "Title 3"  // 第三个选项卡的标题
    }
  ],
  "titlesEnabled": false  // 标题是否启用，当前设置为不启用
}

---

对话框微件

下表提供了对话框微件可用属性的使用详情。表格后面有几个示例。

属性

操作

事件

---

常用CSS

您可以使用以下CSS设置容器的背景颜色和边框：

Copied!
1
2
3
4
5
sl-app-container {
  background: lightgrey; /* 设置背景颜色为浅灰色 */
  border-left:none; /* 去除左边框 */
  border-right:none; /* 去除右边框 */
}

虽然 sl-app-container 选择器和 background 属性可以正确设置容器微件的背景颜色和边框，但请在本地样式表中使用 div.canvas-body 选择器和 background-color 属性以调整 Slate 应用画布的颜色和边框。在下面的示例中，我们使用样式编辑器自定义了 Slate 画布、容器微件和条形图的颜色：

标签式容器

标签样式：

Copied!
1
2
3
4
5
6
sl-app-container table.container-titles tbody tr td.tab-title {
  color: #2786c1; /* 设置字体颜色为#2786c1 */
  text-transform:uppercase; /* 将文本转换为大写 */
  border-left:none; /* 去掉左边框 */
  border-right:none; /* 去掉右边框 */
}

悬停样式：

Copied!
1
2
sl-app-container table.container-titles tbody tr td.tab-title:hover {text-decoration:none;}
/* 当鼠标悬停在包含类 `tab-title` 的 `td` 元素上时，取消文本装饰效果 */

选择样式：

Copied!
1
2
3
4
sl-app-container table.container-titles tbody tr td.tab-title.selected {
  color: #394B59; /* 设置选中标签标题的字体颜色 */
  border-bottom:4px solid #2786C1; /* 设置选中标签标题底部的边框颜色和宽度 */
}

单个标签样式：

Copied!
1
2
3
4
sl-app-container table.container-titles tbody tr td.tab-title:last-child {
  border-left:none; /* 去掉最后一个单元格的左边框 */
  border-right:none; /* 去掉最后一个单元格的右边框 */
}