docs_vue2/one/docs/components/tabs.md
2020-10-26 16:13:55 +08:00

138 lines
3.6 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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