shiouhoo
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs[Carousel]: [carousel] improve the document of Carousel Component (#1571) 

* docs(Carousel): [Carousel] unified code example and improve the carousel demo style

* docs(Carousel): [Carousel]improve the description of document
This commit is contained in:
AcWrong02 2024-04-30 14:04:42 +08:00 committed by GitHub
parent f6bd22b973
commit 551ea69212
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
31 changed files with 310 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
examples/sites/demos/apis/carousel.js
View File

@ -8,7 +8,7 @@ export default {
{
name: 'arrow',
type: 'string',
defaultValue: "该属性的默认值为 'hover'",
defaultValue: "'hover'",
desc: {
'zh-CN': '切换箭头的显示效果，该属性的可选值为 always / hover / never',
'en-US': 'Switch the display effect of arrows,The optional values for this attribute are always/hover/never'
@ -31,7 +31,7 @@ export default {
{
name: 'autoplay',
type: 'boolean',
defaultValue: '该属性的默认值为 false',
defaultValue: 'false',
desc: {
'zh-CN': '是否自动切换',
'en-US': 'Whether to automatically switch'
@ -57,7 +57,7 @@ export default {
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '指示器的位置。该属性的可选值为 outside / none',
'zh-CN': '指示器的位置，该属性的可选值为 outside / none',
'en-US': 'The position of the indicator. The optional values for this attribute are outside/none'
},
mode: ['pc', 'mobile-first'],
@ -67,10 +67,10 @@ export default {
{
name: 'indicator-style',
type: 'String',
defaultValue: '该属性的可选值为 light/dark ，默认为light。',
defaultValue: "'light'",
desc: {
'zh-CN': '指示器的样式。',
'en-US': 'The style of the indicator.'
'zh-CN': '指示器的样式，该属性的可选值为 light/dark',
'en-US': 'The style of the indicator, The optional values for this attribute are light/mark.'
},
mode: ['mobile-first'],
mfDemo: 'indicator-style'
@ -78,7 +78,7 @@ export default {
{
name: 'initial-index',
type: 'number',
defaultValue: '该属性的默认值为 0',
defaultValue: '0',
desc: {
'zh-CN': '初始状态激活的幻灯片的索引，从 0 开始',
'en-US': 'Index of slides activated in initial state, starting from 0'
@ -90,7 +90,7 @@ export default {
{
name: 'interval',
type: 'number',
defaultValue: '该属性的默认值为 3000',
defaultValue: '3000',
desc: {
'zh-CN': '自动切换的时间间隔，单位为毫秒',
'en-US': 'The time interval for automatic switching, in milliseconds'
@ -102,7 +102,7 @@ export default {
{
name: 'loop',
type: 'boolean',
defaultValue: '该属性的默认值为 true',
defaultValue: 'true',
desc: {
'zh-CN': '是否循环显示',
'en-US': 'Whether to display in a loop'
@ -114,7 +114,7 @@ export default {
{
name: 'show-title',
type: 'boolean',
defaultValue: '该属性的默认值为 false',
defaultValue: 'false',
desc: {
'zh-CN': '是否显示标题',
'en-US': 'Is the title displayed'
@ -126,11 +126,10 @@ export default {
{
name: 'trigger',
type: 'string',
defaultValue: "该属性的默认值为 'hover'",
defaultValue: "'hover'",
desc: {
'zh-CN': '指示器的触发方式，默认为 hover。该属性的可选值为 click',
'en-US':
'The triggering method of the indicator is hover by default. The optional value for this attribute is click'
'zh-CN': '指示器的触发方式，该属性的可选值为 hover / click',
'en-US': 'The triggering method of the indicator. The optional value for this attribute is click'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'indicator-trigger',
@ -139,7 +138,7 @@ export default {
{
name: 'type',
type: 'string',
defaultValue: "该属性的默认值为 'horizontal'",
defaultValue: "'horizontal'",
desc: {
'zh-CN': '走马灯的类型，该属性的可选值为 horizontal / vertical / card',
'en-US': 'The type of horse lantern,The optional values for this attribute are horizontal/vertical/card'
@ -152,11 +151,12 @@ export default {
events: [
{
name: 'change',
type: '',
type: '(curIndex: number, preIndex: number) => void',
defaultValue: '',
desc: {
'zh-CN': '幻灯片切换时触发',
'en-US': 'Trigger during slide transition'
'zh-CN': '幻灯片切换时触发，第一个参数为当前幻灯片索引，第二个参数为上一张幻灯片索引',
'en-US':
'Trigger during slide transition, The first parameter is the current slide index, and the second parameter is the index of the previous slide'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'carousel-events',
@ -193,8 +193,9 @@ export default {
type: '',
defaultValue: '',
desc: {
'zh-CN': '手动切换幻灯片',
'en-US': 'Manually switch slides'
'zh-CN': '手动切换幻灯片，参数为需要切换的幻灯片的索引，从 0 开始',
'en-US':
'Manually switch slides,the parameter is the index of the slides that need to be switched, starting from 0'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'manual-play',

11
examples/sites/demos/pc/app/carousel/autoplay-composition-api.vue
View File

@ -6,11 +6,20 @@
</tiny-carousel>
</template>
<script setup lang="jsx">
<script setup>
import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@opentiny/vue'
</script>
<style scoped>
.tiny-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
font-size: 25px;
}
.carousel-item-demo:nth-child(2n) {
background-color: #fafafa;
}

11
examples/sites/demos/pc/app/carousel/autoplay.vue
View File

@ -6,7 +6,7 @@
</tiny-carousel>
</template>
<script lang="jsx">
<script>
import { Carousel, CarouselItem } from '@opentiny/vue'
export default {
@ -18,6 +18,15 @@ export default {
</script>
<style scoped>
.tiny-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
font-size: 25px;
}
.carousel-item-demo:nth-child(2n) {
background-color: #fafafa;
}

11
examples/sites/demos/pc/app/carousel/basic-usage-composition-api.vue
View File

@ -6,11 +6,20 @@
</tiny-carousel>
</template>
<script setup lang="jsx">
<script setup>
import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@opentiny/vue'
</script>
<style scoped>
.tiny-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
font-size: 25px;
}
.carousel-item-demo:nth-child(2n) {
background-color: #fafafa;
}

11
examples/sites/demos/pc/app/carousel/basic-usage.vue
View File

@ -6,7 +6,7 @@
</tiny-carousel>
</template>
<script lang="jsx">
<script>
import { Carousel, CarouselItem } from '@opentiny/vue'
export default {
@ -18,6 +18,15 @@ export default {
</script>
<style scoped>
.tiny-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
font-size: 25px;
}
.carousel-item-demo:nth-child(2n) {
background-color: #fafafa;
}

11
examples/sites/demos/pc/app/carousel/card-mode-composition-api.vue
View File

@ -6,11 +6,20 @@
</tiny-carousel>
</template>
<script setup lang="jsx">
<script setup>
import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@opentiny/vue'
</script>
<style scoped>
.tiny-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
font-size: 25px;
}
.carousel-item-demo:nth-child(2n) {
background-color: #fafafa;
}

11
examples/sites/demos/pc/app/carousel/card-mode.vue
View File

@ -6,7 +6,7 @@
</tiny-carousel>
</template>
<script lang="jsx">
<script>
import { Carousel, CarouselItem } from '@opentiny/vue'
export default {
@ -18,6 +18,15 @@ export default {
</script>
<style scoped>
.tiny-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
font-size: 25px;
}
.carousel-item-demo:nth-child(2n) {
background-color: #fafafa;
}

11
examples/sites/demos/pc/app/carousel/carousel-arrow-always-composition-api.vue
View File

@ -6,11 +6,20 @@
</tiny-carousel>
</template>
<script setup lang="jsx">
<script setup>
import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@opentiny/vue'
</script>
<style scoped>
.tiny-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
font-size: 25px;
}
.carousel-item-demo:nth-child(2n) {
background-color: #fafafa;
}

11
examples/sites/demos/pc/app/carousel/carousel-arrow-always.vue
View File

@ -6,7 +6,7 @@
</tiny-carousel>
</template>
<script lang="jsx">
<script>
import { Carousel, CarouselItem } from '@opentiny/vue'
export default {
@ -18,6 +18,15 @@ export default {
</script>
<style scoped>
.tiny-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
font-size: 25px;
}
.carousel-item-demo:nth-child(2n) {
background-color: #fafafa;
}

11
examples/sites/demos/pc/app/carousel/carousel-arrow-hover-composition-api.vue
View File

@ -6,11 +6,20 @@
</tiny-carousel>
</template>
<script setup lang="jsx">
<script setup>
import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@opentiny/vue'
</script>
<style scoped>
.tiny-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
font-size: 25px;
}
.carousel-item-demo:nth-child(2n) {
background-color: #fafafa;
}

11
examples/sites/demos/pc/app/carousel/carousel-arrow-hover.vue
View File

@ -6,7 +6,7 @@
</tiny-carousel>
</template>
<script lang="jsx">
<script>
import { Carousel, CarouselItem } from '@opentiny/vue'
export default {
@ -18,6 +18,15 @@ export default {
</script>
<style scoped>
.tiny-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
font-size: 25px;
}
.carousel-item-demo:nth-child(2n) {
background-color: #fafafa;
}

11
examples/sites/demos/pc/app/carousel/carousel-arrow-never-composition-api.vue
View File

@ -6,11 +6,20 @@
</tiny-carousel>
</template>
<script setup lang="jsx">
<script setup>
import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@opentiny/vue'
</script>
<style scoped>
.tiny-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
font-size: 25px;
}
.carousel-item-demo:nth-child(2n) {
background-color: #fafafa;
}

11
examples/sites/demos/pc/app/carousel/carousel-arrow-never.vue
View File

@ -6,7 +6,7 @@
</tiny-carousel>
</template>
<script lang="jsx">
<script>
import { Carousel, CarouselItem } from '@opentiny/vue'
export default {
@ -18,6 +18,15 @@ export default {
</script>
<style scoped>
.tiny-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
font-size: 25px;
}
.carousel-item-demo:nth-child(2n) {
background-color: #fafafa;
}

9
examples/sites/demos/pc/app/carousel/carousel-events-composition-api.vue
View File

@ -24,6 +24,15 @@ function handleChange(value, oldValue) {
</script>
<style scoped>
.tiny-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
font-size: 25px;
}
.carousel-item-demo:nth-child(2n) {
background-color: #fafafa;
}

9
examples/sites/demos/pc/app/carousel/carousel-events.vue
View File

@ -34,6 +34,15 @@ export default {
</script>
<style scoped>
.tiny-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
font-size: 25px;
}
.carousel-item-demo:nth-child(2n) {
background-color: #fafafa;
}

11
examples/sites/demos/pc/app/carousel/close-loop-composition-api.vue
View File

@ -6,11 +6,20 @@
</tiny-carousel>
</template>
<script setup lang="jsx">
<script setup>
import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@opentiny/vue'
</script>
<style scoped>
.tiny-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
font-size: 25px;
}
.carousel-item-demo:nth-child(2n) {
background-color: #fafafa;
}

11
examples/sites/demos/pc/app/carousel/close-loop.vue
View File

@ -6,7 +6,7 @@
</tiny-carousel>
</template>
<script lang="jsx">
<script>
import { Carousel, CarouselItem } from '@opentiny/vue'
export default {
@ -18,6 +18,15 @@ export default {
</script>
<style scoped>
.tiny-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
font-size: 25px;
}
.carousel-item-demo:nth-child(2n) {
background-color: #fafafa;
}

11
examples/sites/demos/pc/app/carousel/custom-height-composition-api.vue
View File

@ -14,11 +14,20 @@
</div>
</template>
<script setup lang="jsx">
<script setup>
import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@opentiny/vue'
</script>
<style scoped>
.tiny-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
font-size: 25px;
}
.block {
margin: 20px 0;
}

11
examples/sites/demos/pc/app/carousel/custom-height.vue
View File

@ -14,7 +14,7 @@
</div>
</template>
<script lang="jsx">
<script>
import { Carousel, CarouselItem } from '@opentiny/vue'
export default {
@ -26,6 +26,15 @@ export default {
</script>
<style scoped>
.tiny-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
font-size: 25px;
}
.block {
margin: 20px 0;
}

11
examples/sites/demos/pc/app/carousel/indicator-trigger-composition-api.vue
View File

@ -6,11 +6,20 @@
</tiny-carousel>
</template>
<script setup lang="jsx">
<script setup>
import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@opentiny/vue'
</script>
<style scoped>
.tiny-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
font-size: 25px;
}
.carousel-item-demo:nth-child(2n) {
background-color: #fafafa;
}

11
examples/sites/demos/pc/app/carousel/indicator-trigger.vue
View File

@ -6,7 +6,7 @@
</tiny-carousel>
</template>
<script lang="jsx">
<script>
import { Carousel, CarouselItem } from '@opentiny/vue'
export default {
@ -18,6 +18,15 @@ export default {
</script>
<style scoped>
.tiny-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
font-size: 25px;
}
.carousel-item-demo:nth-child(2n) {
background-color: #fafafa;
}

11
examples/sites/demos/pc/app/carousel/initial-index-composition-api.vue
View File

@ -6,11 +6,20 @@
</tiny-carousel>
</template>
<script setup lang="jsx">
<script setup>
import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@opentiny/vue'
</script>
<style scoped>
.tiny-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
font-size: 25px;
}
.carousel-item-demo:nth-child(2n) {
background-color: #fafafa;
}

2
examples/sites/demos/pc/app/carousel/initial-index.vue
View File

@ -6,7 +6,7 @@
</tiny-carousel>
</template>
<script lang="jsx">
<script>
import { Carousel, CarouselItem } from '@opentiny/vue'
export default {

11
examples/sites/demos/pc/app/carousel/manual-play-composition-api.vue
View File

@ -19,7 +19,7 @@
</div>
</template>
<script setup lang="jsx">
<script setup>
import { ref } from 'vue'
import {
Carousel as TinyCarousel,
@ -50,6 +50,15 @@ function prev() {
</script>
<style scoped>
.tiny-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
font-size: 25px;
}
.carousel-item-demo:nth-child(2n) {
background-color: #fafafa;
}

11
examples/sites/demos/pc/app/carousel/manual-play.vue
View File

@ -19,7 +19,7 @@
</div>
</template>
<script lang="jsx">
<script>
import { Carousel, CarouselItem, Numeric, Button, ButtonGroup } from '@opentiny/vue'
export default {
@ -54,6 +54,15 @@ export default {
</script>
<style scoped>
.tiny-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
font-size: 25px;
}
.carousel-item-demo:nth-child(2n) {
background-color: #fafafa;
}

11
examples/sites/demos/pc/app/carousel/play-interval-composition-api.vue
View File

@ -6,11 +6,20 @@
</tiny-carousel>
</template>
<script setup lang="jsx">
<script setup>
import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@opentiny/vue'
</script>
<style scoped>
.tiny-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
font-size: 25px;
}
.carousel-item-demo:nth-child(2n) {
background-color: #fafafa;
}

11
examples/sites/demos/pc/app/carousel/play-interval.vue
View File

@ -6,7 +6,7 @@
</tiny-carousel>
</template>
<script lang="jsx">
<script>
import { Carousel, CarouselItem } from '@opentiny/vue'
export default {
@ -18,6 +18,15 @@ export default {
</script>
<style scoped>
.tiny-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
font-size: 25px;
}
.carousel-item-demo:nth-child(2n) {
background-color: #fafafa;
}

11
examples/sites/demos/pc/app/carousel/show-title-composition-api.vue
View File

@ -6,11 +6,20 @@
</tiny-carousel>
</template>
<script setup lang="jsx">
<script setup>
import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@opentiny/vue'
</script>
<style scoped>
.tiny-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
font-size: 25px;
}
.carousel-item-demo:nth-child(2n) {
background-color: #fafafa;
}

11
examples/sites/demos/pc/app/carousel/show-title.vue
View File

@ -6,7 +6,7 @@
</tiny-carousel>
</template>
<script lang="jsx">
<script>
import { Carousel, CarouselItem } from '@opentiny/vue'
export default {
@ -18,6 +18,15 @@ export default {
</script>
<style scoped>
.tiny-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
font-size: 25px;
}
.carousel-item-demo:nth-child(2n) {
background-color: #fafafa;
}

11
examples/sites/demos/pc/app/carousel/up-down-carousel-composition-api.vue
View File

@ -6,11 +6,20 @@
</tiny-carousel>
</template>
<script setup lang="jsx">
<script setup>
import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@opentiny/vue'
</script>
<style scoped>
.tiny-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
font-size: 25px;
}
.carousel-item-demo:nth-child(2n) {
background-color: #fafafa;
}

11
examples/sites/demos/pc/app/carousel/up-down-carousel.vue
View File

@ -6,7 +6,7 @@
</tiny-carousel>
</template>
<script lang="jsx">
<script>
import { Carousel, CarouselItem } from '@opentiny/vue'
export default {
@ -18,6 +18,15 @@ export default {
</script>
<style scoped>
.tiny-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
font-size: 25px;
}
.carousel-item-demo:nth-child(2n) {
background-color: #fafafa;
}