fix: fix demo html structure

This commit is contained in:
Justineo 2021-12-13 18:12:30 +08:00
parent 68db66cd1b
commit 6cdc95f6dd
No known key found for this signature in database
GPG Key ID: B73F0979CF18A0EA
9 changed files with 100 additions and 96 deletions

View File

@ -1,19 +1,21 @@
<template> <template>
<article> <article>
<p> <section>
fill-month: <veui-switch v-model="isFill"/> <veui-checkbox v-model="isFill">
</p> Fill month
</veui-checkbox>
</section>
<veui-calendar :fill-month="isFill"/> <veui-calendar :fill-month="isFill"/>
</article> </article>
</template> </template>
<script> <script>
import { Calendar, Switch } from 'veui' import { Calendar, Checkbox } from 'veui'
export default { export default {
components: { components: {
'veui-calendar': Calendar, 'veui-calendar': Calendar,
'veui-switch': Switch 'veui-checkbox': Checkbox
}, },
data () { data () {
return { return {
@ -25,7 +27,7 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.veui-radio-group { section {
margin-bottom: 20px; margin-bottom: 20px;
} }
</style> </style>

View File

@ -1,25 +1,25 @@
<template> <template>
<article> <article>
<section> <section>
<p> <veui-checkbox v-model="isStable">
最小宽度<veui-switch v-model="isStable"/> Stable layout
</p> </veui-checkbox>
<veui-check-button-group
v-model="flavor"
:items="flavors"
:ui="isStable ? 'stable' : ''"
/>
</section> </section>
<veui-check-button-group
v-model="flavor"
:items="flavors"
:ui="isStable ? 'stable' : ''"
/>
</article> </article>
</template> </template>
<script> <script>
import { CheckButtonGroup, Switch } from 'veui' import { CheckButtonGroup, Checkbox } from 'veui'
export default { export default {
components: { components: {
'veui-check-button-group': CheckButtonGroup, 'veui-check-button-group': CheckButtonGroup,
'veui-switch': Switch 'veui-checkbox': Checkbox
}, },
data () { data () {
return { return {
@ -39,8 +39,4 @@ export default {
section { section {
margin-bottom: 20px; margin-bottom: 20px;
} }
h4 {
margin-top: 0;
}
</style> </style>

View File

@ -26,11 +26,11 @@
:ui="ui" :ui="ui"
:open.sync="open" :open.sync="open"
> >
<p>Current UI: "{{ ui }}"</p> <section>Current UI: "{{ ui }}"</section>
<p v-if="ui === 's' || ui === 'm'"> <section v-if="ui === 's' || ui === 'm'">
<veui-button>Button size: {{ ui }}</veui-button> <veui-button>Button size: {{ ui }}</veui-button>
<veui-switch>{{ ui }}</veui-switch> <veui-switch>{{ ui }}</veui-switch>
</p> </section>
</veui-dialog> </veui-dialog>
</article> </article>
</template> </template>

View File

@ -1,10 +1,12 @@
<template> <template>
<article> <article>
<section> <section>
<p> <veui-checkbox v-model="composition">
composition: <veui-switch v-model="composition"/> Composition
</p> </veui-checkbox>
<p>Input value: {{ value }}</p> </section>
<section>Input value: {{ value }}</section>
<section>
<veui-input <veui-input
v-model="value" v-model="value"
:composition="composition" :composition="composition"
@ -14,12 +16,12 @@
</template> </template>
<script> <script>
import { Input, Switch } from 'veui' import { Input, Checkbox } from 'veui'
export default { export default {
components: { components: {
'veui-input': Input, 'veui-input': Input,
'veui-switch': Switch 'veui-checkbox': Checkbox
}, },
data () { data () {
return { return {
@ -29,3 +31,9 @@ export default {
} }
} }
</script> </script>
<style lang="less" scoped>
section {
margin-bottom: 20px;
}
</style>

View File

@ -6,26 +6,25 @@
</veui-checkbox> </veui-checkbox>
</section> </section>
<section> <section>
<p> section
<veui-number-input <veui-number-input
v-model="value" v-model="value"
:disabled="disabled" :disabled="disabled"
/> />
</p> </section>
<p> <section>
<veui-number-input <veui-number-input
v-model="value" v-model="value"
:disabled="disabled" :disabled="disabled"
ui="s" ui="s"
/> />
</p> </section>
<p> <section>
<veui-number-input <veui-number-input
v-model="value" v-model="value"
:disabled="disabled" :disabled="disabled"
ui="xs" ui="xs"
/> />
</p>
</section> </section>
</article> </article>
</template> </template>
@ -48,8 +47,7 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
section, section {
p { margin-bottom: 20px;
margin-bottom: 1em;
} }
</style> </style>

View File

@ -6,26 +6,24 @@
</veui-checkbox> </veui-checkbox>
</section> </section>
<section> <section>
<p> <veui-number-input
<veui-number-input v-model="value"
v-model="value" :readonly="readonly"
:readonly="readonly" />
/> </section>
</p> <section>
<p> <veui-number-input
<veui-number-input v-model="value"
v-model="value" :readonly="readonly"
:readonly="readonly" ui="s"
ui="s" />
/> </section>
</p> <section>
<p> <veui-number-input
<veui-number-input v-model="value"
v-model="value" :readonly="readonly"
:readonly="readonly" ui="xs"
ui="xs" />
/>
</p>
</section> </section>
</article> </article>
</template> </template>
@ -48,8 +46,7 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
section, section {
p {
margin-bottom: 1em; margin-bottom: 1em;
} }
</style> </style>

View File

@ -1,20 +1,20 @@
<template> <template>
<article> <article>
<p> <section>
<veui-number-input v-model="value"/> <veui-number-input v-model="value"/>
</p> </section>
<p> <section>
<veui-number-input <veui-number-input
v-model="value" v-model="value"
ui="s" ui="s"
/> />
</p> </section>
<p> <section>
<veui-number-input <veui-number-input
v-model="value" v-model="value"
ui="xs" ui="xs"
/> />
</p> </section>
</article> </article>
</template> </template>
@ -34,7 +34,7 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
p { section {
margin-bottom: 1em; margin-bottom: 20px;
} }
</style> </style>

View File

@ -1,25 +1,26 @@
<template> <template>
<article> <article>
<section> <section>
<p> <veui-checkbox v-model="isStable">
最小宽度<veui-switch v-model="isStable"/> Stable layout
</p> </veui-checkbox>
<veui-radio-button-group </section>
v-model="flavor" <veui-radio-button-group
:items="flavors" v-model="flavor"
:ui="isStable ? 'stable' : ''" :items="flavors"
/> :ui="isStable ? 'stable' : ''"
/>
</section> </section>
</article> </article>
</template> </template>
<script> <script>
import { RadioButtonGroup, Switch } from 'veui' import { RadioButtonGroup, Checkbox } from 'veui'
export default { export default {
components: { components: {
'veui-radio-button-group': RadioButtonGroup, 'veui-radio-button-group': RadioButtonGroup,
'veui-switch': Switch 'veui-checkbox': Checkbox
}, },
data () { data () {
return { return {

View File

@ -2,10 +2,12 @@
<article> <article>
<section> <section>
<div> <div>
允许不排序<veui-switch <veui-checkbox
v-model="allowFalse" v-model="allowFalse"
@change="handleChange" @change="handleChange"
/> >
Allow unordered
</veui-checkbox>
</div> </div>
<veui-table <veui-table
:data="sorted" :data="sorted"
@ -41,7 +43,7 @@
</template> </template>
<script> <script>
import { Table, Column, Switch } from 'veui' import { Table, Column, Checkbox } from 'veui'
let data = [ let data = [
{ {
@ -76,7 +78,7 @@ export default {
components: { components: {
'veui-table': Table, 'veui-table': Table,
'veui-table-column': Column, 'veui-table-column': Column,
'veui-switch': Switch 'veui-checkbox': Checkbox
}, },
filters: { filters: {
currency (value) { currency (value) {