Tab 栏
#
适用场景用于实现页面的 Tab 栏导航效果
#
基础能力说明- 通过布局模式属性,可配置多种 Tab 栏样式,支持 icon+文字,或纯 icon、纯文字的样式效果
- 在标签列表属性中,选中单个标签,可配置标签标题、图标样式、跳转页面等属性
- 选中页面属性配置哪个页面,则运行态会以选中效果展示该页面对应的标签
- 高级属性中,提供了多种样式属性,便于调整 Tab 栏的颜色、尺寸等
#
扩展场景说明#
Tab 栏组件复用到多个页面- 在编辑区选中以配置好标签的 Tab 栏组件,鼠标右击,选择「复制」
- 编辑器切换到另一个页面,鼠标点击大纲树中的页面节点,win 电脑点击键盘 ctri+c,man 电脑点击键盘 command+c,即可将 Tab 栏组件复制到该页面,再调整组件的「选中页面」属性为当前页面,即可完成复用
#
属性介绍组件接收的外部传入的属性
属性名 | 属性标识 | 类型 | 属性分组 | 默认值 | 说明 |
---|
布局模式 | layoutType | {"img":"https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1638935587067_l2004mzar6p5sif6r.svg","label":"icon + 文字","value":"iconText"}|{"img":"https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1638935581195_mtr3a1pwre8r7wrk9.svg","label":"icon","value":"icon"}|{"img":"https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1638935581195_avx6a6e1xrxzs38fr.svg","label":"文字","value":"text"} | 基础属性 | "iconText" | 选择Tab栏组件的布局模式 |
标签列表 | tabs | array | 基础属性 | [{"name":"","title":"标签1","iconFont":"td:app"},{"name":"","title":"标签2","iconFont":"td:cart"},{"name":"","title":"标签3","iconFont":"td:user"}] | - |
选中页面 | value | string | 基础属性 | "" | 若选中页面与Tab中配置的页面相同,则Tab会变为选中状态 |
路由方式 | routeType | {"label":"跳转(navigate)","value":"navigateTo"}|{"label":"重定向(redirect)","value":"redirectTo"} | 高级属性 | "redirectTo" | 支持选择到导航与重定向两种跳转方式 |
位置 | position | {"label":"底部","value":"bottom"}|{"label":"顶部","value":"top"}|{"label":"当前位置","value":"unset"} | 高级属性 | "bottom" | 选择Tab栏在页面的布局位置 |
背景 | backgroundType | {"label":"纯色","value":"color"}|{"label":"图片","value":"image"} | 高级属性 | "color" | 支持选择颜色背景以及图片背景 |
背景色 | backgroundColor | string | 高级属性 | "#FFF" | 当选择了颜色背景时可配置,选择Tab栏的背景颜色 |
背景图 | backgroundImage | string | 高级属性 | "" | 当选择了图片背景时可配置,选择Tab栏的背景图片 |
Tab默认色 | color | string | 高级属性 | "#444444" | 配置Tab图标以及标题的默认颜色,图标颜色修改仅对内置颜色生效 |
Tab选中色 | activeColor | string | 高级属性 | "#006EFF" | 配置Tab图标以及标题的选中颜色,图标颜色修改仅对内置颜色生效 |
图标大小 | iconSize | number | 高级属性 | 40 | 设置Tab图标的尺寸大小 |
#
事件介绍组件暴露的事件,可以监听组件的事件来触发一些外部的动作
事件名 | 事件code | 事件出参 event.detail | 适用情况 | 说明 |
---|
change | change | 兼容三端 | - |