Yt-UI
首页
快速开始
组件文档
首页
快速开始
组件文档
  • 表单组件

    • 输入框 Input
    • 多行输入框 Textarea
    • 开关 Switch
    • 多选框组 CheckboxGroup
    • 单选框组 RadioGroup
    • 滑块 Slider
    • 选择器 Picker
    • 日历 Calendar
    • 表单 Form
  • 展示组件

    • 头像 Avatar
    • 徽标 Badge
    • 卡片 Card
    • 标签 Tag
    • 步骤条 Steps
    • 结果页 Result
    • 空状态 Empty
    • 虚拟列表 VirtualList
  • 交互组件

    • 按钮 Button
    • 悬浮按钮 FAB
    • 图标 Icon
    • 搜索 Search
    • 分段器 Segment
    • 轮播 Swiper
    • 指示点 Dots
  • 反馈组件

    • 加载 Loading
    • 弹窗 Popup
    • 遮罩层 Overlay
    • 通告栏 NoticeBar
  • 导航组件

    • 标签栏 Tabbar
    • 顶部标签栏 TopTabbar
    • 折叠面板 Collapse
    • 课程表 Schedule
  • 布局组件

    • 分割线 Divider
    • 链接 Line
    • 可移动视图 MovableView

yt-top-tabbar 顶部标签栏组件

属性

属性名类型默认值说明
liststring[][]标签列表
modelValuenumber0当前激活索引 (v-model)
zIndexnumber500层级
fixedbooleantrue是否固定定位

事件

事件名参数说明
update:modelValueactiveIndex: numberv-model 更新
change(e: Event, activeIndex: number)标签切换

示例

基本顶部标签栏

<yt-top-tabbar :list="['推荐', '热门', '最新']" />

绑定值

<yt-top-tabbar v-model="currentTab" :list="tabList" />

非固定定位

<yt-top-tabbar :fixed="false" :list="['分类1', '分类2']" />

层级控制

<yt-top-tabbar :zIndex="1000" :list="['标签1', '标签2']" />

事件处理

<yt-top-tabbar
  v-model="currentTab"
  :list="['全部', '进行中', '已完成']"
  @change="handleTabChange"
/>

完整示例

<yt-top-tabbar
  v-model="activeTab"
  :list="['首页', '发现', '消息', '我的']"
  :fixed="true"
  :zIndex="999"
  @change="handleTabSwitch"
/>
最近更新:: 2026/1/2 20:18
Contributors: CHEEMS
Prev
标签栏 Tabbar
Next
折叠面板 Collapse