文档首页 > > 用户指南> 组件指南> 交互> Tab列表

Tab列表

分享
更新时间: 2019/06/14 GMT+08:00

本章节主要介绍Tab列表组件各配置项的含义。

样式

  • 尺寸位置
    • 图表尺寸:设置图层的宽和高。
    • 图表位置:设置图层在画布中的位置。
    图1 尺寸位置-Tab列表
  • 全局样式
    • 字体:设置组件文本的字体类型。
    • 背景色:单击颜色编辑器设置组件的背景色。
    • 行数:输入数值或单击设置显示行数。
    • 列数:输入数值或单击设置显示列数。
    • 选择类型:单击下拉选项设置选择类型,可设置为单选或多选。
    • 初始化值:输入初始化值。
      • 若选择类型为单选,初始化值和“数据”页签中的id是一致。例如初始化值为1,Tab1列表会点亮。
      • 若选择类型为多选,初始化值和“数据”页签中的id是一致。初始化值可设置为多个,例如“1,2”,Tab1和Tab2的列表都会点亮。
    图2 全局样式-Tab列表
  • 标签配置
    • 字号:设置组件文本的字号大小。
    • 字体颜色:设置组件文本的字体颜色。
    • 字体粗细:设置组件文本的字体粗细。
    • 背景色:单击颜色编辑器设置tab列表的背景色。
    • 圆角半径:输入数值或拖动,设置tab列表的圆角半径。
    • 悬浮背景色:单击颜色编辑器设置悬浮背景色。
    • 选中文字颜色:单击颜色编辑器设置tab列表选中文字时的颜色。
    • 选中背景颜色:单击颜色编辑器设置tab列表点亮时的背景颜色。
    图3 标签配置-Tab列表

数据

上图中的示例数据如下:

[
  {
    "id": "1",
    "label": "Tab1"
  },
  {
    "id": "2",
    "label": "Tab2"
  },
  {
    "id": "3",
    "label": "Tab3"
  }
]
  • id:Tab选项卡的标签id。初始化值配置项需要使用此变量的值,来定义选中的Tab标签。
  • label:Tab选项卡显示的标签文本。

交互

如何使用组件的交互配置,请参照设置组件交互

分享:

    相关文档

    相关产品

文档是否有解决您的问题?

提交成功!

非常感谢您的反馈,我们会继续努力做到更好!

反馈提交失败,请稍后再试!

*必选

请至少选择或填写一项反馈信息

字符长度不能超过200

提交反馈 取消

如您有其它疑问,您也可以通过华为云社区问答频道来与我们联系探讨

跳转到云社区