sun-parakeet

 v0.0.12

TabBar 标签栏

通常会配合 TabPanel 使用。

示例

基础用法

<TabBar
  class="bg-gray-50"
  bind:value={selectedTab}
  tabs={[
    { value: 'todoList', icon: 'todo-list', label: '待办' },
    { value: 'customer', icon: 'customer', label: '客户' },
    { value: 'share', icon: 'share', label: '分享' },
    { value: 'report', icon: 'report', label: '报表' },
  ]}
/>

徽标

<TabBar
  class="bg-gray-50"
  bind:value={selectedTab}
  tabs={[
    { value: 'todoList', icon: 'todo-list', label: '待办', badge: true },
    { value: 'customer', icon: 'customer', label: '客户', badge: 5 },
    { value: 'share', icon: 'share', label: '分享', badge: 100 },
    { value: 'report', icon: 'report', label: '报表', badge: '新消息' },
  ]}
/>

仅图标

<TabBar
  class="bg-gray-50"
  bind:value={selectedTab}
  tabs={[
    { value: 'todoList', icon: 'todo-list', badge: true },
    { value: 'customer', icon: 'customer' },
    { value: 'share', icon: 'share' },
    { value: 'report', icon: 'report' },
  ]}
/>

仅标题-背景

<TabBar class="bg-purple-100" tabs={['待办', '客户', '分享', '报表']} />

禁用

<TabBar
  class="bg-gray-50"
  bind:value={selectedTab}
  tabs={[
    { value: 'todoList', icon: 'todo-list', label: '待办' },
    { value: 'customer', icon: 'customer', label: '客户' },
    { value: 'share', icon: 'share', label: '分享' },
    { value: 'report', icon: 'report', label: '报表', badge: '新消息', disabled: true },
  ]}
/>

底部

<TabBar
  class="bg-gray-50"
  bind:value={selectedTab}
  fixed
  tabs={[
    { value: 'todoList', icon: 'todo-list', label: '待办', badge: true },
    { value: 'customer', icon: 'customer', label: '客户' },
    { value: 'share', icon: 'share', label: '分享' },
    { value: 'report', icon: 'report', label: '报表' },
  ]}
/>

TabBar

属性

属性 说明 类型 默认值
value 当前选中的选项卡的值 unknown $bindable()
tabs 选项卡组 Array 必填
fixed 固定在底部 boolean false

TabOption

属性 说明 类型 默认值
value 值 unknown 必填
icon 图标 string | IconOption undefined
label 文字 string | Snippet<[TabOption]> undefined
badge 徽标内容。
boolean 显示小红点，number 显示数字, string 显示字符串		 boolean | number | string undefined
class 指定选项卡 CSS 类 string undefined
style 指定选项卡 CSS 样式 string undefined
classSelected 指定选项卡被选中时的 CSS 类 string undefined
styleSelected 指定选项卡被选中时的 CSS 样式 string undefined
disabled 是否禁用 boolean false

事件

事件 说明 类型
onChange 选项卡切换事件 (value: unknown) => void

注意：仅当由用户点击组件导致 value 改变时，才会触发 onChange 事件。由组件外部改变 value 并应用至组件时，不会触发 onChange 事件。

后退

前进

SideBar 侧边栏

Tabs 标签页