mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-18 12:34:25 +08:00
doc(tabs): zh-cn
This commit is contained in:
07akioni
parent
52f749c482
commit
020551b738
@ -1,4 +1,5 @@
|
||||
# Card
|
||||
A example to use with card. (demo is the card)
|
||||
```html
|
||||
<n-tabs
|
||||
v-model="name"
|
||||
|
||||
@ -1,6 +1,30 @@
|
||||
# Tabs
|
||||
Switch contents in same area.
|
||||
## Demos
|
||||
```demo
|
||||
basic
|
||||
card
|
||||
flex-label
|
||||
```
|
||||
card
|
||||
```
|
||||
## V-model
|
||||
V-model is not exposed now.
|
||||
## Props
|
||||
### Tabs Props
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|type|`'line' \| 'card'`|`'line'`||
|
||||
|closable|`boolean`|`false`||
|
||||
|justify-content|`'space-between' \| 'space-around' \| 'space-evenly'`|`null`||
|
||||
|
||||
### Tab Panel Props
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|label|`string`|`null`||
|
||||
|name|`string \| number`|`null`|**required**|
|
||||
|disabled|`boolean`|`false`||
|
||||
|
||||
## Slots
|
||||
### Tabs, Tab Panel Slots
|
||||
|Name|Parameters|Description|
|
||||
|-|-|-|
|
||||
|default|`()`||
|
||||
82
demo/documentation/components/tabs/zhCN/basic.md
Normal file
82
demo/documentation/components/tabs/zhCN/basic.md
Normal file
@ -0,0 +1,82 @@
|
||||
# 基础用法
|
||||
```html
|
||||
<n-card title="歌曲" style="margin-bottom: 16px;">
|
||||
<n-tabs
|
||||
v-model="name"
|
||||
>
|
||||
<n-tab-panel
|
||||
name="oasis"
|
||||
label="Oasis"
|
||||
>
|
||||
Wonderwall
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="the beatles"
|
||||
label="the Beatles"
|
||||
>
|
||||
Hey Jude
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="jay chou"
|
||||
label="周杰伦"
|
||||
>
|
||||
七里香
|
||||
</n-tab-panel>
|
||||
</n-tabs>
|
||||
</n-card>
|
||||
<n-card>
|
||||
<n-tabs
|
||||
v-model="func"
|
||||
size="large"
|
||||
>
|
||||
<n-tab-panel
|
||||
name="signin"
|
||||
label="登陆"
|
||||
>
|
||||
<n-form>
|
||||
<n-form-item-row label="用户名">
|
||||
<n-input />
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="密码">
|
||||
<n-input />
|
||||
</n-form-item-row>
|
||||
</n-form>
|
||||
<n-button type="primary" block>登陆</n-button>
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="signup"
|
||||
label="注册"
|
||||
>
|
||||
<n-form>
|
||||
<n-form-item-row label="用户名">
|
||||
<n-input />
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="密码">
|
||||
<n-input />
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="重复密码">
|
||||
<n-input />
|
||||
</n-form-item-row>
|
||||
</n-form>
|
||||
<n-button type="primary" block>注册</n-button>
|
||||
</n-tab-panel>
|
||||
</n-tabs>
|
||||
</n-card>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
name: 'oasis',
|
||||
func: 'signin'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
.n-button {
|
||||
margin-top: 12px;
|
||||
}
|
||||
```
|
||||
48
demo/documentation/components/tabs/zhCN/card.md
Normal file
48
demo/documentation/components/tabs/zhCN/card.md
Normal file
@ -0,0 +1,48 @@
|
||||
# 和卡片一起使用
|
||||
一个和卡片一起使用的例子（例子本身是卡片）。
|
||||
```html
|
||||
<n-tabs
|
||||
v-model="name"
|
||||
type="card"
|
||||
closable
|
||||
@close="handleClose"
|
||||
@scrollable-change="handleScrollableChange"
|
||||
:nav-style="{
|
||||
borderTop: 'none',
|
||||
margin: '0 -24px',
|
||||
padding: `4px ${tabNavScrollable ? 0 : 24}px`
|
||||
}"
|
||||
>
|
||||
<n-tab-panel
|
||||
v-for="panel in panels"
|
||||
:key="panel"
|
||||
:label="panel.toString()"
|
||||
:name="panel.toString()"
|
||||
>
|
||||
{{ panel }}
|
||||
</n-tab-panel>
|
||||
</n-tabs>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
panels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
|
||||
name: '1',
|
||||
tabNavScrollable: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleScrollableChange (value) {
|
||||
this.tabNavScrollable = value
|
||||
},
|
||||
handleClose (name) {
|
||||
this.$NMessage.info('Close ' + name)
|
||||
const index = this.panels.findIndex(v => name === v.toString())
|
||||
if (~index) {
|
||||
this.panels.splice(index, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
83
demo/documentation/components/tabs/zhCN/flexLabel.md
Normal file
83
demo/documentation/components/tabs/zhCN/flexLabel.md
Normal file
@ -0,0 +1,83 @@
|
||||
# Flex 布局的标签
|
||||
```html
|
||||
<n-card title="歌曲" style="margin-bottom: 16px;">
|
||||
<n-tabs
|
||||
v-model="name"
|
||||
justify-content="space-evenly"
|
||||
>
|
||||
<n-tab-panel
|
||||
name="oasis"
|
||||
label="Oasis"
|
||||
>
|
||||
Wonderwall
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="the beatles"
|
||||
label="the Beatles"
|
||||
>
|
||||
Hey Jude
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="jay chou"
|
||||
label="周杰伦"
|
||||
>
|
||||
七里香
|
||||
</n-tab-panel>
|
||||
</n-tabs>
|
||||
</n-card>
|
||||
<n-card title="Too Simple">
|
||||
<n-tabs
|
||||
v-model="func"
|
||||
size="large"
|
||||
>
|
||||
<n-tab-panel
|
||||
name="signin"
|
||||
label="登陆"
|
||||
>
|
||||
<n-form>
|
||||
<n-form-item-row label="用户名">
|
||||
<n-input />
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="密码">
|
||||
<n-input />
|
||||
</n-form-item-row>
|
||||
</n-form>
|
||||
<n-button type="primary" block>登陆</n-button>
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="signup"
|
||||
label="注册"
|
||||
>
|
||||
<n-form>
|
||||
<n-form-item-row label="用户名">
|
||||
<n-input />
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="密码">
|
||||
<n-input />
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="重复密码">
|
||||
<n-input />
|
||||
</n-form-item-row>
|
||||
</n-form>
|
||||
<n-button type="primary" block>注册</n-button>
|
||||
</n-tab-panel>
|
||||
</n-tabs>
|
||||
</n-card>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
name: 'oasis',
|
||||
func: 'signin'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
.n-button {
|
||||
margin-top: 12px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,31 @@
|
||||
# 标签页 Tabs
|
||||
在同一块区域切换内容。
|
||||
## 演示
|
||||
```demo
|
||||
basic
|
||||
flex-label
|
||||
card
|
||||
```
|
||||
## V-model
|
||||
V-model 暂时不对外暴露，名字没起好。
|
||||
|
||||
## Props
|
||||
### Tabs Props
|
||||
|名称|类型|默认值|介绍|
|
||||
|-|-|-|-|
|
||||
|type|`'line' \| 'card'`|`'line'`||
|
||||
|closable|`boolean`|`false`||
|
||||
|justify-content|`'space-between' \| 'space-around' \| 'space-evenly'`|`null`||
|
||||
|
||||
### Tab Panel Props
|
||||
|名称|类型|默认值|介绍|
|
||||
|-|-|-|-|
|
||||
|label|`string`|`null`||
|
||||
|name|`string \| number`|`null`|**required**|
|
||||
|disabled|`boolean`|`false`||
|
||||
|
||||
## Slots
|
||||
### Tabs, Tab Panel Slots
|
||||
|名称|类型|介绍|
|
||||
|-|-|-|
|
||||
|default|`()`||
|
||||
@ -2,11 +2,13 @@
|
||||
{
|
||||
"zh-CN": {
|
||||
"dark": "深色",
|
||||
"light": "浅色"
|
||||
"light": "浅色",
|
||||
"searchPlaceholder": "搜索组件"
|
||||
},
|
||||
"en-US": {
|
||||
"dark": "Dark",
|
||||
"light": "Light"
|
||||
"light": "Light",
|
||||
"searchPlaceholder": "Search Components"
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
@ -20,7 +22,7 @@
|
||||
<div style="width: 200px; margin-left: 48px;">
|
||||
<n-auto-complete
|
||||
v-model="searchInputValue"
|
||||
placeholder="Search in Naive UI"
|
||||
:placeholder="$t('searchPlaceholder')"
|
||||
:options="searchOptions"
|
||||
clear-after-select
|
||||
blur-after-select
|
||||
|
||||
@ -16,20 +16,12 @@ export default {
|
||||
default: undefined
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
type: [String, Number],
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
closable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
@ -40,26 +32,7 @@ export default {
|
||||
type () {
|
||||
return this.NTab.type
|
||||
}
|
||||
// offset () {
|
||||
// return this.NTab.offset
|
||||
// }
|
||||
},
|
||||
watch: {
|
||||
// offset: {
|
||||
// handler (n) {
|
||||
// this.setTransfer(n)
|
||||
// this.$forceUpdate()
|
||||
// },
|
||||
// immediate: true
|
||||
// }
|
||||
},
|
||||
// created () {
|
||||
// this.NTab.updateLabels()
|
||||
// if (this._NaiveTabOrder === this.NTab.active) {
|
||||
// this.updateIsShow(true)
|
||||
// }
|
||||
// this.$on('display-none', this.setDisplayNone)
|
||||
// },
|
||||
mounted () {
|
||||
if (this.NTab) {
|
||||
console.log(this.NTab.value)
|
||||
@ -71,15 +44,5 @@ export default {
|
||||
this.NTab.removePanel(this)
|
||||
}
|
||||
}
|
||||
// methods: {
|
||||
// updateIsShow (flag) {
|
||||
// this.isShow = flag
|
||||
// this.$forceUpdate()
|
||||
// },
|
||||
// setTransfer (per) {
|
||||
// // 这里可以优化, 直接在上层div做整体移动, 不需要对子元素移动
|
||||
// this.style.transform = 'translateX(' + per + ')'
|
||||
// }
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -127,10 +127,6 @@ export default {
|
||||
},
|
||||
default: null
|
||||
},
|
||||
bodered: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'medium'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user