sun-parakeet

 v0.0.12

SideBar 侧边栏

通常会配合 TabPanel 使用。

示例

右侧 TabPanel 组件

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

{#snippet panels()}
  <TabPanel
    class="flex flex-auto items-center justify-center bg-white"
    visible={selectedTab === 'todoList'}
  >
    <div>待办</div>
  </TabPanel>
  <TabPanel
    class="flex flex-auto items-center justify-center bg-white"
    visible={selectedTab === 'customer'}
  >
    <div>客户</div>
  </TabPanel>
  <TabPanel
    class="flex flex-auto items-center justify-center bg-white"
    visible={selectedTab === 'share'}
  >
    <div>分享</div>
  </TabPanel>
  <TabPanel
    class="flex flex-auto items-center justify-center bg-white"
    visible={selectedTab === 'report'}
  >
    <div>报表</div>
  </TabPanel>
{/snippet}

基础用法

<div class="flex items-stretch justify-stretch" style="height: 220px">
  <SideBar
    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: '报表' },
    ]}
  />
  {@render panels()}
</div>

徽标-定宽

<div class="flex items-stretch justify-stretch">
  <SideBar
    style="width: 100px;"
    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: '新消息' },
    ]}
  />
  {@render panels()}
</div>

仅图标-方角

<div class="flex items-stretch justify-stretch">
  <SideBar
    bind:value={selectedTab}
    tabs={[
      { value: 'todoList', icon: 'todo-list', badge: true },
      { value: 'customer', icon: 'customer' },
      { value: 'share', icon: 'share' },
      { value: 'report', icon: 'report' },
    ]}
    --sunp-radius="0px"
  />
  {@render panels()}
</div>

仅标题-定宽-背景

<div class="flex items-stretch justify-stretch">
  <SideBar
    class="bg-purple-100"
    style="width: 140px"
    tabs={['待办', '客户', '分享', '报表文本长度过长会导致折行']}
  />
  <div class="flex flex-auto items-center justify-center bg-white">
    左侧 tabs 为字符串数组
  </div>
</div>

禁用

<div class="flex items-stretch justify-stretch">
  <SideBar
    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: '报表' },
    ]}
  />
  {@render panels()}
</div>

SideBar

属性

属性 说明 类型 默认值
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 事件。

CSS 变量

属性 说明 默认值
--sunp-radius 外侧圆弧半径 8px

后退

前进

IndexBar 序列

TabBar 标签栏