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

doc: transfer & tree refactor

Browse Source
This commit is contained in:
07akioni 2019-10-25 12:59:50 +08:00
parent 3c7f797736
commit 2629e57917
15 changed files with 128 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
demo/documentation/components/transfer/enUS/basic.md Normal file
View File

@ -0,0 +1,51 @@
# Basic
```html
<n-transfer
ref="transfer"
v-model="value"
:options="options"
/>
<n-button @click="regenOptions">
Regen Options
</n-button>
<n-button @click="regenValues">
Regen Values
</n-button>
<pre class="n-doc-section__inspect">{{ JSON.stringify(value) }}</pre>
<pre class="n-doc-section__inspect">{{ $refs.transfer ? $refs.transfer._data : null }}</pre>
```
```js
let prefix = null
function genOptions () {
prefix = Math.random().toString(36).slice(2, 5)
return Array.apply(null, { length: 20 }).map((v, i) => ({
label: prefix + 'Option' + i,
value: prefix + i,
disabled: i % 3 === 0
}))
}
function genValues () {
return Array.apply(null, { length: 5 }).map((v, i) => prefix + i)
}
export default {
data () {
return {
options: genOptions(),
value: genValues()
}
},
mounted () {
},
methods: {
regenOptions () {
this.options = genOptions()
},
regenValues () {
this.value = genValues()
}
}
}
```

4
demo/documentation/components/transfer/enUS/index.md Normal file
View File

@ -0,0 +1,4 @@
# Transfer
```demo
basic
```

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

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

32
demo/documentation/components/transferDemo/index.vue
View File

@ -1,32 +0,0 @@
<template>
<div
ref="doc"
class="n-doc"
>
<div class="n-doc-header">
<n-gradient-text :font-size="20">
Transfer / n-transfer
</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>

68
demo/documentation/components/transferDemo/scaffold.demo.vue
View File

@ -1,68 +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-transfer
ref="transfer"
v-model="value"
:options="options"
/>
<!--EXAMPLE_END-->
</div>
<div class="n-doc-section__inspect">
<n-button @click="regenOptions">
Regen Options
</n-button>
<n-button @click="regenValues">
Regen Values
</n-button>
</div>
<pre class="n-doc-section__inspect">{{ JSON.stringify(value) }}</pre>
<pre class="n-doc-section__inspect">{{ $refs.transfer ? $refs.transfer._data : null }}</pre>
<pre>
<!--SOURCE-->
</pre>
</div>
</template>
<script>
let prefix = null
function genOptions () {
prefix = Math.random().toString(36).slice(2, 5)
return Array.apply(null, { length: 20 }).map((v, i) => ({
label: prefix + 'Option' + i,
value: prefix + i,
disabled: i % 3 === 0
}))
}
function genValues () {
return Array.apply(null, { length: 5 }).map((v, i) => prefix + i)
}
export default {
data () {
return {
options: genOptions(),
value: genValues()
}
},
mounted () {
},
methods: {
regenOptions () {
this.options = genOptions()
},
regenValues () {
this.value = genValues()
}
}
}
</script>

32
demo/documentation/components/tree/enUS/basic.md Normal file
View File

@ -0,0 +1,32 @@
# Basic
```html
<n-tree
:data="data"
checkable
/>
```
```js
let key = 0
function genData (layer = 4, depth = 0, prefix = '') {
if (layer === depth) return
const data = []
const count = 4
for (let i = 0; i < count; ++i) {
data.push({
label: `${prefix}_${i}`,
key: key++,
children: genData(layer, depth + 1, `${prefix}_${i}`)
})
}
return data
}
export default {
data () {
return {
data: genData()
}
}
}
```

32
demo/documentation/components/tree/enUS/blockNode.md Normal file
View File

@ -0,0 +1,32 @@
# Block Node
```html
<n-tree
:data="data"
block-node
/>
```
```js
let key = 0
function genData (layer = 2, depth = 0, prefix = '') {
if (layer === depth) return
const data = []
const count = 2
for (let i = 0; i < count; ++i) {
data.push({
label: `${prefix}_${i}`,
key: key++,
children: genData(layer, depth + 1, `${prefix}_${i}`)
})
}
return data
}
export default {
data () {
return {
data: genData()
}
}
}
```

5
demo/documentation/components/tree/enUS/index.md Normal file
View File

@ -0,0 +1,5 @@
# Tree
```demo
basic
block-node
```

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

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

47
demo/documentation/components/treeDemo/basicUsage.demo.vue
View File

@ -1,47 +0,0 @@
<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Basic Usage
</div>
<div
class="n-doc-section__view"
style="display: block;"
>
<!--EXAMPLE_START-->
<n-tree
ref="tree"
:data="data"
checkable
/> <!--EXAMPLE_END-->
</div>
<pre>
<!--SOURCE-->
</pre>
</div>
</template>
<script>
let key = 0
function genData (layer = 4, depth = 0, prefix = '') {
if (layer === depth) return
const data = []
const count = 4
for (let i = 0; i < count; ++i) {
data.push({
label: `${prefix}_${i}`,
key: key++,
children: genData(layer, depth + 1, `${prefix}_${i}`)
})
}
return data
}
export default {
data () {
return {
data: genData()
}
}
}
</script>

47
demo/documentation/components/treeDemo/blockNode.demo.vue
View File

@ -1,47 +0,0 @@
<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Block Node
</div>
<div
class="n-doc-section__view"
style="display: block;"
>
<!--EXAMPLE_START-->
<n-tree
ref="tree"
:data="data"
block-node
/> <!--EXAMPLE_END-->
</div>
<pre>
<!--SOURCE-->
</pre>
</div>
</template>
<script>
let key = 0
function genData (layer = 2, depth = 0, prefix = '') {
if (layer === depth) return
const data = []
const count = 2
for (let i = 0; i < count; ++i) {
data.push({
label: `${prefix}_${i}`,
key: key++,
children: genData(layer, depth + 1, `${prefix}_${i}`)
})
}
return data
}
export default {
data () {
return {
data: genData()
}
}
}
</script>

35
demo/documentation/components/treeDemo/index.vue
View File

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

8
demo/init.js
View File

@ -57,13 +57,13 @@ import anchor from './documentation/components/anchor'
import popselect from './documentation/components/popselect'
import app from './documentation/components/app'
import advancedTable from './documentation/components/advancedTable'
import transferDemo from './documentation/components/transferDemo'
import transfer from './documentation/components/transfer'
import spin from './documentation/components/spin'
import drawer from './documentation/components/drawer'
import loadingBar from './documentation/components/loadingBar'
import time from './documentation/components/time'
import slider from './documentation/components/slider'
import treeDemo from './documentation/components/treeDemo'
import tree from './documentation/components/tree'
import affix from './documentation/components/affix'
import demo from './demo'
@ -176,13 +176,13 @@ const routes = [
{ path: '/n-popselect', component: popselect },
{ path: '/n-app', component: app },
{ path: '/n-cancel-mark-debug', component: cancelMarkDebug },
{ path: '/n-transfer', component: transferDemo },
{ path: '/n-transfer', component: transfer },
{ path: '/n-spin', component: spin },
{ path: '/n-drawer', component: drawer },
{ path: '/n-loading-bar', component: loadingBar },
{ path: '/n-time', component: time },
{ path: '/n-slider', component: slider },
{ path: '/n-tree', component: treeDemo },
{ path: '/n-tree', component: tree },
{ path: '/n-vertical-align-debug', component: verticalAlignDebug },
{ path: '/n-affix', component: affix }
])