TabsSsr
Tabs组件在ssr上不展示内容，特新增此组件用于分隔内容上有关联但属于不同类别的数据集合。
基础用法
卡片风格的标签
标签位置的设置
标签栏滚动
粘性布局
Tips: 如果页面顶部有其他内容，可以通过
offset-top属性设置吸顶时与顶部的距离。
切换动画
滑动切换
滚动导航
自定义标签页的内容
动态增减标签页
自定义增加标签页触发器
异步切换
Tips: 通过手势滑动不会触发 before-change 属性。
API
与tabs 组件属性一致
Props 特有
| 属性名 | 详情 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| items | tabs数据数组 | TabItem[] | - | - |
| content | 是否显示tab内容 | boolean | - | true |
TabItem 数据结构
| 键名 | 说明 | 类型 |
|---|---|---|
| title | 标题 | string |
| disabled | 是否禁用标签 | boolean |
| dot | 是否在标题右上角显示小红点 | boolean |
| badge | 图标右上角徽标的内容（dot 为 fasle 时生效） | number | string |
| name | 标签名称，作为匹配的标识符 | string | number |
| url | 点击后跳转的链接地址 | string |
| to | 点击后跳转的链接地址 | string |
| to | 点击后跳转的目标路由对象，等同于 Vue Router 的 to 属性 | string | RouteLocationRaw |
| replace | 是否在跳转时替换当前页面历史 | boolean |
| titleStyle | 自定义标题样式 | string | CSSProperties |
| titleClass | 自定义标题类名 | unknown |
| closable | 标签是否可关闭 | boolean |
| showZeroBadge | 当 badge 为数字 0 时，是否展示徽标 | boolean |
| slot | 自定义tab内容插槽name | string |
| content | tab内容 | string |
主题定制
与tabs组件等同