跳到主要内容

侧边栏 Sidebar

垂直展示的导航栏，用于在不同的内容区域之间进行切换

API

安装使用​

import { TiSidebar, TiSidebarItem } from '@titian-design/mobile-vue'

用法示例​

基础用法​

<template>
  <TiSidebar :active-index="1">
    <TiSidebarItem label="侧边导航" badge="1" />
    <TiSidebarItem label="IP联名款" />
    <TiSidebarItem label="精选系列" disabled />
  </TiSidebar>
</template>

<script lang="ts" setup>
import { TiSidebar , TiSidebarItem } from '@titian-design/mobile-vue';
</script>

TiSidebar API​

属性 Properties​

名称类型必填默认值说明备注
active-indexnumber否0选中项的索引-
ext-stylestring | Record<string, string>否-根节点样式-

事件 Events​

名称参数列表描述备注
change(e: CustomEvent<number>) => void切换菜单时触发, 返回激活项索引-
scrolltoupper(e: CustomEvent<{ direction: 'top' }>) => void滚动到顶部时触发-
scrolltolower(e: CustomEvent<{ direction: 'bottom' }>) => void滚动到底部时触发-
ti-scroll(e: CustomEvent) => void滚动时触发-

插槽 Slots​

名称说明备注
default默认插槽-

外部样式类 External Classes​

名称说明备注
ext-classTiSidebar节点样式类-

CSS 变量 CSS Variable​

变量默认值说明备注
--sidebar-bg-color#f5f5f5侧边栏背景色-

TiSidebarItem API​

属性 Properties​

名称类型必填默认值说明备注
labelstring否-每项内容-
disabledboolean否false是否禁用-
badgestring否-徽标内容-
dotboolean否-圆点徽标-
ext-stylestring | Record<string, string>否-根节点样式-

CSS 变量 CSS Variable​

变量默认值说明备注
--sidebar-text-color#757575侧边栏每项文字颜色-
--sidebar-line-height38px侧边栏每项文字行高-
--sidebar-font-size26px侧边栏每项文字字号-
--sidebar-active-bg-color#fff侧边栏激活项背景颜色-
--sidebar-active-text-color#fa2c19侧边栏激活项文字颜色，默认跟随主题色
--sidebar-disabled-text-color#c4c4c4侧边栏禁用项文字颜色-
--sidebar-padding34px 20px 34px 28px侧边栏内边距-