mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-09 04:31:35 +08:00
doc(pagination)
This commit is contained in:
07akioni
parent
3a4a4ffd65
commit
7a2556069c
90
demo/documentation/components/steps/zhCN/basic.md
Normal file
90
demo/documentation/components/steps/zhCN/basic.md
Normal file
@ -0,0 +1,90 @@
|
||||
# 基础用法
|
||||
```html
|
||||
<n-steps
|
||||
:current="current"
|
||||
:status="currentStatus"
|
||||
>
|
||||
<n-step
|
||||
title="I Me Mine"
|
||||
description="All through the day, I me mine I me mine, I me mine"
|
||||
/>
|
||||
<n-step
|
||||
title="Let It Be"
|
||||
description="When I find myself in times of trouble Mother Mary comes to me"
|
||||
/>
|
||||
<n-step
|
||||
title="Come Together"
|
||||
description="Here come old flat top He come grooving up slowly"
|
||||
/>
|
||||
<n-step
|
||||
title="Something"
|
||||
description="Something in the way she moves Attracts me like no other lover"
|
||||
/>
|
||||
</n-steps>
|
||||
<n-button-group>
|
||||
<n-button
|
||||
@click="prev"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-arrow-round-back />
|
||||
</template>
|
||||
</n-button>
|
||||
<n-button
|
||||
@click="next"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-arrow-round-forward />
|
||||
</template>
|
||||
</n-button>
|
||||
</n-button-group>
|
||||
<n-radio-group v-model="currentStatus" size="medium">
|
||||
<n-radio-button value="error">
|
||||
Error
|
||||
</n-radio-button>
|
||||
<n-radio-button value="process">
|
||||
Process
|
||||
</n-radio-button>
|
||||
<n-radio-button value="wait">
|
||||
Wait
|
||||
</n-radio-button>
|
||||
<n-radio-button value="finish">
|
||||
Finish
|
||||
</n-radio-button>
|
||||
</n-radio-group>
|
||||
```
|
||||
|
||||
```js
|
||||
import mdArrowRoundBack from 'naive-ui/lib/icons/md-arrow-round-back'
|
||||
import mdArrowRoundForward from 'naive-ui/lib/icons/md-arrow-round-forward'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
mdArrowRoundBack,
|
||||
mdArrowRoundForward
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
current: 1,
|
||||
currentStatus: 'error'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
next () {
|
||||
if (this.current === null) this.current = 1
|
||||
else if (this.current >= 4) this.current = null
|
||||
else this.current++
|
||||
},
|
||||
prev () {
|
||||
if (this.current === 0) this.current = null
|
||||
else if (this.current === null) this.current = 4
|
||||
else this.current--
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
.n-button-group {
|
||||
margin: 8px 16px 8px 0;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,32 @@
|
||||
# 步骤 Steps
|
||||
<!--single-column-->
|
||||
1、2、3...成了！
|
||||
## 演示
|
||||
```demo
|
||||
basic
|
||||
size
|
||||
vertical
|
||||
```
|
||||
|
||||
## Props
|
||||
### Steps Props
|
||||
|名称|类型|默认值|介绍|
|
||||
|-|-|-|-|
|
||||
|current|`number`|`null`||
|
||||
|status|`'process' \| 'finish' \| 'error' \| 'wait'`|`'process'`||
|
||||
|size|`'small' \| 'medium'`|`'medium'`||
|
||||
|vertical|`boolean`|`false`||
|
||||
|
||||
### Step Props
|
||||
|名称|类型|默认值|介绍|
|
||||
|-|-|-|-|
|
||||
|title|`string`|`null`||
|
||||
|description|`string`|`null`||
|
||||
|content|`string`|`null`||
|
||||
|status|`'process' \| 'finish' \| 'error' \| 'wait'`|`'process'`||
|
||||
|
||||
## Slots
|
||||
### Steps Slots
|
||||
|名称|参数|介绍|
|
||||
|-|-|-|
|
||||
|default|`()`||
|
||||
92
demo/documentation/components/steps/zhCN/size.md
Normal file
92
demo/documentation/components/steps/zhCN/size.md
Normal file
@ -0,0 +1,92 @@
|
||||
# 尺寸
|
||||
有 `small` 和 `medium` 大小。
|
||||
```html
|
||||
<n-steps
|
||||
size="small"
|
||||
:current="current"
|
||||
:status="currentStatus"
|
||||
>
|
||||
<n-step
|
||||
title="I Me Mine"
|
||||
description="All through the day, I me mine I me mine, I me mine"
|
||||
/>
|
||||
<n-step
|
||||
title="Let It Be"
|
||||
description="When I find myself in times of trouble Mother Mary comes to me"
|
||||
/>
|
||||
<n-step
|
||||
title="Come Together"
|
||||
description="Here come old flat top He come grooving up slowly"
|
||||
/>
|
||||
<n-step
|
||||
title="Something"
|
||||
description="Something in the way she moves Attracts me like no other lover"
|
||||
/>
|
||||
</n-steps>
|
||||
<n-button-group>
|
||||
<n-button
|
||||
@click="prev"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-arrow-round-back />
|
||||
</template>
|
||||
</n-button>
|
||||
<n-button
|
||||
@click="next"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-arrow-round-forward />
|
||||
</template>
|
||||
</n-button>
|
||||
</n-button-group>
|
||||
<n-radio-group v-model="currentStatus" size="medium">
|
||||
<n-radio-button value="error">
|
||||
Error
|
||||
</n-radio-button>
|
||||
<n-radio-button value="process">
|
||||
Process
|
||||
</n-radio-button>
|
||||
<n-radio-button value="wait">
|
||||
Wait
|
||||
</n-radio-button>
|
||||
<n-radio-button value="finish">
|
||||
Finish
|
||||
</n-radio-button>
|
||||
</n-radio-group>
|
||||
```
|
||||
|
||||
```js
|
||||
import mdArrowRoundBack from 'naive-ui/lib/icons/md-arrow-round-back'
|
||||
import mdArrowRoundForward from 'naive-ui/lib/icons/md-arrow-round-forward'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
mdArrowRoundBack,
|
||||
mdArrowRoundForward
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
current: 1,
|
||||
currentStatus: 'error'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
next () {
|
||||
if (this.current === null) this.current = 1
|
||||
else if (this.current >= 4) this.current = null
|
||||
else this.current++
|
||||
},
|
||||
prev () {
|
||||
if (this.current === 0) this.current = null
|
||||
else if (this.current === null) this.current = 4
|
||||
else this.current--
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
.n-button-group {
|
||||
margin: 8px 16px 8px 0;
|
||||
}
|
||||
```
|
||||
91
demo/documentation/components/steps/zhCN/vertical.md
Normal file
91
demo/documentation/components/steps/zhCN/vertical.md
Normal file
@ -0,0 +1,91 @@
|
||||
# 垂直
|
||||
```html
|
||||
<n-steps
|
||||
vertical
|
||||
:current="current"
|
||||
:status="currentStatus"
|
||||
>
|
||||
<n-step
|
||||
title="I Me Mine"
|
||||
description="All through the day, I me mine I me mine, I me mine"
|
||||
/>
|
||||
<n-step
|
||||
title="Let It Be"
|
||||
description="When I find myself in times of trouble Mother Mary comes to me"
|
||||
/>
|
||||
<n-step
|
||||
title="Come Together"
|
||||
description="Here come old flat top He come grooving up slowly"
|
||||
/>
|
||||
<n-step
|
||||
title="Something"
|
||||
description="Something in the way she moves Attracts me like no other lover"
|
||||
/>
|
||||
</n-steps>
|
||||
<n-button-group>
|
||||
<n-button
|
||||
@click="prev"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-arrow-round-back />
|
||||
</template>
|
||||
</n-button>
|
||||
<n-button
|
||||
@click="next"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-arrow-round-forward />
|
||||
</template>
|
||||
</n-button>
|
||||
</n-button-group>
|
||||
<n-radio-group v-model="currentStatus" size="medium">
|
||||
<n-radio-button value="error">
|
||||
Error
|
||||
</n-radio-button>
|
||||
<n-radio-button value="process">
|
||||
Process
|
||||
</n-radio-button>
|
||||
<n-radio-button value="wait">
|
||||
Wait
|
||||
</n-radio-button>
|
||||
<n-radio-button value="finish">
|
||||
Finish
|
||||
</n-radio-button>
|
||||
</n-radio-group>
|
||||
```
|
||||
|
||||
```js
|
||||
import mdArrowRoundBack from 'naive-ui/lib/icons/md-arrow-round-back'
|
||||
import mdArrowRoundForward from 'naive-ui/lib/icons/md-arrow-round-forward'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
mdArrowRoundBack,
|
||||
mdArrowRoundForward
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
current: 1,
|
||||
currentStatus: 'error'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
next () {
|
||||
if (this.current === null) this.current = 1
|
||||
else if (this.current >= 4) this.current = null
|
||||
else this.current++
|
||||
},
|
||||
prev () {
|
||||
if (this.current === 0) this.current = null
|
||||
else if (this.current === null) this.current = 4
|
||||
else this.current--
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
.n-button-group {
|
||||
margin: 8px 16px 8px 0;
|
||||
}
|
||||
```
|
||||
@ -96,9 +96,6 @@
|
||||
@include once {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
&::after {
|
||||
border-color: rgba(255, 255, 255, 0.20);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user