144 lines
4.3 KiB
Markdown
144 lines
4.3 KiB
Markdown
# Tabs <small>标签页</small>
|
||
|
||
:::tip
|
||
`Tabs` 组件需要配合 [`Tab`](./tab) 组件使用。
|
||
:::
|
||
|
||
## 示例
|
||
|
||
### 尺寸
|
||
|
||
可选的 [`ui`](#props-ui) 尺寸属性值：`s` / `m` / `l`。
|
||
|
||
[[ demo src="/demo/tabs/size.vue" ]]
|
||
|
||
### 样式
|
||
|
||
设置 `ui` 为 `simple` / `strong` 来分别启用简单样式、加强样式。
|
||
|
||
[[ demo src="/demo/tabs/style.vue" ]]
|
||
|
||
### 路由模式
|
||
|
||
设置 [`Tab`](./tab) 组件 [`to`](./tab#props-to) 属性来使用路由模式。
|
||
|
||
[[ demo src="/demo/tabs/route.vue" ]]
|
||
|
||
### 禁用状态
|
||
|
||
设置 [`Tab`](./tab) 组件 [`disabled`](./tab#props-disabled) 属性来使选项卡处于禁用状态。
|
||
|
||
[[ demo src="/demo/tabs/disabled.vue" ]]
|
||
|
||
## API
|
||
|
||
### 属性
|
||
|
||
| 名称 | 类型 | 默认值 | 描述 |
|
||
| -- | -- | -- | -- |
|
||
| ``ui`` | `string=` | - | [^ui] |
|
||
| ``active`` | `string` | - | [^active] |
|
||
| ``matches`` | `function(Route, Route): boolean` | `tabs.matches` | [^matches] |
|
||
| ``addable`` | `boolean` | `false` | 是否可以增加标签。 |
|
||
| ``max`` | `number` | - | 可增加标签的上限值。 |
|
||
| ``tip`` | `string` | - | 提示文本。 |
|
||
| ``add-label`` | `string=` | - | “添加”按钮的文字内容。 |
|
||
| ``eager`` | `boolean` | `false` | 是否立即渲染所有非当前激活项的标签面板内容（并隐藏）。 |
|
||
|
||
^^^ui
|
||
预设样式。
|
||
|
||
+++枚举值
|
||
| 值 | 描述 |
|
||
| -- | -- |
|
||
| `s` | 小尺寸样式。 |
|
||
| `m` | 中尺寸样式。 |
|
||
| `l` | 大尺寸样式。 |
|
||
| `simple` | 简单样式。 |
|
||
| `strong` | 加强样式。 |
|
||
+++
|
||
^^^
|
||
|
||
^^^active
|
||
:::badges
|
||
`.sync`
|
||
:::
|
||
|
||
表示当前哪个标签页处于激活状态。具体映射的值受[标签](./tab)的属性影响，优先级 `to` > `name`。
|
||
^^^
|
||
|
||
^^^matches
|
||
用于给内部的 [`Tab`](./tab) 组件设置统一的路由匹配逻辑。具体参见 [`Tab`](./tab) 组件的 [`to`](./tab#props-to) 属性。
|
||
|
||
:::warning
|
||
当内部的 `Tab` 组件设置了 [`matches`](./tab#props-matches) 属性，将会覆盖在 `Tabs` 组件上的 [`matches`](#props-matches) 属性。
|
||
:::
|
||
^^^
|
||
|
||
### 插槽
|
||
|
||
| 名称 | 描述 |
|
||
| -- | -- |
|
||
| ``default`` | 允许直接内联 `Tab` 组件。无默认内容。 |
|
||
| ``panel`` | 选项卡下方面板区域。 |
|
||
| ``extra`` | 位于标签页右侧的扩展区域。 |
|
||
| ``tab-item`` | [^tab-item] |
|
||
| ``tab-label`` | 标签选项卡文本区域，默认内容为选项卡文本。作用域参数同 [`tab-item`](#slots-tab-item) 插槽，`attrs` / `activate` 除外。 |
|
||
|
||
^^^tab-item
|
||
标签选项卡区域，默认内容为选项卡对应的按钮/链接。作用域参数为标签属性描述对象。
|
||
|
||
+++参数详情
|
||
| 名称 | 类型 | 描述 |
|
||
| -- | -- | -- |
|
||
| `label` | `string` | 选项卡文本。 |
|
||
| `name` | `string` | 选项卡名称。 |
|
||
| `disabled` | `boolean=` | 选项卡是否禁用。 |
|
||
| `to` | `string` | 选项卡路由信息。 |
|
||
| `active` | `boolean` | 选项卡是否是激活项。 |
|
||
| `index` | `number` | 选项卡位于列表中的索引值。 |
|
||
| `native` | `boolean` | 路由模式是否强制使用原生的 `<a>` 元素。 |
|
||
| `removable` | `boolean` | 是否可删除。 |
|
||
| `status` | `string` | 选项卡状态。 |
|
||
| `attrs` | `Object<string, string>` | 其它需要输出到选项卡元素上的 HTML 属性，例如 `role` / `aria-selected` / `aria-controls` 等。 |
|
||
| `activate` | `function(): void` | 激活当前选项卡的方法。 |
|
||
+++
|
||
^^^
|
||
|
||
### 事件
|
||
|
||
| 名称 | 描述 |
|
||
| -- | -- |
|
||
| ``change`` | 切换时触发。回调参数为 `(tab: Object)`，`tab` 与 [`tab-label`](#slots-tab-label) 插槽中的作用域参数一致。 |
|
||
| ``add`` | 点击添加按钮触发的事件，无回调参数。 |
|
||
| ``remove`` | 删除标签时触发的事件。回调参数为 `(tab: Object)`，`tab` 与 [`tab-label`](#slots-tab-label) 插槽中的作用域参数一致。 |
|
||
|
||
### 全局配置
|
||
|
||
| 名称 | 类型 | 默认值 | 描述 |
|
||
| -- | -- | -- | -- |
|
||
| ``tabs.matches`` | `function` | 见描述。 | [^config-matches] |
|
||
|
||
^^^config-matches
|
||
函数签名与 [`Tab`](./tab) 组件的 [`to`](./tab#props-to) 属性相同。默认值为：
|
||
|
||
```js
|
||
function (current, to) {
|
||
return current.fullPath === to.fullPath
|
||
}
|
||
```
|
||
^^^
|
||
|
||
### 图标
|
||
|
||
| 名称 | 描述 |
|
||
| -- | -- |
|
||
| ``add`` | 添加按钮。 |
|
||
| ``remove`` | 清除按钮。 |
|
||
| ``prev`` | 往左翻页按钮。 |
|
||
| ``next`` | 往右翻页按钮。 |
|
||
| ``success`` | 成功状态。 |
|
||
| ``warning`` | 警示状态。 |
|
||
| ``info`` | 普通信息状态。 |
|
||
| ``error`` | 错误状态。 |
|