@linkdesign/screen

--- title: API order: 3 --- <br/> | 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 | |---------------------------------|--------------------------------|------|-----------------------------------------------------------|--------------|------| | className | 类名 | N | String | - | | | dataSource | 数据源 | Y | Array | - | | | title | 标题 | N | React.ReactNode | - | | | global | 全局样式 | N | { <br/>textStyle?: React.CSSProperties; // 文本样式<br/>} | - | - | | [sliderOptions](#slideroptions) | 轮播配置 | N | Object | - | | | [headerOptions](#headeroptions) | 表头配置 | N | Object | - | | | titleOptions | 标题配置 | N | [ITitle](../?demo=Text_Title) | - | | | [rowOptions](#rowoptions) | 行配置 | N | Object | - | | | [column](#column) | 自定义列配置 | Y | Array | - | | | emptyContent | 设置数据为空的时候的表格内容展现 | N | ReactNode | 暂无任何数据 | | ### slideroptions ```typescript interface SliderProps { /** * 自定义传入的样式 */ 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'; /** * 自定义导航锚点 */ dotsRender?: (index: number, current: number) => 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 [ITitle](../?demo=Text_Title) ```typescript interface IHeaderOptions extends ITitle { /** * 行高占比 */ heightRate?: number; } ``` ### rowoptions ``` typescript { oddBackgroundColor?: string; // 奇行背景色 evenBackgroundColor?: string; // 偶行背景色 primaryKey?: string; // 主键id } ``` ### column [ITitle](../?demo=Text_Title) ``` typescript interface IColumn extends ITitle { /** * 字段名 * 内置 $index 序号 */ key: string; /** * 类型 */ type?: 'data' | 'time'; /** * 时间格式同 momentjs * 默认：'HH:mm:ss' */ format?: string; /** * 显示名 */ alias?: React.ReactNode; /** * 列宽占比 */ widthRate: number; /** * 自定义渲染逻辑 * * @param value 当前值 * @param index 索引 * @param record 当前数据对象 * @memberof IColumn */ cell?: (value: any, index: number, record: any) => React.ReactNode; } ```