import React, { useState } from 'react';
import { Radio, RadioGroup, Button } from '@douyinfe/semi-ui';
import { IconArrowLeft, IconArrowRight } from "@douyinfe/semi-icons";
import Carousel from '../index';
export default {
title: 'Carousel',
}
const style = {
width: '600px',
height: '240px',
};
const contentPinkStyle = {
display:'flex',
justifyContent: 'center',
alignItems: 'center',
color: '#fff',
background: 'lightpink',
};
const contentBlueStyle = {
display:'flex',
justifyContent: 'center',
alignItems: 'center',
color: '#fff',
background: 'lightBlue',
};
const radioTitleStyle = {
marginRight: 20
}
export const BasicUsage = () => (
1
2
3
4
5
);
BasicUsage.story = {
name: 'basic usage',
};
// 主题切换
export const theme = () => {
const [theme, setTheme] = useState('primary');
return (
主题
setTheme(e.target.value)} value={theme}>
primary
light
dark
1
2
3
4
5
);
}
theme.story = {
name: 'theme',
};
// 指示器大小、类型、位置
export const indicatorUsage = () => {
const [size, setSize] = useState('small');
const [type, setType] = useState('dot');
const [position, setPosition] = useState('left');
return (
类型
setType(e.target.value)} value={type}>
dot
line
columnar
位置
setPosition(e.target.value)} value={position}>
left
center
right
尺寸
setSize(e.target.value)} value={size}>
small
medium
1
2
3
4
5
);
}
indicatorUsage.story = {
name: 'indicator usage',
};
// 箭头主题、显示时机
export const arrowShow = () => {
const [arrowType, setArrowTypew] = useState('always');
const [show, setShow] = useState(true);
return (
展示箭头
setShow(e.target.value)} value={show}>
展示
不展示
展示时机
setArrowTypew(e.target.value)} value={arrowType}>
always
hover
1
2
3
4
5
)
};
arrowShow.story = {
name: 'arrow show',
};
// 箭头参数
export const customArrow = () => {
const arrowProps = {
leftArrow: { children: },
rightArrow: { children: },
};
return (
);
}
customArrow.story = {
name: 'custom arrow',
};
// 自动播放参数
export const autoPlayExample = () => (
);
autoPlayExample.story = {
name: 'auto play example',
};
// 动画效果与速度
export const animationUsage = () => {
const [animation, setAnimation] = useState('slide');
const [speed, setSpeed] = useState(1000);
return (
动画效果
setAnimation(e.target.value)} value={animation}>
slide
fade
切换速度
setSpeed(e.target.value)} value={speed}>
1000ms
2000ms
3000ms
1
2
3
4
5
)
};
animationUsage.story = {
name: 'animation usage',
};
// 受控的轮播图
class ControlledDemo extends React.Component {
constructor(props) {
super(props);
this.ref = React.createRef();
this.handleNext=this.handleNext.bind(this);
this.handlePrev=this.handlePrev.bind(this);
this.handleGoTo=this.handleGoTo.bind(this);
this.handlePlay=this.handlePlay.bind(this);
this.handleStop=this.handleStop.bind(this);
this.state = {
activeIndex: 0,
};
}
handleNext(){
this.ref.current.next();
}
handlePrev(){
this.ref.current.prev();
}
handleGoTo(){
this.ref.current.goTo(2);
}
handlePlay(){
this.ref.current.play();
}
handleStop(){
this.ref.current.stop();
}
onChange(activeIndex){
this.setState({ activeIndex });
}
render() {
return (
1
2
3
4
5
)
}
}
export const controlledUsage = () => ;
controlledUsage.story = {
name: 'controlled usage',
};
class RefDemo extends React.Component {
constructor(props) {
super(props);
this.ref = React.createRef();
this.handleNext=this.handleNext.bind(this);
this.handlePrev=this.handlePrev.bind(this);
this.handleGoTo=this.handleGoTo.bind(this);
this.handlePlay=this.handlePlay.bind(this);
this.handleStop=this.handleStop.bind(this);
}
handleNext(){
this.ref.current.next();
}
handlePrev(){
this.ref.current.prev();
}
handleGoTo(){
this.ref.current.goTo(2);
}
handlePlay(){
this.ref.current.play();
}
handleStop(){
this.ref.current.stop();
}
render() {
return (
1
2
3
4
5
)
}
}
export const refUsage = () => ;
refUsage.story = {
name: 'ref usage',
};
export const slideDirection = () => (
index0
index1
index2
);
slideDirection.story = {
name: 'slide direction',
};