taolin/docs_vue2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

docs: add docs for carousel and config-provider (#8)

Browse Source 
* docs: add docs for carousel and config-provider
This commit is contained in:
xdm
2021-09-15 19:04:39 +08:00
committed by GitHub
parent 5878fe4ac9
commit 1b98a996ff
11 changed files with 727 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
one/docs/demo/carousel/effect.vue Normal file
View File

@@ -0,0 +1,67 @@
<template>
<article>
<section>
<h4>Effect type</h4>
<veui-radio-group
v-model="effect"
:items="effects"
/>
</section>
<section>
<veui-carousel
:datasource="items"
:effect="effect"
/>
</section>
</article>
</template>
<script>
import { Carousel, RadioGroup } from 'veui'
export default {
components: {
'veui-carousel': Carousel,
'veui-radio-group': RadioGroup
},
data () {
return {
items: [
{
src:
'https://ecmb.bdimg.com/public01/one-design/2b77cc4a4c5c906993c0e512f3ddaf03.jpg',
alt: 'A cute kitty looking at you with its greenish eyes.',
label: 'Cat'
},
{
src:
'https://ecmb.bdimg.com/public01/one-design/6fedc62b9221846ce5114c7447622e47.jpeg',
alt: 'A common kingfisher flying above river.',
label: 'Kingfisher'
},
{
src:
'https://ecmb.bdimg.com/public01/one-design/e1b6473c898d9e456452ee79d7533a86.jpeg',
alt: 'A white and gray dolphin in blue water.',
label: 'Dolphin'
}
],
effect: 'fade',
effects: [
{ label: 'Fade', value: 'fade' },
{ label: 'Slide', value: 'slide' }
]
}
}
}
</script>
<style lang="less" scoped docs>
h4 {
margin: 0 0 10px;
}
section {
margin-bottom: 10px;
}
</style>

32
one/docs/demo/carousel/indicator.vue
View File

@@ -6,11 +6,23 @@
v-model="indicator"
:items="indicators"
/>
<h4>Indicator position（仅在对齐方式是 end 时生效）</h4>
<veui-radio-group
v-model="indicatorPosition"
:items="positions"
/>
<h4>Indicator alignment</h4>
<veui-radio-group
v-model="align"
:items="alignments"
/>
</section>
<section>
<veui-carousel
:datasource="items"
:indicator="indicator"
:indicator-position="indicatorPosition"
:indicator-alignment="align"
/>
</section>
</article>
@@ -19,6 +31,8 @@
<script>
import { Carousel, RadioGroup } from 'veui'
// TODO update alignment
export default {
components: {
'veui-carousel': Carousel,
@@ -46,11 +60,22 @@ export default {
label: 'Dolphin'
}
],
indicator: 'radio',
indicator: 'bar',
indicatorPosition: 'inside',
align: 'start',
indicators: [
{ label: 'Radio', value: 'radio' },
{ label: 'Bar', value: 'bar' },
{ label: 'Number', value: 'number' },
{ label: 'Dot', value: 'dot' },
{ label: 'None', value: 'none' }
],
alignments: [
{ value: 'start', label: 'start' },
{ value: 'end', label: 'end' }
],
positions: [
{ label: 'Inside', value: 'inside' },
{ label: 'Outside', value: 'outside' }
]
}
}
@@ -60,6 +85,9 @@ export default {
<style lang="less" scoped docs>
h4 {
margin: 0 0 10px;
&:not(:first-child) {
margin-top: 10px;
}
}
section {

76
one/docs/demo/carousel/slides.vue Normal file
View File

@@ -0,0 +1,76 @@
<template>
<article>
<section>
<h4>2 view, 2 group</h4>
<veui-carousel
:datasource="items"
:slides-per-group="2"
:slides-per-view="2"
effect="slide"
indicator-position="outside"
indicator-alignment="end"
wrap
/>
<h4>2 view, 1 group</h4>
<veui-carousel
:datasource="items"
:slides-per-group="1"
:slides-per-view="2"
effect="slide"
indicator-position="outside"
indicator-alignment="end"
wrap
/>
</section>
</article>
</template>
<script>
import { Carousel } from 'veui'
export default {
components: {
'veui-carousel': Carousel
},
data () {
return {
items: [
{
src:
'https://ecmb.bdimg.com/public01/one-design/2b77cc4a4c5c906993c0e512f3ddaf03.jpg',
alt: 'A cute kitty looking at you with its greenish eyes.',
label: 'Cat'
},
{
src:
'https://ecmb.bdimg.com/public01/one-design/6fedc62b9221846ce5114c7447622e47.jpeg',
alt: 'A common kingfisher flying above river.',
label: 'Kingfisher'
},
{
src:
'https://ecmb.bdimg.com/public01/one-design/e1b6473c898d9e456452ee79d7533a86.jpeg',
alt: 'A white and gray dolphin in blue water.',
label: 'Dolphin'
},
{
src:
'https://ss3.bdstatic.com/yrwDcj7w0QhBkMak8IuT_XF5ehU5bvGh7c50/logopic/1b61ee88fdb4a4b918816ae1cfd84af1_fullsize.jpg',
alt: 'Tesla logo.',
label: '特斯拉'
}
]
}
}
}
</script>
<style lang="less" scoped docs>
h4 {
margin: 0 0 10px;
}
section {
margin-bottom: 10px;
}
</style>

69
one/docs/demo/carousel/vertical.vue Normal file
View File

@@ -0,0 +1,69 @@
<template>
<article>
<section>
<h4>Controls position</h4>
<veui-radio-group
v-model="position"
:items="positions"
/>
</section>
<section>
<veui-carousel
:datasource="items"
effect="slide"
:controls-position="position"
vertical
/>
</section>
</article>
</template>
<script>
import { Carousel, RadioGroup } from 'veui'
export default {
components: {
'veui-carousel': Carousel,
'veui-radio-group': RadioGroup
},
data () {
return {
items: [
{
src:
'https://ecmb.bdimg.com/public01/one-design/2b77cc4a4c5c906993c0e512f3ddaf03.jpg',
alt: 'A cute kitty looking at you with its greenish eyes.',
label: 'Cat'
},
{
src:
'https://ecmb.bdimg.com/public01/one-design/6fedc62b9221846ce5114c7447622e47.jpeg',
alt: 'A common kingfisher flying above river.',
label: 'Kingfisher'
},
{
src:
'https://ecmb.bdimg.com/public01/one-design/e1b6473c898d9e456452ee79d7533a86.jpeg',
alt: 'A white and gray dolphin in blue water.',
label: 'Dolphin'
}
],
position: 'inside',
positions: [
{ label: 'Inside', value: 'inside' },
{ label: 'Outside', value: 'outside' }
]
}
}
}
</script>
<style lang="less" scoped docs>
h4 {
margin: 0 0 10px;
}
section {
margin-bottom: 10px;
}
</style>