sun-parakeet

 v0.0.12

Tabs 标签页

通常会配合 TabPanel 使用。

示例

基础用法

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

徽标

<Tabs
  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: '新消息' },
  ]}
/>

仅图标

<Tabs
  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' },
  ]}
/>

仅标题

<Tabs
  class="bg-purple-100"
  bind:value={selectedTab}
  tabs={[
    { value: 'todoList', label: '待办', badge: true },
    { value: 'customer', label: '客户' },
    { value: 'share', label: '分享' },
    { value: 'report', label: '报表' },
  ]}
/>

禁用

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

超长滚动

<script lang="ts">
  let selectedTab = $state('todoList')

  let tabs = [
    'Espresso',
    'Coffee Latte',
    'Americano',
    'Flat White',
    'Caramel Macchiato',
    'Cafe Mocha',
  ]
</script>

<Tabs class="bg-gray-50" {tabs} />

Tabs

属性

属性 说明 类型 默认值
value 当前选中的选项卡的值 unknown $bindable()
tabs 选项卡组 Array 必填

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 事件。

后退

前进

TabBar 标签栏

TabPanel 标签面板