Skip to main content

选项卡

Tab页签

适用场景

用以在单个页面内需要切换多个业务事项的场景,比如全部订单、未付款订单、退款中订单等多业务场景视图的切换。

属性介绍

属性分类属性名称属性作用
基本属性组件ID组件在当前页面的唯一标识。
页签标题可以新增、删除标签,修改已有标签id、名称,调整标签顺序。调整标签顺序,通过拖动每列前的调整图标:img
选项卡结构定义页签排列结构,分为上下结构和左右结构。运行态:
上下结构:
img
左右结构:
img
展示形态定义单页签的展示方式,分为普通型、文本型、包裹型和胶囊型四种。运行态:
普通型:
img
文本型:
img
包裹型:
img
胶囊型:
img
多页面模式即页签较多,超出页面宽度时,多余的页签展示方式,分为滑动和下拉两种。运行态滑动img下拉img
销毁切换即页签切换时是否自动刷新视图,选择后表示,切换后会销毁页签内子组件的内容,下次重新加载。

基础功能

tab页签组件是一个布局组件,可以通过页签快速切换多个业务场景视图。基本用法如下:

步骤1: 新建标准页面,如下所示:

img

步骤 2: 然后从左侧的组件列表拖动“选项卡”组件到画布区域,每一个页签都是一个容器组件,可以往容器内拖拽其他组件,比如表格、表单组件等,如下所示:

img

步骤 3: 设置页签的各个属性,使其按照自己想要的方式展示,如下所示:

img

最终运行态组件展示如下所示:

img

高级功能

暂无