View Shadcn UI

Appearance

介绍 ​


本文档主要用于描述 ShadcnCarousel 组件的特性和用法。

用法 ​

查看代码
vue
<template>
    <ShadcnCarousel items="-" />
</template>

播放间隔 (interval) ​

查看代码
vue
<template>
    <ShadcnCarousel :interval="405" />
</template>

显示箭头 (show-arrows) ​

查看代码
vue
<template>
    <ShadcnCarousel showArrows />
    <ShadcnCarousel :showArrows="false" />
</template>

显示指示器 (show-indicators) ​

查看代码
vue
<template>
    <ShadcnCarousel :items="items" showIndicators />
    <ShadcnCarousel :items="items" :showIndicators="false" />
</template>

轮播方向 (direction) ​

查看代码
vue
<template>
    <ShadcnCarousel :items="items" direction="vertical" />
</template>

自动播放 (auto-play) ​

查看代码
vue
<template>
    <ShadcnCarousel :items="items" :auto-play="false" />
</template>

高度 (height) ​

查看代码
vue
<template>
    <ShadcnCarousel :items="items" height="200px" />
</template>

液态玻璃效果 (Glass) ​

查看代码
vue
<template>
    <ShadcnCarousel glass :items="items" />
</template>

<script setup lang="ts">
const items = [
  { src: 'https://picsum.photos/800/300?random=1', text: 'Slide 1' },
  { src: 'https://picsum.photos/800/300?random=2', text: 'Slide 2' },
  { src: 'https://picsum.photos/800/300?random=3', text: 'Slide 3' }
]
</script>