@fjyueke/bify-mcp 1.0.0

package/metaData/components/swiper/example/index.tsx

@@ -0,0 +1,118 @@
+import { Image, Swiper, Toast } from "@fjyueke/bify-core"
+import { useState } from "react"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+function BasicSwiper() {
+  return (
+    <Swiper className="basic-swiper" autoplay={4000}>
+      <Swiper.Indicator />
+      <Swiper.Item>1</Swiper.Item>
+      <Swiper.Item>2</Swiper.Item>
+      <Swiper.Item>3</Swiper.Item>
+      <Swiper.Item>4</Swiper.Item>
+    </Swiper>
+  )
+}
+
+function ImageSwiper() {
+  return (
+    <Swiper className="image-swiper" lazyRender autoplay={4000}>
+      <Swiper.Indicator />
+      <Swiper.Item>
+        <Image className="image" src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
+      </Swiper.Item>
+      <Swiper.Item>
+        <Image className="image" src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
+      </Swiper.Item>
+      <Swiper.Item>
+        <Image className="image" src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
+      </Swiper.Item>
+      <Swiper.Item>
+        <Image className="image" src="https://img01.yzcdn.cn/vant/apple-4.jpg" />
+      </Swiper.Item>
+    </Swiper>
+  )
+}
+
+function SwiperWithOnChange() {
+  return (
+    <>
+      <Toast id="toast" />
+      <Swiper
+        className="onchange-swiper"
+        onChange={(value) => Toast.open(`当前 Swipe 索引：${value}`)}
+      >
+        <Swiper.Indicator />
+        <Swiper.Item>1</Swiper.Item>
+        <Swiper.Item>2</Swiper.Item>
+        <Swiper.Item>3</Swiper.Item>
+        <Swiper.Item>4</Swiper.Item>
+      </Swiper>
+    </>
+  )
+}
+
+function SwiperWithCustomWidth() {
+  return (
+    <Swiper className="basic-swiper" loop={false} width={300}>
+      <Swiper.Indicator />
+      <Swiper.Item>1</Swiper.Item>
+      <Swiper.Item>2</Swiper.Item>
+      <Swiper.Item>3</Swiper.Item>
+      <Swiper.Item>4</Swiper.Item>
+    </Swiper>
+  )
+}
+
+function VerticalSwiper() {
+  return (
+    <Swiper className="vertical-swiper" direction="vertical" autoplay={4000}>
+      <Swiper.Indicator />
+      <Swiper.Item>1</Swiper.Item>
+      <Swiper.Item>2</Swiper.Item>
+      <Swiper.Item>3</Swiper.Item>
+      <Swiper.Item>4</Swiper.Item>
+    </Swiper>
+  )
+}
+
+function SwiperWithCustomIndicator() {
+  const [value, setValue] = useState(0)
+
+  return (
+    <Swiper className="basic-swiper" onChange={setValue}>
+      <Swiper.Item>1</Swiper.Item>
+      <Swiper.Item>2</Swiper.Item>
+      <Swiper.Item>3</Swiper.Item>
+      <Swiper.Item>4</Swiper.Item>
+      <Swiper.Indicator className="custom-indicator">{value + 1}/4</Swiper.Indicator>
+    </Swiper>
+  )
+}
+
+export default function SwiperDemo() {
+  return (
+    <Page title="Swiper 轮播" className="swiper-demo">
+      <Block title="基础用法">
+        <BasicSwiper />
+      </Block>
+      <Block title="懒加载">
+        <ImageSwiper />
+      </Block>
+      <Block title="监听 change 事件">
+        <SwiperWithOnChange />
+      </Block>
+      <Block title="纵向滚动">
+        <VerticalSwiper />
+      </Block>
+      <Block title="自定义滑块大小">
+        <SwiperWithCustomWidth />
+      </Block>
+      <Block title="自定义指示器">
+        <SwiperWithCustomIndicator />
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/switch/api.md

@@ -0,0 +1,17 @@
+## API
+
+### Props
+
+| 参数           | 说明                     | 类型               | 默认值    |
+| -------------- | ------------------------ | ------------------ | --------- |
+| defaultChecked | 默认开关选中状态             | _boolean_              | `false`   |
+| checked        | 开关选中状态             | _boolean_              | `false`   |
+| loading        | 是否为加载状态           | _boolean_          | `false`   |
+| disabled       | 是否为禁用状态           | _boolean_          | `false`   |
+| size           | 开关尺寸，默认单位为`px` | _number \| string_ | `30px`    |
+
+### Events
+
+| 事件名 | 说明               | 回调参数            |
+| ------ | ------------------ | ------------------- |
+| onChange | 开关状态切换时触发 | _value: boolean_        |

package/metaData/components/switch/doc.md

@@ -0,0 +1,110 @@
+# Switch 开关
+
+### 介绍
+
+用于在打开和关闭状态之间进行切换。
+
+### 引入
+
+```tsx
+import { Switch } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+通过 `checked` 绑定开关的选中状态，`true` 表示开，`false` 表示关。
+
+```tsx
+<Switch />
+```
+
+### 禁用状态
+
+通过 `disabled` 属性来禁用开关，禁用状态下开关不可点击。
+
+```tsx
+<Switch disabled />
+```
+
+### 加载状态
+
+通过 `loading` 属性设置开关为加载状态，加载状态下开关不可点击。
+
+```tsx
+<Switch loading />
+```
+
+### 自定义大小
+
+通过 `size` 属性自定义开关的大小。
+
+```tsx
+<Switch size="24" />
+```
+
+### 自定义颜色
+
+通过 `css` 设置打开与关闭时的背景色。
+
+```tsx
+<Switch className="custom-color" />
+```
+
+```scss
+.custom-color {
+  --switch-background-color: #dcdee0;
+  --switch-checked-color: #ee0a24;
+}
+```
+
+### 搭配单元格使用
+
+```tsx
+<Cell align="center" title="标题" rightIcon={<Switch size="24" />} />
+```
+
+## API
+
+### Props
+
+| 参数           | 说明                     | 类型               | 默认值    |
+| -------------- | ------------------------ | ------------------ | --------- |
+| defaultChecked | 默认开关选中状态             | _boolean_              | `false`   |
+| checked        | 开关选中状态             | _boolean_              | `false`   |
+| loading        | 是否为加载状态           | _boolean_          | `false`   |
+| disabled       | 是否为禁用状态           | _boolean_          | `false`   |
+| size           | 开关尺寸，默认单位为`px` | _number \| string_ | `30px`    |
+
+### Events
+
+| 事件名 | 说明               | 回调参数            |
+| ------ | ------------------ | ------------------- |
+| onChange | 开关状态切换时触发 | _value: boolean_        |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                              | 默认值                                                                                                                                              | 描述  |
+|---------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------|-----|
+| switch-size                     | _30px * $hd_                                                                                                                                     | -   |
+| switch-font-size                | _var(--switch-size)_                                                                                                                             | -   |
+| switch-width                    | _2em_                                                                                                                                            | -   |
+| switch-height                   | _1em_                                                                                                                                            | -   |
+| switch-border                   | _var(--border-width-base) solid rgba(0, 0, 0, 0.1)_                                                                                              | -   |
+| switch-background-color         | _var(--white)_                                                                                                                                   | -   |
+| switch-transition-duration      | _var(--animation-duration-base)_                                                                                                                 | -   |
+| switch-node-size                | _1em_                                                                                                                                            | -   |
+| switch-node-width               | _var(--switch-node-size)_                                                                                                                        | -   |
+| switch-node-height              | _var(--switch-node-size)_                                                                                                                        | -   |
+| switch-node-translate-x         | _translateX(calc(var(--switch-width) - var(--switch-node-size)))_                                                                                | -   |
+| switch-node-background-color    | _var(--white)_                                                                                                                                   | -   |
+| switch-node-box-shadow          | _0 3px * $hd 1px * $hd 0 rgba(0, 0, 0, 0.05), <br/>0 2px * $hd 2px * $hd 0 rgba(0, 0, 0, 0.1),<br/> 0 3px * $hd 3px * $hd 0 rgba(0, 0, 0, 0.05)_ | -   |
+| switch-checked-color            | _var(var(--primary-color)_                                                                                                                       | -   |
+| switch-checked-background-color | _var(--switch-checked-color)_                                                                                                                    | -   |
+| switch-loading-color            | _var(--switch-checked-color)_                                                                                                                    | -   |
+| switch-disabled-opacity         | _var(--disabled-opacity)_                                                                                                                        | -   |

package/metaData/components/switch/example/index.tsx

@@ -0,0 +1,57 @@
+import { Cell, Switch } from "@fjyueke/bify-core"
+import { useState } from "react"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+interface SwitchListProps {
+  checked?: boolean
+
+  onChange?(checked: boolean): void
+}
+
+function BasicSwitch({ checked, onChange }: SwitchListProps) {
+  return <Switch checked={checked} onChange={onChange} />
+}
+
+function DisabledSwitch({ checked }: SwitchListProps) {
+  return <Switch checked={checked} disabled />
+}
+
+function LoadingSwitch({ checked }: SwitchListProps) {
+  return <Switch checked={checked} loading />
+}
+
+function SwitchList() {
+  const [checked, setChecked] = useState(false)
+  return (
+    <>
+      <Block title="基础用法">
+        <BasicSwitch checked={checked} onChange={setChecked} />
+      </Block>
+      <Block title="禁用状态">
+        <DisabledSwitch checked={checked} />
+      </Block>
+      <Block title="加载状态">
+        <LoadingSwitch checked={checked} />
+      </Block>
+    </>
+  )
+}
+
+export default function SwitchDemo() {
+  return (
+    <Page title="Switch 开关" className="switch-demo">
+      <SwitchList />
+      <Block title="自定义大小">
+        <Switch size="24" />
+      </Block>
+      <Block title="自定义颜色">
+        <Switch className="custom-color" defaultChecked />
+      </Block>
+      <Block title="搭配单元格使用" className="switch-with-cell">
+        <Cell align="center" title="标题" rightIcon={<Switch size="24" />} />
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/tabbar/api.md

@@ -0,0 +1,27 @@
+## API
+
+### Tabbar Props
+
+| 参数           | 说明                        | 类型        | 默认值     |
+|--------------|---------------------------|-----------|---------|
+| defaultValue | 默认选中标签的标识或索引值             | _any_     | `0`     |
+| value        | 当前选中标签的标识或索引值             | _any_     | `0`     |
+| bordered     | 是否显示外边框                   | _boolean_ | `false` |
+| fixed        | 是否固定在底部                   | _boolean_ | `false` |
+| safeArea     | 安全区域，可选值 `top` `bottom`，仅在`fixed=true`时有效   | _string_  | -       |
+| placeholder  | 固定在底部时，是否在标签位置生成一个等高的占位元素 | _boolean_ | `false` |
+
+### Tabbar Events
+
+| 事件名 | 说明           | 回调参数                   |
+| ------ | -------------- | -------------------------- |
+| onChange | 切换标签时触发 | _value: any_ |
+
+### Tabbar.TabItem Props
+
+| 参数       | 说明                                             | 类型          | 默认值      |
+|----------|------------------------------------------------|-------------|----------|
+| value    | 标签值，作为匹配的标识符                                   | _any_       | -        |
+| icon     | [图标](/components/icon)或[图片](/components/image) | _ReactNode_ | -        |
+| badge | 图标上徽标的内容 | _boolean \| number \| string \| Badge \| ReactNode_ | - |
+| children | 标签名                                            | _ReactNode_ | -        |

package/metaData/components/tabbar/doc.md

@@ -0,0 +1,160 @@
+# Tabbar 标签栏
+
+### 介绍
+
+底部导航栏，用于在不同页面之间进行切换。
+
+### 引入
+
+```ts
+import { Tabbar } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+```tsx
+import { Tabbar } from "@fjyueke/bify-core"
+import { FriendsOutlined, HomeOutlined, Search, SettingOutlined } from "@fjyueke/bify-icons"
+
+function BasicTabbar() {
+  return (
+    <Tabbar>
+      <Tabbar.TabItem icon={<HomeOutlined />}>标签</Tabbar.TabItem>
+      <Tabbar.TabItem icon={<Search />}>标签</Tabbar.TabItem>
+      <Tabbar.TabItem icon={<FriendsOutlined />}>标签</Tabbar.TabItem>
+      <Tabbar.TabItem icon={<SettingOutlined />}>标签</Tabbar.TabItem>
+    </Tabbar>
+  )
+}
+
+```
+
+### 通过标识匹配
+
+在标签 `Tabbar.TabItem` 指定 `value` 属性的情况下，`value` 的值为当前标签的 `value`。
+
+```tsx
+import { Tabbar } from "@fjyueke/bify-core"
+import { FriendsOutlined, HomeOutlined, Search, SettingOutlined } from "@fjyueke/bify-icons"
+
+function KeyTabbar() {
+  return (
+    <Tabbar defaultValue="1">
+      <Tabbar.TabItem value="1" icon={<HomeOutlined />}>
+        标签
+      </Tabbar.TabItem>
+      <Tabbar.TabItem value="2" icon={<Search />}>
+        标签
+      </Tabbar.TabItem>
+      <Tabbar.TabItem value="3" icon={<FriendsOutlined />}>
+        标签
+      </Tabbar.TabItem>
+      <Tabbar.TabItem value="4" icon={<SettingOutlined />}>
+        标签
+      </Tabbar.TabItem>
+    </Tabbar>
+  )
+}
+```
+
+### 徽标提示
+
+设置 `badge` 属性为 `true` 后，会在图标右上角展示一个小红点；设置 `badge` 属性为 `number` 后，会在图标右上角展示相应的徽标。
+
+```tsx
+import { Badge, Tabbar } from "@fjyueke/bify-core"
+import { FriendsOutlined, HomeOutlined, Search, SettingOutlined } from "@fjyueke/bify-icons"
+
+function BadgeTabbar() {
+  return (
+    <Tabbar>
+      <Tabbar.TabItem icon={<HomeOutlined />}>标签</Tabbar.TabItem>
+      <Tabbar.TabItem badge icon={<Search />}>
+        标签
+      </Tabbar.TabItem>
+      <Tabbar.TabItem badge="5" icon={<FriendsOutlined />}>
+        标签
+      </Tabbar.TabItem>
+      <Tabbar.TabItem badge={<Badge content={100} max={99} />} icon={<SettingOutlined />}>
+        标签
+      </Tabbar.TabItem>
+    </Tabbar>
+  )
+}
+```
+
+### 自定义颜色
+
+通过 css 设置设置选中或未选择标签的颜色。
+
+```tsx
+import { Tabbar } from "@fjyueke/bify-core"
+import { FriendsOutlined, HomeOutlined, Search, SettingOutlined } from "@fjyueke/bify-icons"
+
+function TabbarWithCustomColor() {
+  return (
+    <Tabbar className="custom-color">
+      <Tabbar.TabItem icon={<HomeOutlined />}>标签</Tabbar.TabItem>
+      <Tabbar.TabItem icon={<Search />}>标签</Tabbar.TabItem>
+      <Tabbar.TabItem icon={<FriendsOutlined />}>标签</Tabbar.TabItem>
+      <Tabbar.TabItem icon={<SettingOutlined />}>标签</Tabbar.TabItem>
+    </Tabbar>
+  )
+}
+```
+
+```scss
+.custom-color {
+  --tabbar-item-color: #000;
+  --tabbar-item-active-color: #ee0a24;
+}
+```
+
+## API
+
+### Tabbar Props
+
+| 参数           | 说明                        | 类型        | 默认值     |
+|--------------|---------------------------|-----------|---------|
+| defaultValue | 默认选中标签的标识或索引值             | _any_     | `0`     |
+| value        | 当前选中标签的标识或索引值             | _any_     | `0`     |
+| bordered     | 是否显示外边框                   | _boolean_ | `false` |
+| fixed        | 是否固定在底部                   | _boolean_ | `false` |
+| safeArea     | 安全区域，可选值 `top` `bottom`，仅在`fixed=true`时有效   | _string_  | -       |
+| placeholder  | 固定在底部时，是否在标签位置生成一个等高的占位元素 | _boolean_ | `false` |
+
+### Tabbar Events
+
+| 事件名 | 说明           | 回调参数                   |
+| ------ | -------------- | -------------------------- |
+| onChange | 切换标签时触发 | _value: any_ |
+
+### Tabbar.TabItem Props
+
+| 参数       | 说明                                             | 类型          | 默认值      |
+|----------|------------------------------------------------|-------------|----------|
+| value    | 标签值，作为匹配的标识符                                   | _any_       | -        |
+| icon     | [图标](/components/icon)或[图片](/components/image) | _ReactNode_ | -        |
+| badge | 图标上徽标的内容 | _boolean \| number \| string \| Badge \| ReactNode_ | - |
+| children | 标签名                                            | _ReactNode_ | -        |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                                    | 默认值                   | 描述  |
+|---------------------------------------|-----------------------|-----|
+| --tabbar-height                       | _50px * $hd_          | -   |
+| --tabbar-z-index                      | _1_                   | -   |
+| --tabbar-background-color             | _var(--white)_        | -   |
+| --tabbar-item-font-size               | _var(--font-size-sm)_ | -   |
+| --tabbar-item-color                   | _var(--gray-7)_       | -   |
+| --tabbar-item-line-height             | _1_                   | -   |
+| --tabbar-item-icon-size               | _22px * $hd_          | -   |
+| --tabbar-item-margin-bottom           | _4px * $hd_           | -   |
+| --tabbar-item-active-color            | _var(--blue)_         | -   |
+| --tabbar-item-active-background-color | _var(--white)_        | -   |

package/metaData/components/tabbar/example/index.tsx

@@ -0,0 +1,99 @@
+import { Badge, Tabbar, Toast } from "@fjyueke/bify-core"
+import { FriendsOutlined, HomeOutlined, Search, SettingOutlined } from "@fjyueke/bify-icons"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+function BasicTabbar() {
+  return (
+    <Tabbar>
+      <Tabbar.TabItem icon={<HomeOutlined />}>标签</Tabbar.TabItem>
+      <Tabbar.TabItem icon={<Search />}>标签</Tabbar.TabItem>
+      <Tabbar.TabItem icon={<FriendsOutlined />}>标签</Tabbar.TabItem>
+      <Tabbar.TabItem icon={<SettingOutlined />}>标签</Tabbar.TabItem>
+    </Tabbar>
+  )
+}
+
+function KeyTabbar() {
+  return (
+    <Tabbar defaultValue="1">
+      <Tabbar.TabItem value="1" icon={<HomeOutlined />}>
+        标签
+      </Tabbar.TabItem>
+      <Tabbar.TabItem value="2" icon={<Search />}>
+        标签
+      </Tabbar.TabItem>
+      <Tabbar.TabItem value="3" icon={<FriendsOutlined />}>
+        标签
+      </Tabbar.TabItem>
+      <Tabbar.TabItem value="4" icon={<SettingOutlined />}>
+        标签
+      </Tabbar.TabItem>
+    </Tabbar>
+  )
+}
+
+function BadgeTabbar() {
+  return (
+    <Tabbar>
+      <Tabbar.TabItem icon={<HomeOutlined />}>标签</Tabbar.TabItem>
+      <Tabbar.TabItem badge icon={<Search />}>
+        标签
+      </Tabbar.TabItem>
+      <Tabbar.TabItem badge="5" icon={<FriendsOutlined />}>
+        标签
+      </Tabbar.TabItem>
+      <Tabbar.TabItem badge={<Badge content={100} max={99} />} icon={<SettingOutlined />}>
+        标签
+      </Tabbar.TabItem>
+    </Tabbar>
+  )
+}
+
+function TabbarWithCustomColor() {
+  return (
+    <Tabbar className="custom-color">
+      <Tabbar.TabItem icon={<HomeOutlined />}>标签</Tabbar.TabItem>
+      <Tabbar.TabItem icon={<Search />}>标签</Tabbar.TabItem>
+      <Tabbar.TabItem icon={<FriendsOutlined />}>标签</Tabbar.TabItem>
+      <Tabbar.TabItem icon={<SettingOutlined />}>标签</Tabbar.TabItem>
+    </Tabbar>
+  )
+}
+
+function EventTabbar() {
+  return (
+    <>
+      <Toast id="toast" />
+      <Tabbar onChange={(value) => Toast.open(`标签 ${Number(value) + 1}`)}>
+        <Tabbar.TabItem icon={<HomeOutlined />}>标签</Tabbar.TabItem>
+        <Tabbar.TabItem icon={<Search />}>标签</Tabbar.TabItem>
+        <Tabbar.TabItem icon={<FriendsOutlined />}>标签</Tabbar.TabItem>
+        <Tabbar.TabItem icon={<SettingOutlined />}>标签</Tabbar.TabItem>
+      </Tabbar>
+    </>
+  )
+}
+
+export default function TabbarDemo() {
+  return (
+    <Page title="Tabbar 标签栏" className="tabbar-demo">
+      <Block title="基础用法">
+        <BasicTabbar />
+      </Block>
+      <Block title="通过 value 匹配">
+        <KeyTabbar />
+      </Block>
+      <Block title="徽标提示">
+        <BadgeTabbar />
+      </Block>
+      <Block title="自定义颜色">
+        <TabbarWithCustomColor />
+      </Block>
+      <Block title="监听切换事件">
+        <EventTabbar />
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/tabs/api.md

@@ -0,0 +1,36 @@
+## API
+
+### Tabs Props
+
+| 参数                                | 说明                                                           | 类型                                                | 默认值  |
+| ----------------------------------- | -------------------------------------------------------------- | --------------------------------------------------- | ------- |
+| defaultValue                        | 绑定默认选中标签的标识符                                       | _number \| string_                                  | `0`     |
+| value                               | 绑定当前选中标签的标识符                                       | _number \| string_                                  | `0`     |
+| theme                               | 样式风格类型，可选值为 `card`                                  | _string_                                            | `line`  |
+| duration                            | 动画时间，单位毫秒                                             | _number \| string_                                  | `300`   |
+| animated                            | 是否开启切换标签内容时的转场动画                               | _boolean_                                           | `false` |
+| bordered                            | 是否显示标签栏外边框，仅在 `type="line"` 时有效                | _boolean_                                           | `false` |
+| ellipsis                            | 是否省略过长的标题文字                                         | _boolean_                                           | `true`  |
+| sticky                              | 是否使用粘性定位布局                                           | _boolean \| { offsetTop }_                          | `false` |
+| shrink                              | 是否使用收缩布局                                               | _booleans_                                            | `false` |
+| swipeable                           | 是否开启手势左右滑动切换                                       | _boolean_                                           | `false` |
+| swipeThreshold <br>`v0.1.0-alpha.8` | 滚动阈值，标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动 | _number_                                            | `5`     |
+| lazyRender                          | 是否延迟渲染未展示的选项卡                                     | _boolean_                                           | `false` |
+| dot <br>`v0.1.1-alpha.11`           | 是否展示为小红点                                               | _boolean_                                           | `false` |
+| badge <br>`v0.1.1-alpha.11`         | 图标上徽标的内容                                               | _boolean \| number \| string \| Badge \| ReactNode_ | -       |
+
+### Tabs.Pane Props
+
+| 参数     | 说明                 | 类型               | 默认值       |
+| -------- | -------------------- | ------------------ | ------------ |
+| value    | 标签值，作为匹配的值 | _number \| string_ | 标签的索引值 |
+| title    | 标题                 | _ReactNode_        | -            |
+| disabled | 是否禁用标签         | _boolean_          | `false`      |
+| children | 标签面板内容         | _ReactNode_        | -            |
+
+### Tabs Events
+
+| 事件名     | 说明                     | 回调参数                            |
+| ---------- | ------------------------ | ----------------------------------- |
+| onTabClick | 点击标签时触发           | _event : Tabs.TabEvent_             |
+| onChange   | 当前激活的标签改变时触发 | _value: any, event : Tabs.TabEvent_ |