# lime-tabs 选项卡
- 标签页选项卡组件，用于在不同的内容区域之间进行切换。兼容uniapp/uniappx
- 插件依赖`lime-shared`,`lime-badge`,`lime-style`不喜勿下
## 安装
在插件市场导入即可，首次导入可能需要重新编译
## 文档
[tabs](https://limex.qcoon.cn/components/tabs.html)
## 代码演示
### 基础使用
通过 `v-model` 绑定当前激活标签对应的索引值，默认情况下启用第一个标签。通过`list`设置选项卡列表
```html
```
```js
const value = ref(0)
const list = [
{
value: 1,
label: '选项',
},
{
value: 2,
label: '选项',
},
{
value: 3,
label: '选项',
},
{
value: 4,
label: '选项',
}
]
```
### 子组件
除了使用`list`设置列表，还可以通过`l-tab-panel`子组件设置标签
```html
```
### 标签栏滚动
通过设置`space-evenly`取消等距，当数量宽度超过父级时可滚动。
```html
```
### 徽标
通过设置`dot`为`true`可显示小红点，通过设置`badge`设置徽标内容，通过设置`offset`设置徽标偏移量。
```html
```
### 切换动画
通过 `animated` 属性可以开启切换标签内容时的转场动画。
```html
选项卡内容1
选项卡内容2
选项卡内容3
选项卡内容4
```
### 滑动切换
通过 `swipeable` 属性可以开启滑动切换标签页。
```html
选项卡内容1
选项卡内容2
选项卡内容3
选项卡内容4
```
### 受控
通过 `onClick` 属性可以在切换标签前执行特定的逻辑。
```html
选项卡内容1
选项卡内容2
选项卡内容3
选项卡内容4
```
```js
const value = ref(1);
const onClick = (index: number) => {
uni.showLoading({title:'校验中'})
setTimeout(()=>{
uni.hideLoading()
value.value = index
},1000)
}
```
### 查看示例
- 导入后直接使用这个标签查看演示效果
```html
// 代码位于 uni_modules/lime-tabs/compoents/lime-tabs
```
### 插件标签
- 默认 l-tabs 为 component
- 默认 l-tab-panel 为 component
- 默认 lime-tabs 为 demo
### 关于vue2的使用方式
- 插件使用了`composition-api`, 如果你希望在vue2中使用请按官方的教程[vue-composition-api](https://uniapp.dcloud.net.cn/tutorial/vue-composition-api.html)配置
- 关键代码是: 在main.js中 在vue2部分加上这一段即可.
```js
// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
```
## API
### Tabs Props
| 参数 | 说明 | 类型 | 默认值 |
| ------ | ---------------------- | --------- | ------- |
| v-model | 绑定当前选中标签的标识符 | _number_ | `0` |
| value | 当前选中标签的标识符 | _number_ | `0` |
| list | 选项卡列表 | _TabPanelProps[]_ | `[]` |
| animated | 是否开启切换标签内容时的转场动画 | _boolean_ | `false` |
| duration | 动画时间，单位秒，设置为 0 可以禁用动画 | _number_ | `0.3` |
| spaceEvenly | 选项卡头部空间是否均分 | _boolean_ | `true` |
| swipeable | 是否开启手势左右滑动切换 | _boolean_ | `false` |
| split | 是否展示分割线 | _boolean_ | `true` |
| color | 标签文本颜色 | _string_ | `-` |
| activeColor | 标签激活文本颜色 | _string_ | `-` |
| lineColor | 底部条颜色 | _string_ | `-` |
| lineWidth | 底部条宽度 | _string_ | `-` |
| lineHeight | 底部条高度 | _string_ | `-` |
| bgColor | 选项卡背景色 | _string_ | `-` |
| size | 组件尺寸，内置'medium', 'large'，如果传具体的值就是设置高度 | _string_ | `-` |
| padding | 标题 padding | _string_ | `-` |
| swiperProgress | 与swiper联动，传入[-1, 1] 范围的滚动进度 uniappx有效 | _number_ | `-` |
| syncSwiper | 是否启用与swiper的同步联动, uniappx有效 | _boolean_ | `false` |
### Tabs Slots 插槽
| 插槽名称 | 作用域参数 | 说明 |
|----------------|--------------------------------------------|---------------------------------------------------------------------|
| **label** | `{ item: TabPanel, active: boolean, disabled: boolean }` | 自定义标签内容（会覆盖默认的标签渲染逻辑） |
| **left** | - | 导航栏左侧扩展区域（支持固定位置内容，如返回按钮） |
| **right** | - | 导航栏右侧扩展区域（支持固定位置内容，如更多按钮） |
| **default** | - | 内容区域（需配合 `` 子组件使用或`list`属性） |
### TabPanel Props
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| value | 选项卡的值，唯一标识 | _number_ | - |
| label | 选项卡名称 | _string_ | - |
| disabled | 是否禁用选项 | _boolean_ | `false` |
| dot | 是否显示标签右上角小红点 | _boolean_ | `false` |
| badge | 标签右上角徽标的内容 | _string \| number_ | `_` |
| offset | 徽标偏移 | _string \| number[]_ | `[]` |
### GridItem Events
| 事件名 | 说明 | 回调参数 |
| ------ | ---------------- | ------------------- |
| click | 点击标签时触发 | _index: number_ |
| change | 当前激活的标签改变时触发 | _index: number_ |
## 主题定制
### 样式变量
组件提供了下列 CSS 变量，可用于自定义样式)。uvue app无效。
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| --l-tab-font-size: | _28rpx_ | - |
| --l-tab-nav-bg-color: | _white_ | - |
| --l-tab-item-height: | _96rpx_ | - |
| --l-tab-item-padding: | _0 32rpx_ | - |
| --l-tab-item-color: | _$text-color-1_ | - |
| --l-tab-item-active-color: | _$primary-color_ | - |
| --l-tab-item-disabled-color: | _$text-color-disabled_ | - |
| --l-tab-track-color: | _$primary-color_ | - |
| --l-tab-track-height: | _6rpx_ | - |
| --l-tab-track-width: | _32rpx_ | - |
| --l-tab-track-radius: | _8rpx_ | - |
## 打赏
如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。
