代码演示
如何引入
jsx
import { Carousel } from '@kousum/semi-ui-vue';基本用法
基本用法
demoApp.vue
demo.tsx
tsconfig.json
Import Map
xxxxxxxxxx11
7
60
import { Carousel, Typography, Space } from '@kousum/semi-ui-vue';export default () => { const { Title, Paragraph } = Typography; const style = { width: '100%', height: '400px', }; const titleStyle = { position: 'absolute', top: '100px', left: '100px', color: '#1C1F23' }; const colorStyle = { color: '#1C1F23' }; const renderLogo = () => { return ( <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: '87px', height: '31px' }} /> ); }; const imgList = [Show Error
Auto Save
主题切换
默认定义了三种主题： primary、light、dark
demoApp.vue
demo.tsx
tsconfig.json
Import Map
xxxxxxxxxx11
7
75
import { Carousel, RadioGroup, Radio, Space, Typography } from '@kousum/semi-ui-vue';import { defineComponent, ref } from 'vue';const { Title, Paragraph } = Typography;const Demo = defineComponent(()=>{ const theme = ref('primary'); const style = { width: '100%', height: '400px', }; const titleStyle = { position: 'absolute', top: '100px', left: '100px' }; const colorStyle = { color: '#1C1F23' }; const renderLogo = () => { return ( <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: '87px', height: '31px' }} /> );Show Error
Auto Save
指示器
指示器可以调节类型、位置、尺寸
类型： dot、line、columnar
位置： left、center、right
尺寸： small、medium
demoApp.vue
demo.tsx
tsconfig.json
Import Map
xxxxxxxxxx11
7
96
import { Carousel, RadioGroup, Radio, Space, Typography } from '@kousum/semi-ui-vue';import { defineComponent, ref } from 'vue';const { Title, Paragraph } = Typography;const Demo = defineComponent(()=>{ const size = ref('small'); const type = ref('dot'); const position = ref('left'); const style = { width: '100%', height: '400px', }; const titleStyle = { position: 'absolute', top: '100px', left: '100px' }; const colorStyle = { color: '#1C1F23' }; const renderLogo = () => { return (Show Error
Auto Save
箭头
通过 showArrow 属性控制箭头是否可见
如果箭头可见，通过 arrowType 属性控制箭头展示的时机
demoApp.vue
demo.tsx
tsconfig.json
Import Map
xxxxxxxxxx11
7
86
import { Carousel, RadioGroup, Radio, Space, Typography } from '@kousum/semi-ui-vue';import { defineComponent, ref } from 'vue';const { Title, Paragraph } = Typography;const Demo = defineComponent(() => { const arrowType = ref('always'); const show = ref(true); const style = { width: '100%', height: '400px', }; const titleStyle = { position: 'absolute', top: '100px', left: '100px' }; const colorStyle = { color: '#1C1F23' }; const renderLogo = () => { return (Show Error
Auto Save
定制箭头
通过 arrowProps 属性定制箭头样式和点击事件
demoApp.vue
demo.tsx
tsconfig.json
Import Map
xxxxxxxxxx11
7
76
import { Carousel, Typography, Space } from '@kousum/semi-ui-vue';import { IconArrowLeft, IconArrowRight } from "@kousum/semi-icons-vue";import { defineComponent } from 'vue';const CarouselDemo = defineComponent(()=>{ const imgList = [ 'https://lf3-static.bytednsdoc.com/obj/eden-cn/hjeh7pldnulm/SemiDocs/bg-1.png', 'https://lf3-static.bytednsdoc.com/obj/eden-cn/hjeh7pldnulm/SemiDocs/bg-2.png', 'https://lf3-static.bytednsdoc.com/obj/eden-cn/hjeh7pldnulm/SemiDocs/bg-3.png', ]; const textList = [ ['Semi 设计管理系统', '从 Semi Design，到 Any Design', '快速定制你的设计系统，并应用在设计稿和代码中'], ['Semi 物料市场', '面向业务场景的定制化组件，支持线上预览和调试', '内容由 Semi Design 用户共建'], ['Semi 设计/代码模板', '高效的 Design2Code 设计稿转代码', '海量 Figma 设计模板一键转为真实前端代码'], ]; const arrowProps = { leftArrow: { children: <IconArrowLeft size='large' /> }, rightArrow: { children: <IconArrowRight size='large' /> }, }; function renderLogo() { return ( <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: '87px', height: '31px' }} /> ); };Show Error
Auto Save
播放参数
通过给 autoPlay 传入参数 interval 控制两张图片之间的时间间隔，传入 hoverToPause 控制鼠标放置在图片上时是否停止播放
demoApp.vue
demo.tsx
tsconfig.json
Import Map
xxxxxxxxxx11
7
61
import { Carousel, Typography, Space } from '@kousum/semi-ui-vue';const { Title, Paragraph } = Typography;export default () => { const style = { width: '100%', height: '400px', }; const titleStyle = { position: 'absolute', top: '100px', left: '100px' }; const colorStyle = { color: '#1C1F23' }; const renderLogo = () => { return ( <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: '87px', height: '31px' }}/> ); }; const imgList = [ 'https://lf3-static.bytednsdoc.com/obj/eden-cn/hjeh7pldnulm/SemiDocs/bg-1.png',Show Error
Auto Save
动画效果与切换速度
通过给 animation 属性控制动画，可选值有 fade，slide
通过给 speed 属性控制两张图片之间的切换时间，单位为ms
demoApp.vue
demo.tsx
tsconfig.json
Import Map
xxxxxxxxxx11
7
62
import { Carousel, Typography, Space } from '@kousum/semi-ui-vue';export default () => { const { Title, Paragraph } = Typography; const style = { width: '100%', height: '400px', }; const titleStyle = { position: 'absolute', top: '100px', left: '100px' }; const colorStyle = { color: '#1C1F23' }; const renderLogo = () => { return ( <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: '87px', height: '31px' }}/> ); }; const imgList = [Show Error
Auto Save
受控的轮播图
demoApp.vue
demo.tsx
tsconfig.json
Import Map
xxxxxxxxxx11
7
76
import { Carousel, Space, Typography } from '@kousum/semi-ui-vue';import { defineComponent, reactive } from 'vue';const CarouselDemo = defineComponent(() => { const imgList = [ 'https://lf3-static.bytednsdoc.com/obj/eden-cn/hjeh7pldnulm/SemiDocs/bg-1.png', 'https://lf3-static.bytednsdoc.com/obj/eden-cn/hjeh7pldnulm/SemiDocs/bg-2.png', 'https://lf3-static.bytednsdoc.com/obj/eden-cn/hjeh7pldnulm/SemiDocs/bg-3.png', ]; const textList = [ ['Semi 设计管理系统', '从 Semi Design，到 Any Design', '快速定制你的设计系统，并应用在设计稿和代码中'], ['Semi 物料市场', '面向业务场景的定制化组件，支持线上预览和调试', '内容由 Semi Design 用户共建'], ['Semi 设计/代码模板', '高效的 Design2Code 设计稿转代码', '海量 Figma 设计模板一键转为真实前端代码'], ]; const state = reactive({ activeIndex: 0, }); function renderLogo() { return ( <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: '87px', height: '31px' }} /> ); }; function onChange(activeIndex) {Show Error
Auto Save
API 参考
Carousel
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| activeIndex | 受控属性 | number | - | 2.10.0 |
| animation | 切换动画，可选值：fade，slide | "fade" | "slide" | "slide" | 2.10.0 |
| arrowProps | 箭头参数，用于自定义箭头样式和点击事件 | () => { leftArrow: ArrowButton, rightArrow: ArrowButton } | - | 2.10.0 |
| autoPlay | 是否自动循环展示，或者传入 { interval: 自动切换时间间隔(默认: 2000), hoverToPause: 鼠标悬浮时是否暂停自动切换(默认: true) } | boolean ｜ { interval?: number, hoverToPause?: boolean } | true | 2.10.0 |
| className | 样式类名 | string | - | 2.10.0 |
| defaultActiveIndex | 初始化时默认展示的索引 | number | 0 | 2.10.0 |
| indicatorPosition | 指示器位置，可选值有： left、center、right | "left" | "center" | "right" | "center" | 2.10.0 |
| indicatorSize | 指示器尺寸，可选值有： small、medium | "small" | "medium" | "small" | 2.10.0 |
| indicatorType | 指示器类型，可选值有： dot、line、columnar | "dot" | "line" | "columnar" | "dot" | 2.10.0 |
| theme | 指示器和箭头主题，可选值有： primary、light、dark | "primary" | "light" | "dark" | "light" | 2.10.0 |
| onChange | 图片切换时的回调 | (index: number, preIndex: number) => void | - | 2.10.0 |
| arrowType | 箭头展示时机，可选值有： hover、always | "hover" | "always" | always | 2.10.0 |
| showArrow | 是否展示箭头 | boolean | true | 2.10.0 |
| showIndicator | 是否展示指示器 | boolean | true | 2.10.0 |
| slideDirection | 动画效果为slide时的滑动的方向，可选值有： left、right | "left" | "right" | "left" | 2.10.0 |
| speed | 切换速度，单位ms | number | 300 | 2.10.0 |
| style | 内联样式 | CSSProperties | - | 2.10.0 |
| trigger | 指示器触发的时机，可选值有： hover、click | "hover" | "click" | - | 2.10.0 |
ArrowButton
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| props | 箭头div上的可传参数，包括style, onClick事件等 | React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> | - | 2.10.0 |
| children | 箭头自定义Icon | React.ReactNode | - | 2.10.0 |
Methods
绑定在组件实例上的方法，可以通过 ref 调用实现某些特殊交互
| 方法 | 说明 | 版本 |
|---|---|---|
| play() | 播放 | 2.10.0 |
| stop() | 停止播放 | 2.10.0 |
| goTo(targetIndex) | 切换到指定位置 | 2.10.0 |
| prev() | 切换到上一位置 | 2.10.0 |
| next() | 切换到下一位置 | 2.10.0 |