轮播图组件。
import React, {Component} from 'react';
import {Carousel} from 'hana-ui';
/**
* @en
* Base
*
* A base `Carousel` example.
*
* @cn
* 基础
*
* 一个基本的旋转木马组件。
*/
export default class ExampleBase extends Component {
state = {
// index: 0
}
render() {
const width = 600;
const height = 300;
const styles = {
width,
height,
display: 'block',
marginBottom: 64
};
const element = [
<div key={1}><img src="https://mdn.mozillademos.org/files/5397/rhino.jpg" alt="" style={styles} /></div>,
<div key={2}><img style={styles} src="https://t4.kn3.net/taringa/5/C/0/6/C/9/DogeDogOficial/59C.jpg" alt="" /></div>,
<div key={3}>3</div>
];
return (
<div style={{background: '#fff', padding: 20}}>
<Carousel width={width} height={height}>
{element}
</Carousel>
<br />
<Carousel width={width} height={height} vertical>
{element}
</Carousel>
<br />
<Carousel width={width} height={height} mode="slide" autoplay>
{element}
</Carousel>
<br />
<Carousel width={width} height={height} mode="slide" vertical>
{element}
</Carousel>
</div>
);
}
}
一个基本的旋转木马组件。
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
style | object | 旋转木马的样式 | |
currentIndex | number | 0 | 旋转木马的当前索引 |
children | node | 旋转木马的子节点 | |
className | string | 旋转木马的class |
|
height | number | 200 | 旋转木马的高度 |
width | number | 400 | 旋转木马的宽度 |
mode | enum: 'fade' 'slide' |
'fade' | 旋转木马的模式 |
vertical | bool | false | 旋转木马是否为垂直方向 |
transitionTime | number | 400 | 旋转木马切换时的动画时间 |
onChange | function | () => {} | 旋转木马切换时的事件 |
autoplay | bool | false | 是否自动播放 |
autoplayTime | number | 3000 | 自动播放间隔时间 |
未在文档中说明的属性将会被自动加到根元素或form元素上。