feat: publicize doc implemetation
This commit is contained in:
Justineo
105
one/docs/demo/dropdown/disable.vue
Normal file
105
one/docs/demo/dropdown/disable.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-dropdown
|
||||
label="Operation"
|
||||
disabled
|
||||
ui="text"
|
||||
:options="options"
|
||||
/>
|
||||
<veui-dropdown
|
||||
label="Operation"
|
||||
disabled
|
||||
:options="options"
|
||||
/>
|
||||
<veui-dropdown
|
||||
label="Operation"
|
||||
disabled
|
||||
ui="primary"
|
||||
:options="options"
|
||||
/>
|
||||
<veui-dropdown
|
||||
label="Operation"
|
||||
disabled
|
||||
split
|
||||
:options="options"
|
||||
/>
|
||||
<veui-dropdown
|
||||
label="Operation"
|
||||
disabled
|
||||
split
|
||||
ui="primary"
|
||||
:options="options"
|
||||
/>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Dropdown } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-dropdown': Dropdown
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
options: [
|
||||
{
|
||||
label: '新建',
|
||||
value: 'create'
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
value: 'edit',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
value: 'remove'
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
value: 'edit',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
value: 'remove'
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
value: 'edit',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
value: 'remove'
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
value: 'edit',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
value: 'remove'
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
value: 'edit',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
value: 'remove'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.veui-dropdown {
|
||||
margin-left: 1em;
|
||||
}
|
||||
</style>
|
||||
70
one/docs/demo/dropdown/inline.vue
Normal file
70
one/docs/demo/dropdown/inline.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<veui-dropdown
|
||||
label="Files"
|
||||
@click="alert"
|
||||
>
|
||||
<veui-option-group>
|
||||
<veui-option
|
||||
value="new-file"
|
||||
label="New File"
|
||||
/>
|
||||
<veui-option
|
||||
value="new-window"
|
||||
label="New Window"
|
||||
/>
|
||||
</veui-option-group>
|
||||
<veui-option-group>
|
||||
<veui-option
|
||||
value="open"
|
||||
label="Open…"
|
||||
/>
|
||||
<veui-option
|
||||
value="open-workspace"
|
||||
label="Open Workspace…"
|
||||
/>
|
||||
<veui-option-group
|
||||
label="Open Recent"
|
||||
position="popup"
|
||||
>
|
||||
<veui-option-group>
|
||||
<veui-option
|
||||
value="reopen"
|
||||
label="Reopen Closed Editor"
|
||||
/>
|
||||
</veui-option-group>
|
||||
<veui-option-group>
|
||||
<veui-option
|
||||
value="open:~/Dropdown.vue"
|
||||
label="~/Dropdown.vue"
|
||||
/>
|
||||
<veui-option
|
||||
value="open:~/Select.vue"
|
||||
label="~/Select.vue"
|
||||
/>
|
||||
</veui-option-group>
|
||||
</veui-option-group>
|
||||
</veui-option-group>
|
||||
</veui-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Dropdown, OptionGroup, Option } from 'veui'
|
||||
import toast from 'veui/managers/toast'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-dropdown': Dropdown,
|
||||
'veui-option-group': OptionGroup,
|
||||
'veui-option': Option
|
||||
},
|
||||
methods: {
|
||||
alert (e) {
|
||||
toast.info(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<docs>
|
||||
将 `OptionGroup` 的 `position` 属性设置为 `popup` 后可以让子选项在新的浮动子菜单中展现。
|
||||
</docs>
|
||||
132
one/docs/demo/dropdown/other.vue
Normal file
132
one/docs/demo/dropdown/other.vue
Normal file
@@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<article>
|
||||
<div class="container">
|
||||
<veui-dropdown
|
||||
label="Operation"
|
||||
split
|
||||
trigger="hover"
|
||||
:options="options"
|
||||
/>
|
||||
<veui-dropdown
|
||||
label="Operation"
|
||||
split
|
||||
trigger="click"
|
||||
:options="options"
|
||||
/>
|
||||
<veui-dropdown
|
||||
label="Operation"
|
||||
ui="primary"
|
||||
split
|
||||
trigger="hover"
|
||||
:options="options"
|
||||
/>
|
||||
<veui-dropdown
|
||||
label="Operation"
|
||||
ui="primary"
|
||||
split
|
||||
trigger="click"
|
||||
:options="options"
|
||||
/>
|
||||
</div>
|
||||
<div class="container">
|
||||
<veui-dropdown
|
||||
label="Operation"
|
||||
trigger="hover"
|
||||
:options="options"
|
||||
/>
|
||||
<veui-dropdown
|
||||
label="Operation"
|
||||
trigger="click"
|
||||
:options="options"
|
||||
/>
|
||||
<veui-dropdown
|
||||
label="Operation"
|
||||
ui="text"
|
||||
split
|
||||
trigger="hover"
|
||||
:options="options"
|
||||
/>
|
||||
<veui-dropdown
|
||||
label="Operation"
|
||||
ui="text"
|
||||
split
|
||||
trigger="click"
|
||||
:options="options"
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Dropdown } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-dropdown': Dropdown
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
options: [
|
||||
{
|
||||
label: '新建新建新建新建新建新建新建',
|
||||
value: 'create'
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
value: 'edit',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
value: 'remove'
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
value: 'edit',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
value: 'remove'
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
value: 'edit',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
value: 'remove'
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
value: 'edit',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
value: 'remove'
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
value: 'edit',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
value: 'remove'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.container {
|
||||
margin-bottom: 1em;
|
||||
.veui-dropdown {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
168
one/docs/demo/dropdown/searchable.vue
Normal file
168
one/docs/demo/dropdown/searchable.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-dropdown
|
||||
label="Operation"
|
||||
placeholder="Type to search..."
|
||||
searchable
|
||||
:options="options"
|
||||
/>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Dropdown } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-dropdown': Dropdown
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
options: [
|
||||
{
|
||||
label: '>',
|
||||
value: '>'
|
||||
},
|
||||
{
|
||||
label: '>>',
|
||||
value: '>>'
|
||||
},
|
||||
{
|
||||
label: '<',
|
||||
value: '<'
|
||||
},
|
||||
{
|
||||
label: '|',
|
||||
value: '|'
|
||||
},
|
||||
{
|
||||
label: '~/.bash_profile',
|
||||
value: '~/.bash_profile'
|
||||
},
|
||||
{
|
||||
label: 'alias',
|
||||
value: 'alias'
|
||||
},
|
||||
{
|
||||
label: 'cd',
|
||||
value: 'cd'
|
||||
},
|
||||
{
|
||||
label: 'cd ..',
|
||||
value: 'cd ..'
|
||||
},
|
||||
{
|
||||
label: 'cp',
|
||||
value: 'cp'
|
||||
},
|
||||
{
|
||||
label: 'Wildcards (*)',
|
||||
value: 'Wildcards (*)'
|
||||
},
|
||||
{
|
||||
label: 'env',
|
||||
value: 'env'
|
||||
},
|
||||
{
|
||||
label: 'env | grep VARIABLE',
|
||||
value: 'env | grep VARIABLE'
|
||||
},
|
||||
{
|
||||
label: 'export',
|
||||
value: 'export'
|
||||
},
|
||||
{
|
||||
label: 'grep',
|
||||
value: 'grep'
|
||||
},
|
||||
{
|
||||
label: 'grep -i',
|
||||
value: 'grep -i'
|
||||
},
|
||||
{
|
||||
label: 'grep -R',
|
||||
value: 'grep -R'
|
||||
},
|
||||
{
|
||||
label: 'grep -Rl',
|
||||
value: 'grep -Rl'
|
||||
},
|
||||
{
|
||||
label: 'HOME',
|
||||
value: 'HOME'
|
||||
},
|
||||
{
|
||||
label: 'ls',
|
||||
value: 'ls'
|
||||
},
|
||||
{
|
||||
label: 'mkdir',
|
||||
value: 'mkdir'
|
||||
},
|
||||
{
|
||||
label: 'mv',
|
||||
value: 'mv'
|
||||
},
|
||||
{
|
||||
label: 'nano',
|
||||
value: 'nano'
|
||||
},
|
||||
{
|
||||
label: 'PATH',
|
||||
value: 'PATH'
|
||||
},
|
||||
{
|
||||
label: 'pwd',
|
||||
value: 'pwd'
|
||||
},
|
||||
{
|
||||
label: 'rm',
|
||||
value: 'rm'
|
||||
},
|
||||
{
|
||||
label: 'rm -r',
|
||||
value: 'rm -r'
|
||||
},
|
||||
{
|
||||
label: 'sed',
|
||||
value: 'sed'
|
||||
},
|
||||
{
|
||||
label: 'sort',
|
||||
value: 'sort'
|
||||
},
|
||||
{
|
||||
label: 'standard error',
|
||||
value: 'standard error'
|
||||
},
|
||||
{
|
||||
label: 'source',
|
||||
value: 'source'
|
||||
},
|
||||
{
|
||||
label: 'standard input',
|
||||
value: 'standard input'
|
||||
},
|
||||
{
|
||||
label: 'standard output',
|
||||
value: 'standard output'
|
||||
},
|
||||
{
|
||||
label: 'touch',
|
||||
value: 'touch'
|
||||
},
|
||||
{
|
||||
label: 'uniq',
|
||||
value: 'uniq'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.veui-dropdown {
|
||||
margin-left: 1em;
|
||||
}
|
||||
</style>
|
||||
72
one/docs/demo/dropdown/size.vue
Normal file
72
one/docs/demo/dropdown/size.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-dropdown
|
||||
label="Action"
|
||||
ui="xs"
|
||||
:options="operations"
|
||||
@click="alert"
|
||||
/>
|
||||
<veui-dropdown
|
||||
label="Action"
|
||||
ui="s"
|
||||
:options="operations"
|
||||
@click="alert"
|
||||
/>
|
||||
<veui-dropdown
|
||||
label="Action"
|
||||
:options="operations"
|
||||
@click="alert"
|
||||
/>
|
||||
<veui-dropdown
|
||||
label="Action"
|
||||
ui="l"
|
||||
:options="operations"
|
||||
@click="alert"
|
||||
/>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Dropdown } from 'veui'
|
||||
import toast from 'veui/managers/toast'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-dropdown': Dropdown
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
operations: [
|
||||
{
|
||||
label: 'Edit',
|
||||
value: 'edit'
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
value: 'delete'
|
||||
},
|
||||
{
|
||||
label: 'Save',
|
||||
value: 'save'
|
||||
},
|
||||
{
|
||||
label: 'Publish',
|
||||
value: 'publish'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
alert (e) {
|
||||
toast.info(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.veui-dropdown {
|
||||
max-width: 120px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
59
one/docs/demo/dropdown/style.vue
Normal file
59
one/docs/demo/dropdown/style.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-dropdown
|
||||
label="Primary"
|
||||
ui="primary"
|
||||
:options="options"
|
||||
/>
|
||||
<veui-dropdown
|
||||
label="Default"
|
||||
:options="options"
|
||||
/>
|
||||
<veui-dropdown
|
||||
label="Normal"
|
||||
ui="normal"
|
||||
:options="options"
|
||||
/>
|
||||
<veui-dropdown
|
||||
label="Text"
|
||||
ui="text"
|
||||
:options="options"
|
||||
/>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Dropdown } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-dropdown': Dropdown
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
options: [
|
||||
{
|
||||
label: '新建',
|
||||
value: 'create'
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
value: 'edit'
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
value: 'remove'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.veui-dropdown {
|
||||
& + & {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user