简体中文

旋转木马

轮播图组件。

基础
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元素上。