Casual UI - Vue

基础使用

要来一些苹果吗？ 
<script setup>
import { ref } from 'vue'

const current = ref(0)
</script>

<template>
  <c-carousel v-model="current">
    <c-carousel-slider>
      <div class="item">
        <div
          i-openmoji-red-apple
          class="icon"
        />
        要来一些苹果吗？
      </div>
    </c-carousel-slider>
    <c-carousel-slider>
      <div class="item">
        <div
          i-openmoji-banana
          class="icon"
        />
        要来一些香蕉吗？
      </div>
    </c-carousel-slider>
    <c-carousel-slider>
      <div class="item">
        <div
          class="icon"
          i-openmoji-grapes
        />
        要来一些葡萄吗？
      </div>
    </c-carousel-slider>
  </c-carousel>
</template>

<style scoped>
.item {
  font-size: 32px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.item .icon {
  font-size: 100px;
}
</style>
点击展开/收起代码
点击打开交互式编辑器

无限循环

要来一些苹果吗？ 
<script setup>
import { ref } from 'vue'

const current = ref(0)
</script>

<template>
  <c-carousel
    v-model="current"
    infinity
  >
    <c-carousel-slider>
      <div class="item">
        <div
          i-openmoji-red-apple
          class="icon"
        />
        要来一些苹果吗？
      </div>
    </c-carousel-slider>
    <c-carousel-slider>
      <div class="item">
        <div
          i-openmoji-banana
          class="icon"
        />
        要来一些香蕉吗？
      </div>
    </c-carousel-slider>
    <c-carousel-slider>
      <div class="item">
        <div
          class="icon"
          i-openmoji-grapes
        />
        要来一些葡萄吗？
      </div>
    </c-carousel-slider>
  </c-carousel>
</template>

<style scoped>
.item {
  font-size: 32px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.item .icon {
  font-size: 100px;
}
</style>
点击展开/收起代码
点击打开交互式编辑器

箭头展示时机

要来一些苹果吗？ 
<script setup>
import { ref } from 'vue'

const current = ref(0)
</script>

<template>
  <c-carousel
    v-model="current"
    arrow-timing="hover"
  >
    <c-carousel-slider>
      <div class="item">
        <div
          i-openmoji-red-apple
          class="icon"
        />
        要来一些苹果吗？
      </div>
    </c-carousel-slider>
    <c-carousel-slider>
      <div class="item">
        <div
          i-openmoji-banana
          class="icon"
        />
        要来一些香蕉吗？
      </div>
    </c-carousel-slider>
    <c-carousel-slider>
      <div class="item">
        <div
          class="icon"
          i-openmoji-grapes
        />
        要来一些葡萄吗？
      </div>
    </c-carousel-slider>
  </c-carousel>
</template>

<style scoped>
.item {
  font-size: 32px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.item .icon {
  font-size: 100px;
}
</style>
点击展开/收起代码
点击打开交互式编辑器

主题

primary
secondary
warning
negative
要来一些苹果吗？ 
<script setup>
import { ref } from 'vue'

const current = ref(0)
const theme = ref('primary')
const themeOptions = [
  { label: 'primary', value: 'primary' },
  { label: 'secondary', value: 'secondary' },
  { label: 'warning', value: 'warning' },
  { label: 'negative', value: 'negative' },
]
</script>

<template>
  <c-radio-group
    v-model="theme"
    :options="themeOptions"
  />
  <c-carousel
    v-model="current"
    :theme="theme"
  >
    <c-carousel-slider>
      <div class="item">
        <div
          i-openmoji-red-apple
          class="icon"
        />
        要来一些苹果吗？
      </div>
    </c-carousel-slider>
    <c-carousel-slider>
      <div class="item">
        <div
          i-openmoji-banana
          class="icon"
        />
        要来一些香蕉吗？
      </div>
    </c-carousel-slider>
    <c-carousel-slider>
      <div class="item">
        <div
          class="icon"
          i-openmoji-grapes
        />
        要来一些葡萄吗？
      </div>
    </c-carousel-slider>
  </c-carousel>
</template>

<style scoped>
.item {
  font-size: 32px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.item .icon {
  font-size: 100px;
}
</style>
点击展开/收起代码
点击打开交互式编辑器

自定义箭头控制器

要来一些苹果吗？ 
<script setup>
import { ref } from 'vue'

const current = ref(0)
</script>

<template>
  <c-carousel v-model="current">
    <template #control-prev>
      <c-button
        icon
        flat
        style="font-size:48px;"
      >
        <div i-mdi-page-previous-outline />
      </c-button>
    </template>
    <template #control-next>
      <c-button
        icon
        flat
        style="font-size:48px;"
      >
        <div i-mdi-page-next-outline />
      </c-button>
    </template>
    <c-carousel-slider>
      <div class="item">
        <div
          i-openmoji-red-apple
          class="icon"
        />
        要来一些苹果吗？
      </div>
    </c-carousel-slider>
    <c-carousel-slider>
      <div class="item">
        <div
          i-openmoji-banana
          class="icon"
        />
        要来一些香蕉吗？
      </div>
    </c-carousel-slider>
    <c-carousel-slider>
      <div class="item">
        <div
          class="icon"
          i-openmoji-grapes
        />
        要来一些葡萄吗？
      </div>
    </c-carousel-slider>
  </c-carousel>
</template>

<style scoped>
.item {
  font-size: 32px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.item .icon {
  font-size: 100px;
}
</style>
点击展开/收起代码
点击打开交互式编辑器

自动播放

要来一些苹果吗？ 
<script setup>
import { ref } from 'vue'

const current = ref(0)
</script>

<template>
  <c-carousel
    v-model="current"
    :interval="5000"
    infinity
  >
    <c-carousel-slider>
      <div class="item">
        <div
          i-openmoji-red-apple
          class="icon"
        />
        要来一些苹果吗？
      </div>
    </c-carousel-slider>
    <c-carousel-slider>
      <div class="item">
        <div
          i-openmoji-banana
          class="icon"
        />
        要来一些香蕉吗？
      </div>
    </c-carousel-slider>
    <c-carousel-slider>
      <div class="item">
        <div
          class="icon"
          i-openmoji-grapes
        />
        要来一些葡萄吗？
      </div>
    </c-carousel-slider>
  </c-carousel>
</template>

<style scoped>
.item {
  font-size: 32px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.item .icon {
  font-size: 100px;
}
</style>
点击展开/收起代码
点击打开交互式编辑器

纵向

要来一些苹果吗？ 
<script setup>
import { ref } from 'vue'

const current = ref(0)
</script>

<template>
  <c-carousel
    v-model="current"
    vertical
  >
    <c-carousel-slider>
      <div class="item">
        <div
          i-openmoji-red-apple
          class="icon"
        />
        要来一些苹果吗？
      </div>
    </c-carousel-slider>
    <c-carousel-slider>
      <div class="item">
        <div
          i-openmoji-banana
          class="icon"
        />
        要来一些香蕉吗？
      </div>
    </c-carousel-slider>
    <c-carousel-slider>
      <div class="item">
        <div
          class="icon"
          i-openmoji-grapes
        />
        要来一些葡萄吗？
      </div>
    </c-carousel-slider>
  </c-carousel>
</template>

<style scoped>
.item {
  font-size: 32px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.item .icon {
  font-size: 100px;
}
</style>
点击展开/收起代码
点击打开交互式编辑器

指示器位置

横向位置：
start
center
end
纵向位置：
start
center
end
排列方向：
row
row-reverse
column
column-reverse
要来一些苹果吗？ 
<script setup>
import { ref } from 'vue'

const current = ref(0)
const indicatorsPositionHorizontal = ref('center')
const indicatorsPositionVertical = ref('end')
const indicatorsAlignDirection = ref('row')

const positionOptions = [
  { label: 'start', value: 'start' },
  { label: 'center', value: 'center' },
  { label: 'end', value: 'end' },
]

const alignOptions = [
  { label: 'row', value: 'row' },
  { label: 'row-reverse', value: 'row-reverse' },
  { label: 'column', value: 'column' },
  { label: 'column-reverse', value: 'column-reverse' },
]
</script>

<template>
  <div>
    <b>横向位置：</b>
    <c-radio-group
      v-model="indicatorsPositionHorizontal"
      :options="positionOptions"
    />
  </div>
  <div>
    <b>纵向位置：</b>
    <c-radio-group
      v-model="indicatorsPositionVertical"
      :options="positionOptions"
    />
  </div>
  <div>
    <b>排列方向：</b>
    <c-radio-group
      v-model="indicatorsAlignDirection"
      :options="alignOptions"
    />
  </div>
  <hr>
  <c-carousel
    v-model="current"
    v-bind="{
      indicatorsPositionHorizontal,
      indicatorsPositionVertical,
      indicatorsAlignDirection,
    }"
  >
    <c-carousel-slider>
      <div class="item">
        <div
          i-openmoji-red-apple
          class="icon"
        />
        要来一些苹果吗？
      </div>
    </c-carousel-slider>
    <c-carousel-slider>
      <div class="item">
        <div
          i-openmoji-banana
          class="icon"
        />
        要来一些香蕉吗？
      </div>
    </c-carousel-slider>
    <c-carousel-slider>
      <div class="item">
        <div
          class="icon"
          i-openmoji-grapes
        />
        要来一些葡萄吗？
      </div>
    </c-carousel-slider>
  </c-carousel>
</template>

<style scoped>
.item {
  font-size: 32px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.item .icon {
  font-size: 100px;
}
</style>
点击展开/收起代码
点击打开交互式编辑器

CCarousel API

Props
Slots
Events
modelValue
number
默认值  0

当前激活项下标，可使用v-model绑定

height
string
默认值  '300px'

轮播容器高度

theme
"primary" | "secondary" | "warning" | "negative"
默认值  'primary'

轮播主题，该值会指示器以及箭头控制器主题色

interval
number
默认值  0

自动播放时间间隔，单位为毫秒. 设置大于0时会开启自动播放

indicatorsPositionHorizontal
"start" | "center" | "end"
默认值  'center'

指示器水平方向的位置

indicatorsPositionVertical
"start" | "center" | "end"
默认值  'end'

指示器垂直方向的位置

indicatorsAlignDirection
"row" | "column" | "row-reverse" | "column-reverse"
默认值  'row'

指示器排列方式

vertical
boolean
默认值  false

是否为纵向过渡

infinity
boolean
默认值  false

是否为循环播放

arrowTiming
"always" | "hover" | "never"
默认值  'always'

箭头控制器展示时机

pauseOnHover
boolean
默认值  true

是否在鼠标悬停时暂停过渡倒计时

CCarouselSlider API

Props
Slots
Events
No Data