全部产品

选项卡

更新时间:2020-09-23 16:41:24

如果需要将不同的信息归类展示,可以使用选项卡组件。用户选中不同的页签,展示不同的信息。下文介绍如何使用该组件。

步骤一:添加组件

  1. 创建移动应用。详细操作请参见创建移动应用

  2. 在移动应用编辑器中,单击最左侧的组件图标组件

  3. (可选)添加分栏组件,进行应用页面布局设置,详细内容请参见横向分栏和纵向分栏

  4. 在画布左侧组件列表上方,输入选项卡,找到该组件,然后将组件拖拽到中间画布或画布中分栏组件的某栏中。

    说明

    每个选项卡对应一个栏,您可在该栏中设置该选项卡要展示的数据。

    有关组件添加的详细内容,请参见添加组件

    选项卡

步骤二:配置样式

  1. 在右侧样式默认选项卡设置中,单击新增,添加选项卡。

    您也可删除选项卡,或拖动图标调序,调整选项卡展示顺序。

  2. 分别单击选项卡的编辑按钮编辑,设置每个选项卡的显示标题。

  3. 分别单击每个选项卡,在对应容器栏中配置展示数据的组件。如下图所示。

    说明

    如果需要添加多个组件,需先添加分栏组件。

    选项卡配置

  4. 分别选中每个选项卡的容器栏,设置栏样式。详细说明请参见横向分栏的栏配置

  5. 设置组件在页面的展示样式。

    配置项

    说明

    默认选项卡设置

    支持选中某个选项卡的单选按钮,应用运行时,默认展示该选项卡内容。

    选项卡样式

    设置选项卡基础、选中状态的样式。

    容器样式

    设置选项卡展示内容所属容器的样式。

  6. 调整组件宽高和在页面中的布局位置。详细说明请参见通用样式

步骤三:配置交互动作

  1. 选中组件的交互页签,配置事件和交互动作。具体操作请参见交互配置

    该组件支持事件切换选项卡单击双击。例如配置单击该组件,刷新栏中组件的展示数据。

  2. 预览和调试组件展示的数据和效果。详细内容请参见预览与调试