@linkdesign/screen

# 轮播表格 CarouselTable ## 使用场景轮播展示表格类数据 ## 预览 ![轮播表格 CarouselTable](https://intranetproxy.alipay.com/skylark/lark/0/2020/png/111014/1580720765143-a434f8a4-a218-48fe-8844-e8f1965b836a.png) ## 演示  ## 基础用法 ```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 />); ```  ### 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: '' }} />暂无任何数据</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 - [ ] ......