# 轮播表格 CarouselTable

## 使用场景

轮播展示表格类数据



## 预览

![轮播表格 CarouselTable](https://intranetproxy.alipay.com/skylark/lark/0/2020/png/111014/1580720765143-a434f8a4-a218-48fe-8844-e8f1965b836a.png) 



## 演示

<!--before-content-->

## 基础用法

```js
import { Text, config } from '@linkdesign/screen';

const { CarouselTable } = Text;
const { _cssPrefix } = config;

class App extends React.Component {
  render() {
    return (
      <div data-theme="dark" className={`${_cssPrefix}main-body`} style={{backgroundColor: "#1f3b6d", width: 450, height: 240}}>
        <CarouselTable
          sliderOptions={{
            slidesToShow: 5,
          }}
          header={{
            textStyle: {
              color: '#d3e2ff',
            },
          }}
          serialNumber={{
            widthRate: 0,
            textStyle: {
              color: '#d3e2ff',
            },
          }}
          column={[{
            key: 'area',
            alias: '地区',
            widthRate: 20,
            textStyle: {
              color: '#d3e2ff',
            },
          }, {
            key: 'pv',
            alias: '流量(pv)',
            widthRate: 20,
            textStyle: {
              color: '#d3e2ff',
            },
          }, {
            key: 'attribute',
            alias: '用户行为特征',
            widthRate: 53,
            textStyle: {
              color: '#d3e2ff',
            },
          }]}
          dataSource={[
            {
              "area": "中国",
              "pv": 688,
              "attribute": "xxxxxxxxxxxxxxxxxxx",
            },
            {
              "area": "美国",
              "pv": 688,
              "attribute": "xxxxxxxxxxxxxxxxxxx",
            },
            {
              "area": "俄罗斯",
              "pv": 688,
              "attribute": "xxxxxxxxxxxxxxxxxxx",
            },
            {
              "area": "德国",
              "pv": 688,
              "attribute": "xxxxxxxxxxxxxxxxxxx",
            },
            {
              "area": "吉尔吉斯斯坦",
              "pv": 688,
              "attribute": "xxxxxxxxxxxxxxxxxxx",
            },
            {
              "area": "英国",
              "pv": 688,
              "attribute": "xxxxxxxxxxxxxxxxxxx",
            },
            {
              "area": "日本",
              "pv": 688,
              "attribute": "xxxxxxxxxxxxxxxxxxx",
            },
            {
              "area": "南非",
              "pv": 688,
              "attribute": "xxxxxxxxxxxxxxxxxxx",
            },
            {
              "area": "巴西",
              "pv": 688,
              "attribute": "xxxxxxxxxxxxxxxxxxx",
            },
            {
              "area": "印度",
              "pv": 688,
              "attribute": "xxxxxxxxxxxxxxxxxxx",
            },
            {
              "area": "新加坡",
              "pv": 688,
              "attribute": "xxxxxxxxxxxxxxxxxxx",
            },
            {
              "area": "加拿大",
              "pv": 688,
              "attribute": "xxxxxxxxxxxxxxxxxxx",
            },
            {
              "area": "澳大利亚",
              "pv": 688,
              "attribute": "xxxxxxxxxxxxxxxxxxx",
            },
            {
              "area": "阿根廷",
              "pv": 688,
              "attribute": "xxxxxxxxxxxxxxxxxxx",
            },
            {
              "area": "西班牙",
              "pv": 688,
              "attribute": "xxxxxxxxxxxxxxxxxxx",
            },
          ]}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />);
```

<!--after-content-->



### API

| 参数名     | 说明                                                         | 必填 | 类型   | 默认值 | 备注                                                         |
| ---------- | ------------------------------------------------------------ | ---- | ------ | ------ | ------------------------------------------------------------ |
| className                         | 类名         | N    | String                                  | -                                                    |              |
| dataSource | 数据源 | Y | Array | - | |
| [universalStyle](#universalStyle) | 通用样式     | N    | Object                                  | -                                                    |              |
| [sliderOptions](#sliderOptions) | 轮播配置 | N | Object | - | |
| [headerOptions](#headerOptions) | 表头配置 | N | Object | - | |
| [serialNumberOptions](#serialNumberOptions) | 序列号配置 | N | Object | - | |
| [rowOptions](#rowOptions) | 行配置 | N | Object | - | |
| [column](#column) | 自定义列配置 | Y | Array | - | |
| emptyContent | 设置数据为空的时候的表格内容展现 | N | ReactNode | ```<div className={`${_cssPrefix}bar-chart-empty`}><span className={`${_cssPrefix}iconfont-ability`} dangerouslySetInnerHTML={{ __html: '&#xe836;' }} />暂无任何数据</div>``` | |

#### universalStyle

```typescript
// 通用样式
universalStyle?: {
  width?: string | number;
  height?: string | number;
  position?: {
    x: string | number;
    y: string | number;
  };
  rotation?: number;
  opacity?: number;
  backgroundColor?: string;
};
```

#### sliderOptions

```typescript
// 全局配置
sliderOptions?: {
  /**
     * 自定义传入的样式
     */
    className?: any;

    /**
     * 是否使用自适应高度
     */
    adaptiveHeight?: boolean;

    /**
     * 动效类型，默认是'slide'
     */
    animation?: string | boolean;

    /**
     * 是否显示箭头
     */
    arrows?: boolean;

    /**
     * 导航箭头大小 可选值: 'medium', 'large'
     */
    arrowSize?: 'medium' | 'large';

    /**
     * 导航箭头位置 可选值: 'inner', 'outer'
     */
    arrowPosition?: 'inner' | 'outer';

    /**
     * 导航箭头的方向 可选值: 'hoz', 'ver'
     */
    arrowDirection?: 'hoz' | 'ver';

    /**
     * 是否自动播放
     */
    autoplay?: boolean;

    /**
     * 自动播放的速度
     */
    autoplaySpeed?: number;

    /**
     * 向后箭头
     */
    nextArrow?: React.ReactElement<any>;

    /**
     * 向前箭头
     */
    prevArrow?: React.ReactElement<any>;

    /**
     * 是否启用居中模式
     */
    centerMode?: boolean;

    /**
     * 是否显示导航锚点
     */
    dots?: boolean;

    /**
     * 导航锚点的 CSS 类
     */
    dotsClass?: string;

    /**
     * 导航锚点位置
     */
    dotsDirection?: 'hoz' | 'ver';

    /**
     * 自定义导航锚点
     */
    dotRender?: () => void;

    /**
     * 是否可拖拽
     */
    draggable?: boolean;

    /**
     * 是否使用无穷循环模式
     */
    infinite?: boolean;

    /**
     * 初始被激活的轮播图
     */
    defaultActiveIndex?: number;

    /**
     * 是否启用懒加载
     */
    lazyLoad?: boolean;

    /**
     * 轮播方向
     */
    slideDirection?: 'hoz' | 'ver';

    /**
     * 同时展示的图片数量
     */
    slidesToShow?: number;

    /**
     * 同时滑动的图片数量
     */
    slidesToScroll?: number;

    /**
     * 轮播速度
     */
    speed?: number;

    /**
     * 跳转到指定的轮播图（受控）
     */
    activeIndex?: number;

    /**
     * 锚点导航触发方式
     */
    triggerType?: 'click' | 'hover';

    /**
     * 轮播切换的回调函数
     */
    onChange?: (index: number) => void;

    /**
     * 自定义传入的class
     */
    style?: React.CSSProperties;

    /**
     * Side padding when in center mode (px or %); 展示部分为center，pading会产生前后预览
     */
    centerPadding?: string;

    /**
     * CSS3 Animation Easing,默认‘ease’
     */
    cssEase?: string;

    /**
     * 多图轮播时，点击选中后自动居中
     */
    focusOnSelect?: boolean;
};
```

#### headerOptions

```typescript
interface IHeaderOptions extends ITitle {
  heightRate?: number; // 行高占比
}

// 表头配置
headerOptions?: IHeaderOptions;
```

#### serialNumberOptions

```typescript
interface ISerialNumberOptions extends ITitle {
  widthRate: number; // 列宽占比
  radiusRate: number; // 半径占比
}

// 序列号配置
serialNumberOptions?: ISerialNumberOptions;
```

#### rowOptions

```typescript
// 行配置
rowOptions?: {
  oddBackgroundColor?: string; // 奇行背景色
  evenBackgroundColor?: string; // 偶行背景色
};
```

#### column

```typescript
interface IColumn extends ITitle  {
  key: string; // 字段名
  alias: React.ReactNode; // 显示名
  widthRate: number; // 列宽占比
  cell?: (value: any, index: number, record: object) => React.ReactNode; // 自定义渲染逻辑
}

// 自定义列配置
column: IColumn[];
```


## TODO List

- [ ] ......