mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-03-01 13:36:55 +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 {
|
@include once {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
&::after {
|
|
||||||
border-color: rgba(255, 255, 255, 0.20);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user