Skip to content

Commit

Permalink
refactor(tabs): fix doc
Browse files Browse the repository at this point in the history
  • Loading branch information
@07akioni
07akioni committed May 21, 2023
1 parent cc4425c commit 8bc5f55
Show file tree
Hide file tree
Showing 7 changed files with 205 additions and 320 deletions.
6 changes: 3 additions & 3 deletions src/tabs/demos/enUS/index.demo-entry.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,15 @@ no-pane.vue
update-bar-manually.vue
bar-width.vue
trigger.vue
position-debug.vue
placement.vue
```

## API

### Tabs Props

| Name | Type | Default | Description | Version |
| --- | --- | --- | --- | --- | --- | --- | --- |
| --- | --- | --- | --- | --- |
| addable | `boolean \| { disabled?: boolean }` | `false` | Whether to allow add tag. Only works when the tag's `type` is `card`. | |
| animated | `boolean` | `false` | Whether to activate tab switching animation. It won't have effect if `placement` is `'left'` or `'right'`. | 2.27.0 |
| bar-width | `number` | `undefined` | The width of the tab bar. | 2.25.0 |
Expand All @@ -42,7 +42,7 @@ position-debug.vue
| pane-style | `string \| object` | `undefined` | Style of the pane. | |
| pane-wrapper-class | `string` | `undefined` | Class of the pane warpper. | NEXT_VERSION |
| pane-wrapper-style | `string \| object` | `undefined` | Style of the pane warpper. | NEXT_VERSION |
| placement | `'left' | 'right' | 'top' | 'bottom'` | `'top'` | Placement of tabs. | NEXT_VERSION |
| placement | `'left' \| 'right' \| 'top' \| 'bottom'` | `'top'` | Placement of tabs. It won't work with `n-tabs` whose `type` is `'segment'`. | NEXT_VERSION |
| tab-style | `string \| object` | `undefined` | Style of the tab. | |
| tabs-padding | `number` | `0` | Left & right `padding` of the group of tabs. | |
| trigger | `'click' \| 'hover'` | `'click'` | Trigger of activating a tab | 2.27.0 |
Expand Down
93 changes: 93 additions & 0 deletions src/tabs/demos/enUS/placement.demo.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<markdown>
# Tabs placement
</markdown>

<template>
<n-space vertical>
<n-radio-group v-model:value="placement">
<n-radio label="top" value="top" />
<n-radio label="bottom" value="bottom" />
<n-radio label="left" value="left" />
<n-radio label="right" value="right" />
</n-radio-group>
<n-radio-group v-model:value="type">
<n-radio label="card" value="card" />
<n-radio label="bar" value="bar" />
<n-radio label="line" value="line" />
</n-radio-group>
<n-tabs
:key="type + placement"
:type="type"
animated
:placement="placement"
:style="
placement === 'left' || placement === 'right'
? { height: '240px' }
: undefined
"
>
<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">
Qilixiang
</n-tab-pane>
<n-tab-pane name="oasis1" tab="Oasis1">
Wonderwall
</n-tab-pane>
<n-tab-pane name="the beatles1" tab="the Beatles1">
Hey Jude
</n-tab-pane>
<n-tab-pane name="jay chou1" tab="Jay Chou1">
Qilixiang
</n-tab-pane>
<n-tab-pane name="oasis2" tab="Oasis2">
Wonderwall
</n-tab-pane>
<n-tab-pane name="the beatles2" tab="the Beatles2">
Hey Jude
</n-tab-pane>
<n-tab-pane name="jay chou2" tab="Jay Chou2">
Qilixiang
</n-tab-pane>
<n-tab-pane name="oasis3" tab="Oasis3">
Wonderwall
</n-tab-pane>
<n-tab-pane name="the beatles3" tab="the Beatles3">
Hey Jude
</n-tab-pane>
<n-tab-pane name="jay chou3" tab="Jay Chou3">
Qilixiang
</n-tab-pane>
<n-tab-pane name="oasis4" tab="Oasis4">
Wonderwall
</n-tab-pane>
<n-tab-pane name="the beatles4" tab="the Beatles4">
Hey Jude
</n-tab-pane>
<n-tab-pane name="jay chou4" tab="Jay Chou4">
Qilixiang
</n-tab-pane>
<n-tab-pane name="oasis5" tab="Oasis5">
Wonderwall
</n-tab-pane>
<n-tab-pane name="the beatles5" tab="the Beatles5">
Hey Jude
</n-tab-pane>
<n-tab-pane name="jay chou5" tab="Jay Chou5">
Qilixiang
</n-tab-pane>
</n-tabs>
</n-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { TabsProps } from 'naive-ui'
const placement = ref<NonNullable<TabsProps['placement']>>('left')
const type = ref<TabsProps['type']>('card')
</script>
85 changes: 0 additions & 85 deletions src/tabs/demos/enUS/position-debug.demo.vue
View file

This file was deleted.

6 changes: 3 additions & 3 deletions src/tabs/demos/zhCN/index.demo-entry.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,22 +22,22 @@ no-pane.vue
update-bar-manually.vue
bar-width.vue
trigger.vue
placement.vue
line-debug.vue
style-inherit-debug.vue
shadow-debug.vue
unkeyed-debug.vue
addable-debug.vue
animation-debug.vue
animationx-debug.vue
position-debug.vue
```

## API

### Tabs Props

| 名称 | 类型 | 默认值 | 说明 | 版本 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| --- | --- | --- | --- | --- |
| addable | `boolean \| { disabled?: boolean }` | `false` | 是否允许添加标签，只在标签的 `type` 为 `card` 时生效 | |
| animated | `boolean` | `false` | 标签页切换是否使用动画，当 `placement` 为 `'left'` 或 `'right'` 时不生效 | 2.27.0 |
| bar-width | `number` | `undefined` | 标签条的宽度 | 2.25.0 |
Expand All @@ -49,7 +49,7 @@ position-debug.vue
| pane-style | `string \| object` | `undefined` | 面板的样式 | |
| pane-wrapper-class | `string` | `undefined` | 面板容器的类名 | NEXT_VERSION |
| pane-wrapper-style | `string \| object` | `undefined` | 面板容器的样式 | NEXT_VERSION |
| placement | `'left' | 'right' | 'top' | 'bottom'` | `'top'` | 标签的位置 | NEXT_VERSION |
| placement | `'left' \| 'right' \| 'top' \| 'bottom'` | `'top'` | 标签的位置，对于 `'segment'` 类型的 `n-tabs` 不生效 | NEXT_VERSION |
| tab-style | `string \| object` | `undefined` | 标签的样式 | |
| tabs-padding | `number` | `0` | 全部标签最左和最右的 `padding` | |
| trigger | `'click' \| 'hover'` | `'click'` | 触发 tab 的方式 | 2.27.0 |
Expand Down
93 changes: 93 additions & 0 deletions src/tabs/demos/zhCN/placement.demo.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<markdown>
# 标签页的位置
</markdown>

<template>
<n-space vertical>
<n-radio-group v-model:value="placement">
<n-radio label="top" value="top" />
<n-radio label="bottom" value="bottom" />
<n-radio label="left" value="left" />
<n-radio label="right" value="right" />
</n-radio-group>
<n-radio-group v-model:value="type">
<n-radio label="card" value="card" />
<n-radio label="bar" value="bar" />
<n-radio label="line" value="line" />
</n-radio-group>
<n-tabs
:key="type + placement"
:type="type"
animated
:placement="placement"
:style="
placement === 'left' || placement === 'right'
? { height: '240px' }
: undefined
"
>
<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">
Qilixiang
</n-tab-pane>
<n-tab-pane name="oasis1" tab="Oasis1">
Wonderwall
</n-tab-pane>
<n-tab-pane name="the beatles1" tab="the Beatles1">
Hey Jude
</n-tab-pane>
<n-tab-pane name="jay chou1" tab="Jay Chou1">
Qilixiang
</n-tab-pane>
<n-tab-pane name="oasis2" tab="Oasis2">
Wonderwall
</n-tab-pane>
<n-tab-pane name="the beatles2" tab="the Beatles2">
Hey Jude
</n-tab-pane>
<n-tab-pane name="jay chou2" tab="Jay Chou2">
Qilixiang
</n-tab-pane>
<n-tab-pane name="oasis3" tab="Oasis3">
Wonderwall
</n-tab-pane>
<n-tab-pane name="the beatles3" tab="the Beatles3">
Hey Jude
</n-tab-pane>
<n-tab-pane name="jay chou3" tab="Jay Chou3">
Qilixiang
</n-tab-pane>
<n-tab-pane name="oasis4" tab="Oasis4">
Wonderwall
</n-tab-pane>
<n-tab-pane name="the beatles4" tab="the Beatles4">
Hey Jude
</n-tab-pane>
<n-tab-pane name="jay chou4" tab="Jay Chou4">
Qilixiang
</n-tab-pane>
<n-tab-pane name="oasis5" tab="Oasis5">
Wonderwall
</n-tab-pane>
<n-tab-pane name="the beatles5" tab="the Beatles5">
Hey Jude
</n-tab-pane>
<n-tab-pane name="jay chou5" tab="Jay Chou5">
Qilixiang
</n-tab-pane>
</n-tabs>
</n-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { TabsProps } from 'naive-ui'
const placement = ref<NonNullable<TabsProps['placement']>>('left')
const type = ref<TabsProps['type']>('card')
</script>
Loading

0 comments on commit 8bc5f55

Please sign in to comment.