docs: add docs for Accordion/Collapse/Popover
Change-Id: Ibb023741445c134973a2ea993c498f02d83f3a98
This commit is contained in:
xiaodemen
GU Yiling
60
one/docs/demo/accordion/position.vue
Normal file
60
one/docs/demo/accordion/position.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<div class="control-wrap">
|
||||
<veui-radio-button-group
|
||||
v-model="position"
|
||||
class="control-item"
|
||||
ui="s"
|
||||
:items="positions"
|
||||
/>
|
||||
</div>
|
||||
<veui-accordion :toggle-position="position">
|
||||
<veui-collapse label="Sun">
|
||||
The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. Its diameter is about 1.39 million kilometers (864,000 miles), or 109 times that of Earth, and its mass is about 330,000 times that of Earth. It accounts for about 99.86% of the total mass of the Solar System. Roughly three quarters of the Sun's mass consists of hydrogen (~73%); the rest is mostly helium (~25%), with much smaller quantities of heavier elements, including oxygen, carbon, neon, and iron.
|
||||
</veui-collapse>
|
||||
<veui-collapse label="Moon">
|
||||
The Moon is an astronomical body orbiting Earth and is the planet's only natural satellite. It is the fifth-largest satellite in the Solar System, and by far the largest among planetary satellites relative to the size of the planet that it orbits. The Moon is, after Jupiter's satellite Io, the second-densest satellite in the Solar System among those whose densities are known.
|
||||
</veui-collapse>
|
||||
</veui-accordion>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Accordion, Collapse, RadioButtonGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-accordion': Accordion,
|
||||
'veui-collapse': Collapse,
|
||||
'veui-radio-button-group': RadioButtonGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
position: 'start',
|
||||
positions: [
|
||||
{ label: 'start', value: 'start' },
|
||||
{ label: 'end', value: 'end' },
|
||||
{ label: 'none', value: 'none' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.control-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.control-item {
|
||||
margin-right: 12px;
|
||||
}
|
||||
</style>
|
||||
87
one/docs/demo/accordion/variant.vue
Normal file
87
one/docs/demo/accordion/variant.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<div class="control-wrap">
|
||||
<veui-radio-button-group
|
||||
v-model="variant"
|
||||
ui="s"
|
||||
class="control-item"
|
||||
:items="variants"
|
||||
/>
|
||||
<veui-radio-button-group
|
||||
v-model="bordered"
|
||||
ui="s"
|
||||
class="control-item"
|
||||
:items="[
|
||||
{ label: 'default', value: '' },
|
||||
{ label: 'bordered', value: 'bordered' },
|
||||
{ label: 'borderless', value: 'borderless' }
|
||||
]"
|
||||
/>
|
||||
<veui-check-button-group
|
||||
v-model="dull"
|
||||
ui="s"
|
||||
class="control-item"
|
||||
:items="[{ label: 'dull', value: 'dull' }]"
|
||||
/>
|
||||
</div>
|
||||
<veui-accordion :ui="realVariants">
|
||||
<veui-collapse label="Sun">
|
||||
The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. Its diameter is about 1.39 million kilometers (864,000 miles), or 109 times that of Earth, and its mass is about 330,000 times that of Earth. It accounts for about 99.86% of the total mass of the Solar System. Roughly three quarters of the Sun's mass consists of hydrogen (~73%); the rest is mostly helium (~25%), with much smaller quantities of heavier elements, including oxygen, carbon, neon, and iron.
|
||||
</veui-collapse>
|
||||
<veui-collapse label="Moon">
|
||||
The Moon is an astronomical body orbiting Earth and is the planet's only natural satellite. It is the fifth-largest satellite in the Solar System, and by far the largest among planetary satellites relative to the size of the planet that it orbits. The Moon is, after Jupiter's satellite Io, the second-densest satellite in the Solar System among those whose densities are known.
|
||||
</veui-collapse>
|
||||
</veui-accordion>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Accordion, Collapse, RadioButtonGroup, CheckButtonGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-accordion': Accordion,
|
||||
'veui-collapse': Collapse,
|
||||
'veui-radio-button-group': RadioButtonGroup,
|
||||
'veui-check-button-group': CheckButtonGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
variants: [
|
||||
{ label: '默认', value: '' },
|
||||
{ label: '简洁', value: 'simple' },
|
||||
{ label: '白底', value: 'basic' },
|
||||
{ label: '灰底', value: 'strong' }
|
||||
],
|
||||
variant: '',
|
||||
bordered: '',
|
||||
dull: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
realVariants () {
|
||||
return [this.variant, this.bordered || '', this.dull || '']
|
||||
.join(' ')
|
||||
.trim()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.control-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.control-item {
|
||||
margin-right: 12px;
|
||||
}
|
||||
</style>
|
||||
57
one/docs/demo/collapse/position.vue
Normal file
57
one/docs/demo/collapse/position.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<div class="control-wrap">
|
||||
<veui-radio-button-group
|
||||
v-model="position"
|
||||
class="control-item"
|
||||
ui="s"
|
||||
:items="positions"
|
||||
/>
|
||||
</div>
|
||||
<veui-collapse
|
||||
label="Sun"
|
||||
:toggle-position="position"
|
||||
>
|
||||
The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. Its diameter is about 1.39 million kilometers (864,000 miles), or 109 times that of Earth, and its mass is about 330,000 times that of Earth. It accounts for about 99.86% of the total mass of the Solar System. Roughly three quarters of the Sun's mass consists of hydrogen (~73%); the rest is mostly helium (~25%), with much smaller quantities of heavier elements, including oxygen, carbon, neon, and iron.
|
||||
</veui-collapse>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Collapse, RadioButtonGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-collapse': Collapse,
|
||||
'veui-radio-button-group': RadioButtonGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
position: 'start',
|
||||
positions: [
|
||||
{ label: 'start', value: 'start' },
|
||||
{ label: 'end', value: 'end' },
|
||||
{ label: 'none', value: 'none' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.control-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.control-item {
|
||||
margin-right: 12px;
|
||||
}
|
||||
</style>
|
||||
84
one/docs/demo/collapse/variant.vue
Normal file
84
one/docs/demo/collapse/variant.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<div class="control-wrap">
|
||||
<veui-radio-button-group
|
||||
v-model="variant"
|
||||
ui="s"
|
||||
class="control-item"
|
||||
:items="variants"
|
||||
/>
|
||||
<veui-radio-button-group
|
||||
v-model="bordered"
|
||||
ui="s"
|
||||
class="control-item"
|
||||
:items="[
|
||||
{ label: 'default', value: '' },
|
||||
{ label: 'bordered', value: 'bordered' },
|
||||
{ label: 'borderless', value: 'borderless' }
|
||||
]"
|
||||
/>
|
||||
<veui-check-button-group
|
||||
v-model="dull"
|
||||
ui="s"
|
||||
class="control-item"
|
||||
:items="[{ label: 'dull', value: 'dull' }]"
|
||||
/>
|
||||
</div>
|
||||
<veui-collapse
|
||||
:ui="realVariants"
|
||||
label="Sun"
|
||||
>
|
||||
The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. Its diameter is about 1.39 million kilometers (864,000 miles), or 109 times that of Earth, and its mass is about 330,000 times that of Earth. It accounts for about 99.86% of the total mass of the Solar System. Roughly three quarters of the Sun's mass consists of hydrogen (~73%); the rest is mostly helium (~25%), with much smaller quantities of heavier elements, including oxygen, carbon, neon, and iron.
|
||||
</veui-collapse>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Collapse, RadioButtonGroup, CheckButtonGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-collapse': Collapse,
|
||||
'veui-radio-button-group': RadioButtonGroup,
|
||||
'veui-check-button-group': CheckButtonGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
variants: [
|
||||
{ label: '默认', value: '' },
|
||||
{ label: '简洁', value: 'simple' },
|
||||
{ label: '白底', value: 'basic' },
|
||||
{ label: '灰底', value: 'strong' }
|
||||
],
|
||||
variant: '',
|
||||
bordered: '',
|
||||
dull: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
realVariants () {
|
||||
return [this.variant, this.bordered || '', this.dull || '']
|
||||
.join(' ')
|
||||
.trim()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.control-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.control-item {
|
||||
margin-right: 12px;
|
||||
}
|
||||
</style>
|
||||
48
one/docs/demo/popover/foot.vue
Normal file
48
one/docs/demo/popover/foot.vue
Normal file
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-button ref="btn1">
|
||||
按钮1
|
||||
</veui-button>
|
||||
<veui-button ref="btn2">
|
||||
按钮2
|
||||
</veui-button>
|
||||
<veui-popover
|
||||
target="btn1"
|
||||
title="Popover Title"
|
||||
ok-label="好"
|
||||
cancel-label="否"
|
||||
foot
|
||||
>
|
||||
This is a popover.
|
||||
</veui-popover>
|
||||
<veui-popover
|
||||
target="btn2"
|
||||
title="Popover Title"
|
||||
foot
|
||||
>
|
||||
This is a popover.
|
||||
<template #foot>
|
||||
Popover foot
|
||||
</template>
|
||||
</veui-popover>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Popover, Button } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-button': Button,
|
||||
'veui-popover': Popover
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-button + .veui-button {
|
||||
margin-left: 200px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user