mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-30 12:52:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

doc(input-number): refactor

Browse Source
This commit is contained in:
07akioni 2019-10-22 14:27:25 +08:00
parent 941b3be3e5
commit 0b272bb53d
15 changed files with 125 additions and 263 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
demo/documentation/components/dropdownDemo/basicUsage.demo.vue
View File

@ -1,44 +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-dropdown>
<template v-slot:activator>
<div>menu</div>
</template>
<n-dropdown-item
v-for="item in items"
:key="item"
@click="handleClick(item)"
>
{{ item }}
</n-dropdown-item>
</n-dropdown>
<!--EXAMPLE_END-->
</div>
<n-doc-source-block>
<!--SOURCE-->
</n-doc-source-block>
</div>
</template>
<script>
export default {
data () {
return {
items: ['item1longlonglong', 'item2longlonglong', 'item3longlonglong', 'item4longlonglong']
}
},
methods: {
handleClick (item) {
this.$NMessage.info(item)
}
}
}
</script>

73
demo/documentation/components/dropdownDemo/cascade.demo.vue
View File

@ -1,73 +0,0 @@
<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Cascade
</div>
<div
class="n-doc-section__view"
style="flex-wrap: nowrap;"
>
<!--EXAMPLE_START-->
<n-dropdown
placement="bottom-start"
trigger="hover"
>
<template v-slot:activator>
<div>menu</div>
</template>
<n-dropdown-item>
item1
</n-dropdown-item>
<n-dropdown-item>
item2
</n-dropdown-item>
<n-dropdown-item>
item3
</n-dropdown-item>
<n-dropdown-submenu>
<template v-slot:activator>
<n-dropdown-item
arrow
>
submenu
</n-dropdown-item>
</template>
<n-dropdown-item>
item4
</n-dropdown-item>
<n-dropdown-item>
item5
</n-dropdown-item>
<n-dropdown-submenu>
<template v-slot:activator>
<n-dropdown-item
arrow
>
submenu2
</n-dropdown-item>
</template>
<n-dropdown-item>
item6
</n-dropdown-item>
<n-dropdown-item>
item7
</n-dropdown-item>
</n-dropdown-submenu>
</n-dropdown-submenu>
</n-dropdown>
<!--EXAMPLE_END-->
</div>
<n-doc-source-block>
<!--SOURCE-->
</n-doc-source-block>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>

41
demo/documentation/components/dropdownDemo/index.vue
View File

@ -1,41 +0,0 @@
<template>
<div
ref="doc"
class="n-doc"
>
<div class="n-doc-header">
<n-gradient-text :font-size="20">
Dropdown / n-dropdown
</n-gradient-text>
</div>
<div class="n-doc-body">
<basic-usage />
<trigger />
<placement />
<cascade />
</div>
</div>
</template>
<script>
import basicUsage from './basicUsage.demo'
import cascade from './cascade.demo.vue'
import placement from './placement.demo.vue'
import trigger from './trigger.demo.vue'
export default {
components: {
cascade,
basicUsage,
placement,
trigger
},
data () {
return {
}
},
methods: {
}
}
</script>

44
demo/documentation/components/dropdownDemo/placement.demo.vue
View File

@ -1,44 +0,0 @@
<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Placement
</div>
<div
class="n-doc-section__view"
style="flex-wrap: nowrap;"
>
<!--EXAMPLE_START-->
<n-dropdown placement="bottom-start">
<template v-slot:activator>
<div>menu</div>
</template>
<n-dropdown-item
v-for="item in items"
:key="item"
@click="handleClick(item)"
>
{{ item }}
</n-dropdown-item>
</n-dropdown>
<!--EXAMPLE_END-->
</div>
<n-doc-source-block>
<!--SOURCE-->
</n-doc-source-block>
</div>
</template>
<script>
export default {
data () {
return {
items: ['item1longlonglong', 'item2longlonglong', 'item3longlonglong', 'item4longlonglong']
}
},
methods: {
handleClick (item) {
this.$NMessage.info(item)
}
}
}
</script>

59
demo/documentation/components/dropdownDemo/trigger.demo.vue
View File

@ -1,59 +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-dropdown
trigger="hover"
style="margin-right: 16px;"
>
<template v-slot:activator>
<div>Trigger: hover</div>
</template>
<n-dropdown-item
v-for="item in items"
:key="item"
@click="handleClick(item)"
>
{{ item }}
</n-dropdown-item>
</n-dropdown>
<n-dropdown trigger="click">
<template v-slot:activator>
<div>Trigger: click</div>
</template>
<n-dropdown-item
v-for="item in items"
:key="item"
@click="handleClick(item)"
>
{{ item }}
</n-dropdown-item>
</n-dropdown>
<!--EXAMPLE_END-->
</div>
<n-doc-source-block>
<!--SOURCE-->
</n-doc-source-block>
</div>
</template>
<script>
export default {
data () {
return {
items: ['item1longlonglong', 'item2longlonglong', 'item3longlonglong', 'item4longlonglong']
}
},
methods: {
handleClick (item) {
this.$NMessage.info(item)
}
}
}
</script>

15
demo/documentation/components/inputNumber/enUS/basic.md Normal file
View File

@ -0,0 +1,15 @@
# Basic
```html
<n-input-number
v-model="value"
/>
```
```js
export default {
data () {
return {
value: 0
}
}
}
```

16
demo/documentation/components/inputNumber/enUS/disabled.md Normal file
View File

@ -0,0 +1,16 @@
# Disabled
```html
<n-input-number
disabled
v-model="value"
/>
```
```js
export default {
data () {
return {
value: 0
}
}
}
```

21
demo/documentation/components/inputNumber/enUS/event.md Normal file
View File

@ -0,0 +1,21 @@
# Event
```html
<n-input-number
v-model="value"
@change="handleChange"
/>
```
```js
export default {
data () {
return {
value: 0
}
},
methods: {
handleChange (newValue) {
this.$NMessage.info(`value: ${newValue}`)
}
}
}
```

9
demo/documentation/components/inputNumber/enUS/index.md Normal file
View File

@ -0,0 +1,9 @@
# Input Number
```demo
basic
disabled
event
min-max
size
step
```

22
demo/documentation/components/inputNumber/enUS/minMax.md Normal file
View File

@ -0,0 +1,22 @@
# Min and Max
```html
<n-input-number
v-model="value"
:min="-3"
:max="5"
/>
<n-input-number
v-model="value"
:min="-5"
:max="3"
/>
```
```js
export default {
data () {
return {
value: 0
}
}
}
```

24
demo/documentation/components/inputNumber/enUS/size.md Normal file
View File

@ -0,0 +1,24 @@
# Size
```html
<n-input-number
v-model="value"
size="small"
/>
<n-input-number
v-model="value"
size="medium"
/>
<n-input-number
v-model="value"
size="large"
/>
```
```js
export default {
data () {
return {
value: 0
}
}
}
```

16
demo/documentation/components/inputNumber/enUS/step.md Normal file
View File

@ -0,0 +1,16 @@
# Step
```html
<n-input-number
v-model="value"
:step="2"
/>
```
```js
export default {
data () {
return {
value: 0
}
}
}
```

0
demo/documentation/components/inputNumber/index.entry Normal file
View File

0
demo/documentation/components/inputNumber/zhCN/index.md Normal file
View File

4
demo/init.js
View File

@ -32,7 +32,7 @@ import tooltip from './documentation/components/tooltip'
import popover from './documentation/components/popover'
import alert from './documentation/components/alert'
import datePicker from './documentation/components/datePicker'
import inputNumberDemo from './documentation/components/inputNumberDemo'
import inputNumber from './documentation/components/inputNumber'
import nimbusIconDemo from './documentation/components/nimbusIconDemo'
import radio from './documentation/components/radio'
import formDemo from './documentation/components/formDemo'
@ -152,7 +152,7 @@ const routes = [
{ path: '/n-pagination', component: pagination },
{ path: '/n-alert', component: alert },
{ path: '/n-date-picker', component: datePicker },
{ path: '/n-input-number', component: inputNumberDemo },
{ path: '/n-input-number', component: inputNumber },
{ path: '/n-nimbus-icon', component: nimbusIconDemo },
{ path: '/n-radio', component: radio },
{ path: '/n-form', component: formDemo },