[{"id":"bcb0874d-299b-448e-9552-9e9b25ef80dd","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"8ce3627e-9e58-471b-9133-4f135d191e7b","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"ae60ae59-34f5-4f32-a8eb-243ed1457543","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"3d4848c3-910f-4ffa-9153-60bb507334a9","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"133f4ca6-d951-4d65-a618-3dc6301266f7","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"de62ec1c-813e-40b1-8160-a4cd109afe64","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"2426c71d-8332-4cbd-a436-1ec4f8666464","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"2ce7b6b0-78aa-4e4b-bf8a-e4ba2f988298","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"4706db46-0811-4652-8f59-1e0a1da84758","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"8f1271bb-2cd9-4f39-9897-c15b239ee7ab","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"677e13a7-6f3e-449f-986c-2c3a26f8d54f","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"5e40f6dc-caec-49d7-a1d0-be65f06815ba","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"2457f0e0-9e71-4860-a87d-065e0fb84f84","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"d5c67fd0-1145-482c-9113-97b492c44c18","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"a609a8fa-ab91-4c1d-a1c3-d209d0463303","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"b4a9eb15-94e5-48df-b218-a24138f0cf9c","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]}]
产品官网 帮助文档 API 文档 视频教程 技术社区
在线Demo 免费试用
(Showing Draft Content)

选项卡样式

通过属性设置中的设置项您可以对选项卡进行外观的个性化定制。比如选项卡的整体外观，以及选中/未选中/悬浮时的不同状态。

选项卡样式

我们可以通过选项卡的样式设置完成其布局以及快速样式。

image

显示选项卡

设置是否显示选项卡标签。

image2021-6-2_15-56-35.png

image2021-6-2_15-56-52.png

样式

使用选项卡时，可以直接选择系统内置的8套样式直接调用，快速改变样式外观。

找到 选项卡 中的 样式 ，然后在下拉列表中选择你想要的样式。

默认是内置了8套样式，如您还想进一步自由设计外观，可以进一步通过属性设置各项目进行详细的设置。

image2022-4-2_14-47-39.png

选项卡显示位置

image2021-6-2_16-8-8.png

设置选项卡页签的显示位置，可选择在顶部显示或者在底部显示。

页签在顶部效果：

image2020-4-26_18-11-55.png


页签在底部效果：

image2020-4-26_18-12-7.png

对齐方式

image2021-6-2_16-12-9.png

设置选项卡标签相对于整个选项卡的对齐方式。

左对齐效果：

image2020-4-27_9-30-12.png

右对齐效果：

image2020-4-27_9-31-26.png

居中对齐：

image2020-4-27_9-31-49.png

宽度设置

设置选项卡标签的宽度，可选择“ 固定宽度 ”、“ 自动宽度 ”和“ 平均分布宽度 ”三种类型。

当选择“ 固定宽度 ”时，可设置宽度值。

image2020-4-27_11-10-39.png

选择为“ 自动宽度 ”时，可自动根据标签名长度调整标签宽度。

image2020-4-27_11-11-57.png

选择为“ 平均分布宽度 ”时，将平均分配标签总宽度。

image2020-4-27_11-12-45.png

高度设置

设置选项卡的高度。可选择自动高度和固定高度，当选择固定高度时可自定义选项卡的高度。

image2022-4-1_16-27-56.png

image2022-4-1_16-27-11.png

选项卡间隙

image2020-4-27_9-34-44.png

设置选项卡标签之间的间隙，单位为像素。

image

字体设置

设置选项卡页签的字体样式、颜色、大小以及是否加粗、倾斜等。

image2020-4-27_9-25-7.png

填充颜色

image2020-4-26_18-22-46.png

设置选项卡整体的填充颜色，单击色块选择颜色，并确定。

如果想恢复默认设置，单击右侧的image2018-5-17_11-44-33.png，选择“重置”即可。

image2020-4-26_18-15-35.png

内部边距

设置选项卡距离边框的距离。

选项卡列表边框颜色

image2021-6-2_16-43-26.png

设置选项卡列表的边框颜色，如下图所示。

image2020-4-27_18-7-59.png

分隔线

image2020-4-27_9-26-2.png

设置是否显示各选项卡之间的分隔线，默认为“ 是 ”。

image2019-7-10_11-33-4.png

image2019-7-10_11-33-38.png

显示页签导航按钮

设置是否显示选项卡的切换按钮。

image2022-4-1_16-31-31.png

左右切换按钮

设置是否显示左右切换按钮。

image

移动端自动布局策略

设置在移动端如何显示选项卡页面中的多个组件。

image2021-6-2_17-10-11.png


缩放策略时，会按原始布局进行缩放显示。

image2021-6-2_17-11-35.png


流式布局时，会将组件依次向下排布。

image2021-6-2_17-12-6.png

页签区域样式

image

设置选项卡页签区域的样式，如下图所示填充蓝色到黄色的渐变区域。

image

定制外观细节(整体/选中/未选中/悬浮选项卡设置）

image2022-4-2_15-26-58.png image

整体样式

整体设置圆角弧度（未选中，悬浮以及选中状态弧度默认会继承该设置，但当各状态的弧度自定义过的话，将以自定义的为准。），内部边距，底色填充。

未选中/悬浮/选中选项卡设置

设置选项卡三种状态时的外观，包括选项卡颜色、文本的颜色、圆角弧度、填充渐变、背景图片，阴影，边框的宽度和颜色等。

其中选中状态时，还可以设置标签的颜色。

image2022-4-2_16-2-16.png

image2020-4-27_18-32-30.png