mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-06 12:17:13 +08:00
docs(tabs): api table (#617)
* docs(tabs): 完善标签页组件的说明文档和用例 * docs(tabs): 更新标签页组件的参数说明
This commit is contained in:
songjianet
GitHub
parent
e5e503f328
commit
fa753e77c2
@ -12,6 +12,7 @@ size
|
||||
prefix
|
||||
display-directive
|
||||
addable
|
||||
line-debug
|
||||
```
|
||||
|
||||
## Props
|
||||
@ -20,44 +21,44 @@ addable
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| addable | `boolean \| { disabled?: boolean }` | `false` | Whether to show add button. Only works when type is `'card'`. |
|
||||
| default-value | `string \| number` | name prop of the first tab | |
|
||||
| closable | `boolean` | `false` | Whether to allow tab to close, Only works when type is `'card'`. |
|
||||
| justify-content | `'space-between' \| 'space-around' \| 'space-evenly'` | `undefined` | |
|
||||
| addable | `boolean \| { disabled?: boolean }` | `false` | Whether to allow add tag. Only works when the tag's `type` is `card`. |
|
||||
| closable | `boolean` | `false` | Whether to allow the tag to be closed. Only works when the tag's `type` is `card`. |
|
||||
| default-value | `string \| number` | `undefined` | Default value in uncontrolled mode. |
|
||||
| justify-content | `'space-between' \| 'space-around' \| 'space-evenly'` | `undefined` | Justify-content value of `flex` layout. |
|
||||
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of tabs. |
|
||||
| show-divider | `boolean` | `false` | Whether to show divider of tabs. Only works when type is `'line'`. |
|
||||
| show-divider | `boolean` | `false` | Whether to show divider of tabs. Only works when `type` is `line`. |
|
||||
| pane-style | `string \| object` | `undefined` | Style of the pane. |
|
||||
| tab-style | `string \| object` | `undefined` | Style of the tab. |
|
||||
| tabs-padding | `number` | `0` | Left & right padding of the group of tabs. |
|
||||
| type | `'bar' \| 'line' \| 'card'` | `'bar'` | |
|
||||
| value | `string \| number` | `undefined` | |
|
||||
| on-add | `() => void` | `undefined` | |
|
||||
| on-close | `(name: string \| number) => void` | `undefined` | |
|
||||
| on-update:value | `(value: string \| number) => void` | `undefined` | |
|
||||
| tabs-padding | `number` | `0` | Left & right `padding` of the group of tabs. |
|
||||
| type | `'bar' \| 'line' \| 'card'` | `'bar'` | Tabs type. |
|
||||
| value | `string \| number` | `undefined` | Value in controlled mode. |
|
||||
| on-add | `() => void` | `undefined` | Callback function triggered when add tag. |
|
||||
| on-close | `(name: string \| number) => void` | `undefined` | Callback function triggered when close tag. |
|
||||
| on-update:value | `(value: string \| number) => void` | `undefined` | Callback function triggered when the value changes. |
|
||||
|
||||
### Tab Pane Props
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| closable | `boolean` | `false` | Whether to allow tab to close, Only works when tabs type is `'card'`. |
|
||||
| disabled | `boolean` | `false` | |
|
||||
| display-directive | `'if' \| 'show'` | `'if'` | The directive to use in conditionally rendering. 'if' will use 'v-if' and 'show' will use 'v-show'. When use show directive, the status of tab won't be reset after tab changes. |
|
||||
| tab | `string \| VNode \| () => VNodeChild` | `undefined` | |
|
||||
| name | `string \| number` | required | |
|
||||
| closable | `boolean` | `false` | Whether to allow the tag to be closed. Only works when the tag's `type` is `card`. |
|
||||
| disabled | `boolean` | `false` | Whether to disable. |
|
||||
| display-directive | `'if' \| 'show'` | `'if'` | The directive to use in conditionally rendering. `if` will use `v-if` and `show` will use `v-show`. When use show directive, the status of tab won't be reset after tab changes. |
|
||||
| tab | `string \| VNode \| () => VNodeChild` | `undefined` | Tab label. |
|
||||
| name | `string \| number` | `undefined` | Required, the name of the tab. |
|
||||
|
||||
## Slots
|
||||
|
||||
### Tabs Slots
|
||||
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | ----------- |
|
||||
| default | `()` | |
|
||||
| prefix | `()` | |
|
||||
| suffux | `()` | |
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | ------------- |
|
||||
| default | `()` | Tabs content. |
|
||||
| prefix | `()` | Tabs prefix. |
|
||||
| suffix | `()` | Tabs suffix. |
|
||||
|
||||
### Tab Pane Slots
|
||||
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | ----------- |
|
||||
| default | `()` | |
|
||||
| tab | `()` | |
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | ------------------ |
|
||||
| default | `()` | Tab content. |
|
||||
| tab | `()` | Tab label content. |
|
||||
|
||||
31
src/tabs/demos/enUS/line-debug.demo.md
Normal file
31
src/tabs/demos/enUS/line-debug.demo.md
Normal file
@ -0,0 +1,31 @@
|
||||
# Line Debug
|
||||
|
||||
```html
|
||||
<n-button @click="name = 'the beatles'">Set Name to the Beatles</n-button>
|
||||
|
||||
<n-card title="song" style="margin-bottom: 16px;">
|
||||
<n-tabs v-model:value="name">
|
||||
<n-tab-pane name="oasis" tab="Oasis"> Wonderwall </n-tab-pane>
|
||||
<n-tab-pane name="the beatles" tab="the Beatles"> Hey Jude </n-tab-pane>
|
||||
<n-tab-pane name="jay chou" tab="jay chou"> 七里香 </n-tab-pane>
|
||||
</n-tabs>
|
||||
</n-card>
|
||||
```
|
||||
|
||||
```js
|
||||
import { defineComponent, ref } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
return {
|
||||
name: ref('oasis')
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
```css
|
||||
.n-button {
|
||||
margin-top: 12px;
|
||||
}
|
||||
```
|
||||
@ -21,43 +21,44 @@ line-debug
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| addable | `boolean \| { disabled?: boolean }` | `false` | 是否展示增加按钮，只在 type 为 `'card'` 时生效 |
|
||||
| closable | `boolean` | `false` | 是否允许 tab 关闭，只在 type 为 `'card'` 时生效 |
|
||||
| default-value | `string \| number` | 第一个标签页的 name 属性 | |
|
||||
| justify-content | `'space-between' \| 'space-around' \| 'space-evenly'` | `undefined` | |
|
||||
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | |
|
||||
| addable | `boolean \| { disabled?: boolean }` | `false` | 是否允许添加标签，只在标签的 `type` 为 `card` 时生效 |
|
||||
| closable | `boolean` | `false` | 是否允许关闭标签，只在标签的 `type` 为 `card` 时生效 |
|
||||
| default-value | `string \| number` | `undefined` | 非受控模式下的默认值 |
|
||||
| justify-content | `'space-between' \| 'space-around' \| 'space-evenly'` | `undefined` | `flex` 布局下主轴的排列方式 |
|
||||
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | 标签页的尺寸 |
|
||||
| show-divider | `boolean` | `false` | 是否显示标签分隔符，仅在 `type` 为 `line` 时有效 |
|
||||
| pane-style | `string \| object` | `undefined` | 面板的样式 |
|
||||
| tab-style | `string \| object` | `undefined` | 标签的样式 |
|
||||
| tabs-padding | `number` | `0` | 全部标签最左和最右的 padding |
|
||||
| type | `'bar' \| 'line' \| 'card'` | `'bar'` | |
|
||||
| value | `string \| number` | `undefined` | |
|
||||
| on-add | `() => void` | `undefined` | |
|
||||
| on-close | `(name: string \| number) => void` | `undefined` | |
|
||||
| on-update:value | `(value: string \| number) => void` | `undefined` | |
|
||||
| tabs-padding | `number` | `0` | 全部标签最左和最右的 `padding` |
|
||||
| type | `'bar' \| 'line' \| 'card'` | `'bar'` | 标签类型 |
|
||||
| value | `string \| number` | `undefined` | 受控模式下的值 |
|
||||
| on-add | `() => void` | `undefined` | 添加标签的回调函数 |
|
||||
| on-close | `(name: string \| number) => void` | `undefined` | 关闭标签的回调函数 |
|
||||
| on-update:value | `(value: string \| number) => void` | `undefined` | 选中发生改变时的回调函数 |
|
||||
|
||||
### Tab Pane Props
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| closable | `boolean` | `false` | 是否允许 tab 关闭，只在 tabs type 为 `'card'` 时生效 |
|
||||
| disabled | `boolean` | `false` | |
|
||||
| display-directive | `'if' \| 'show'` | `'if'` | 选择性渲染使用的指令。if 对应 v-if，show 对应 v-show，使用 show 的时候标签页状态切换后不会被重置 |
|
||||
| tab | `string \| VNode \| () => VNodeChild` | `undefined` | |
|
||||
| name | `string \| number` | required | |
|
||||
| closable | `boolean` | `false` | 是否允许关闭标签，只在标签的 `type` 为 `card` 时生效 |
|
||||
| disabled | `boolean` | `false` | 是否禁用 |
|
||||
| display-directive | `'if' \| 'show'` | `'if'` | 选择性渲染使用的指令，`if` 对应 `v-if`，`show` 对应 `v-show`，使用 `show` 的时候标签页状态切换后不会被重置 |
|
||||
| tab | `string \| VNode \| () => VNodeChild` | `undefined` | 标签的 `tab` |
|
||||
| name | `string \| number` | `undefined` | 必填，标签的名称 |
|
||||
|
||||
## Slots
|
||||
|
||||
### Tabs
|
||||
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------- | ---- | ---- |
|
||||
| default | `()` | |
|
||||
| prefix | `()` | |
|
||||
| suffux | `()` | |
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------- | ---- | ---------- |
|
||||
| default | `()` | 标签的内容 |
|
||||
| prefix | `()` | 标签的前缀 |
|
||||
| suffix | `()` | 标签的后缀 |
|
||||
|
||||
### Tab Pane Slots
|
||||
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------- | ---- | ---- |
|
||||
| default | `()` | |
|
||||
| tab | `()` | |
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------- | ---- | ------------------- |
|
||||
| default | `()` | 标签项的内容 |
|
||||
| tab | `()` | 标签项 `tab` 的内容 |
|
||||
|
||||
@ -1,25 +1,27 @@
|
||||
# Line Debug
|
||||
# 调试
|
||||
|
||||
```html
|
||||
<n-button @click="name = 'the beatles'">Set Name to the Beatles</n-button>
|
||||
<n-button @click="name = 'the beatles'">将名称设置为披头士乐队</n-button>
|
||||
|
||||
<n-card title="歌曲" style="margin-bottom: 16px;">
|
||||
<n-tabs v-model:value="name">
|
||||
<n-tab-pane name="oasis" tab="Oasis"> Wonderwall </n-tab-pane>
|
||||
<n-tab-pane name="the beatles" tab="the Beatles"> Hey Jude </n-tab-pane>
|
||||
<n-tab-pane name="oasis" tab="绿洲乐队"> Wonderwall </n-tab-pane>
|
||||
<n-tab-pane name="the beatles" tab="披头士乐队"> Hey Jude </n-tab-pane>
|
||||
<n-tab-pane name="jay chou" tab="周杰伦"> 七里香 </n-tab-pane>
|
||||
</n-tabs>
|
||||
</n-card>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
import { defineComponent, ref } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
return {
|
||||
name: 'oasis'
|
||||
name: ref('oasis')
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
Loading…
Reference in New Issue
Block a user