mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-09 04:31:35 +08:00
doc: refactor some docs
This commit is contained in:
07akioni
parent
6646cf339d
commit
875d301b8a
@ -1,35 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Basic Usage
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-popconfirm
|
||||
positive-text="ok"
|
||||
negative-text="not ok"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<n-button>Quit</n-button>
|
||||
</template>
|
||||
Are you sure to quit this game?
|
||||
</n-popconfirm>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,47 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Custom Action
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-popconfirm :controller="controller">
|
||||
<template v-slot:activator>
|
||||
<n-button>Quit</n-button>
|
||||
</template>
|
||||
Are you sure to quit this game?
|
||||
<template v-slot:action>
|
||||
<n-button
|
||||
size="tiny"
|
||||
@click="handleOopsClick"
|
||||
>
|
||||
oops!
|
||||
</n-button>
|
||||
</template>
|
||||
</n-popconfirm>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
controller: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleOopsClick () {
|
||||
this.$NMessage.info('oops!')
|
||||
if (this.controller) this.controller.hide()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,41 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Custom Icon
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-popconfirm
|
||||
positive-text="ok"
|
||||
negative-text="not ok"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<n-icon
|
||||
type="md-hand"
|
||||
color="red"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:activator>
|
||||
<n-button>Quit</n-button>
|
||||
</template>
|
||||
Are you sure to quit this game?
|
||||
</n-popconfirm>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,39 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Event
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-popconfirm
|
||||
@positive-click="handlePositiveClick"
|
||||
@negative-click="handleNegativeClick"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<n-button>Quit</n-button>
|
||||
</template>
|
||||
Are you sure to quit this game?
|
||||
</n-popconfirm>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handlePositiveClick () {
|
||||
this.$NMessage.info('positive click')
|
||||
},
|
||||
handleNegativeClick () {
|
||||
this.$NMessage.info('negative click')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,44 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
ref="doc"
|
||||
class="n-doc"
|
||||
>
|
||||
<div class="n-doc-header">
|
||||
<n-gradient-text :font-size="20">
|
||||
Popconfirm / n-popconfirm
|
||||
</n-gradient-text>
|
||||
</div>
|
||||
<div class="n-doc-body">
|
||||
<basic-usage />
|
||||
<no-icon />
|
||||
<event />
|
||||
<custom-action />
|
||||
<custom-icon />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import basicUsage from './basicUsage.demo.vue'
|
||||
import event from './event.demo.vue'
|
||||
import customAction from './customAction.demo.vue'
|
||||
import noIcon from './noIcon.demo.vue'
|
||||
import customIcon from './customIcon.demo.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
basicUsage,
|
||||
event,
|
||||
customAction,
|
||||
noIcon,
|
||||
customIcon
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
No Icon
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-popconfirm no-icon>
|
||||
<template v-slot:activator>
|
||||
<n-button>No Icon</n-button>
|
||||
</template>
|
||||
Are you sure to quit this game?
|
||||
</n-popconfirm>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
75
demo/documentation/components/steps/enUS/basic.md
Normal file
75
demo/documentation/components/steps/enUS/basic.md
Normal file
@ -0,0 +1,75 @@
|
||||
# Basic
|
||||
```html
|
||||
<n-steps
|
||||
:current="current"
|
||||
:finish-status="finishStatus"
|
||||
: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>
|
||||
<div
|
||||
style="display: flex; justify-content: center; flex-wrap: wrap; margin-top: 48px;"
|
||||
>
|
||||
<n-button
|
||||
icon="md-arrow-round-back"
|
||||
@click="prev"
|
||||
/><n-button
|
||||
icon="md-arrow-round-forward"
|
||||
@click="next"
|
||||
/>
|
||||
<n-button @click="currentStatus='error'">
|
||||
current-status: error
|
||||
</n-button>
|
||||
<n-button @click="currentStatus='process'">
|
||||
current-status: process
|
||||
</n-button>
|
||||
<n-button @click="finishStatus='error'">
|
||||
finish-status: error
|
||||
</n-button>
|
||||
<n-button @click="finishStatus='process'">
|
||||
finish-status: process
|
||||
</n-button>
|
||||
<n-button @click="finishStatus='success'">
|
||||
finish-status: success
|
||||
</n-button>
|
||||
</div>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
current: null,
|
||||
finishStatus: 'success',
|
||||
currentStatus: 'error'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
next () {
|
||||
if (this.current === null) this.current = 0
|
||||
else if (this.current >= 3) this.current = null
|
||||
else this.current++
|
||||
},
|
||||
prev () {
|
||||
if (this.current === 0) this.current = null
|
||||
else if (this.current === null) this.current = 3
|
||||
else this.current--
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
5
demo/documentation/components/steps/enUS/index.md
Normal file
5
demo/documentation/components/steps/enUS/index.md
Normal file
@ -0,0 +1,5 @@
|
||||
# Step
|
||||
<!--single-column-->
|
||||
```demo
|
||||
basic
|
||||
```
|
||||
0
demo/documentation/components/steps/index.entry
Normal file
0
demo/documentation/components/steps/index.entry
Normal file
0
demo/documentation/components/steps/zhCN/index.md
Normal file
0
demo/documentation/components/steps/zhCN/index.md
Normal file
@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
ref="doc"
|
||||
class="n-doc"
|
||||
>
|
||||
<div class="n-doc-header">
|
||||
<n-gradient-text :font-size="20">
|
||||
NSteps / n-steps
|
||||
</n-gradient-text>
|
||||
</div>
|
||||
<div class="n-doc-body">
|
||||
<scaffold />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scaffold from './scaffold.demo.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
scaffold
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,92 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Basic Usage
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: wrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-steps
|
||||
:current="current"
|
||||
:finish-status="finishStatus"
|
||||
: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>
|
||||
<div
|
||||
style="display: flex; justify-content: center; flex-wrap: wrap; margin-top: 48px;"
|
||||
>
|
||||
<n-button
|
||||
icon="md-arrow-round-back"
|
||||
@click="prev"
|
||||
/><n-button
|
||||
icon="md-arrow-round-forward"
|
||||
@click="next"
|
||||
/>
|
||||
<n-button @click="currentStatus='error'">
|
||||
current-status: error
|
||||
</n-button>
|
||||
<n-button @click="currentStatus='process'">
|
||||
current-status: process
|
||||
</n-button>
|
||||
<n-button @click="finishStatus='error'">
|
||||
finish-status: error
|
||||
</n-button>
|
||||
<n-button @click="finishStatus='process'">
|
||||
finish-status: process
|
||||
</n-button>
|
||||
<n-button @click="finishStatus='success'">
|
||||
finish-status: success
|
||||
</n-button>
|
||||
</div>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
current: null,
|
||||
finishStatus: 'success',
|
||||
currentStatus: 'error'
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
},
|
||||
methods: {
|
||||
next () {
|
||||
if (this.current === null) this.current = 0
|
||||
else if (this.current >= 3) this.current = null
|
||||
else this.current++
|
||||
},
|
||||
prev () {
|
||||
if (this.current === 0) this.current = null
|
||||
else if (this.current === null) this.current = 3
|
||||
else this.current--
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -44,7 +44,7 @@ import dropdownDemo from './documentation/components/dropdownDemo'
|
||||
import scrollbarDebug from './debugComponents/scrollbarDebug'
|
||||
import scrollbarDebug2 from './debugComponents/scrollbarDebug2'
|
||||
import badge from './documentation/components/badge'
|
||||
import stepsDemo from './documentation/components/stepsDemo'
|
||||
import steps from './documentation/components/steps'
|
||||
import notification from './documentation/components/notification'
|
||||
import nimbusConfirmCardDemo from './documentation/components/nimbusConfirmCardDemo'
|
||||
import pagination from './documentation/components/pagination'
|
||||
@ -163,7 +163,7 @@ const routes = [
|
||||
{ path: '/n-modal-debug', component: modalDebug },
|
||||
{ path: '/n-scrollbar-debug', component: scrollbarDebug },
|
||||
{ path: '/n-badge', component: badge },
|
||||
{ path: '/n-steps', component: stepsDemo },
|
||||
{ path: '/n-steps', component: steps },
|
||||
{ path: '/n-collapse', component: collapse },
|
||||
{ path: '/n-progress', component: progress },
|
||||
{ path: '/n-tag', component: tag },
|
||||
|
||||
Loading…
Reference in New Issue
Block a user