0.1.6 • Published 4 years ago
whale-docgen-render v0.1.6
whale-docgen-render
财鲸组件文档渲染
安装方法
$ tnpm install whale-docgen-render --saveAPI
DocStructureCollapse
折叠样式文档组件。
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| props (必填) | 需要渲染的组件字段 | WmProps |
DocStructureTypesCollapse
折叠样式文档组件。
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| types (必填) | 需要渲染的组件字段 | WmPropItemType[] |
DocStructureTable
表格样式文档组件。
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| props (必填) | 需要渲染的组件字段 | WmProps | ||
| prefix | 样式类名的品牌前缀 | string | ||
| size | 尺寸 small为紧凑模式 | "small" | "medium" | "small", "medium" | |
| className | 自定义类名 | string | ||
| style | 自定义内联样式 | CSSProperties | ||
| columns | any[] | |||
| tableLayout | 表格元素的 table-layout 属性,设为 fixed 表示内容不会影响列的布局 | "fixed" | "auto" | "fixed", "auto" | |
| tableWidth | 表格的总长度,可以这么用:设置表格总长度 、设置部分列的宽度,这样表格会按照剩余空间大小,自动其他列分配宽度 | number | ||
| dataSource | 表格展示的数据源 | any[] | ||
| onRowClick | 点击表格每一行触发的事件 | (record: any, index: number, e: MouseEvent<Element, MouseEvent>) => void | ||
| onRowMouseEnter | 悬浮在表格每一行的时候触发的事件 | (record: any, index: number, e: MouseEvent<Element, MouseEvent>) => void | ||
| onRowMouseLeave | 离开表格每一行的时候触发的事件 | (record: any, index: number, e: MouseEvent<Element, MouseEvent>) => void | ||
| onSort | 点击列排序触发的事件 | (dataIndex: string, order: string) => void | ||
| onFilter | 点击过滤确认按钮触发的事件 | (filterParams: any) => void | ||
| onResizeChange | 重设列尺寸的时候触发的事件 | (dataIndex: string, value: number) => void | ||
| getRowProps | 设置每一行的属性,如果返回值和其他针对行操作的属性冲突则无效。 | (record: any, index: number) => any | ||
| rowProps | (record: any, index: number) => any | |||
| getCellProps | 设置单元格的属性,通过该属性可以进行合并单元格 | (rowIndex: number, colIndex: number, dataIndex: string, record: any) => any | ||
| cellProps | (rowIndex: number, colIndex: number, dataIndex: string, record: any) => any | |||
| hasBorder | 表格是否具有边框 | boolean | ||
| hasHeader | 表格是否具有头部 | boolean | ||
| isZebra | 表格是否是斑马线 | boolean | ||
| loading | 表格是否在加载中 | boolean | ||
| loadingComponent | 自定义 Loading 组件 请务必传递 props, 使用方式: loadingComponent={props => <Loading {...props}/>} | (props: LoadingProps) => ReactNode | ||
| filterParams | 当前过滤的的keys,使用此属性可以控制表格的头部的过滤选项中哪个菜单被选中,格式为 {dataIndex: {selectedKeys:[]}} 示例: 假设要控制dataIndex为id的列的过滤菜单中key为one的菜单项选中 `<Table filterParams={{id: {selectedKeys: ['one']}}}/>` | { [propName: string]: any; } | ||
| sort | 当前排序的字段,使用此属性可以控制表格的字段的排序,格式为{dataIndex: 'asc'} | { [propName: string]: any; } | ||
| sortIcons | 自定义排序按钮,例如上下排布的: `{desc: <Icon style={{top: '6px', left: '4px'}} type={'arrow-down'} size="small" />, asc: <Icon style={{top: '-6px', left: '4px'}} type={'arrow-up'} size="small" />}` | { desc?: ReactNode; asc?: ReactNode; } | ||
| locale | 自定义国际化文案对象 | { ok: string; reset: string; empty: string; asc: string; desc: string; expanded: string; folded: string; filter: string; selectAll: string; } | ||
| emptyContent | 设置数据为空的时候的表格内容展现 | ReactNode | ||
| primaryKey | dataSource当中数据的主键,如果给定的数据源中的属性不包含该主键,会造成选择状态全部选中 | string | ||
| expandedRowRender | 额外渲染行的渲染函数 | (record: any, index: number) => ReactElement<any, string | JSXElementConstructor<any>> | ||
| rowExpandable | (record: any) => boolean | |||
| expandedRowIndent | 额外渲染行的缩进 | any[] | ||
| openRowKeys | 默认情况下展开的渲染行或者Tree, 传入此属性为受控状态 | any[] | ||
| hasExpandedRowCtrl | 是否显示点击展开额外渲染行的+号按钮 | boolean | ||
| getExpandedColProps | 设置额外渲染行的属性 | <IRecord extends unknown = any>(record: IRecord, index: number) => object | Record<string | number, any> | ||
| onRowOpen | 在额外渲染行或者Tree展开或者收起的时候触发的事件 | (openRowKeys: any[], currentRowKey: string, expanded: boolean, currentRecord: any) => void | ||
| onExpandedRowClick | 点击额外渲染行触发的事件 | (record: any, index: number, e: MouseEvent<Element, MouseEvent>) => void | ||
| fixedHeader | 表头是否固定,该属性配合maxBodyHeight使用,当内容区域的高度超过maxBodyHeight的时候,在内容区域会出现滚动条 | boolean | ||
| maxBodyHeight | 最大内容区域的高度,在`fixedHeader`为`true`的时候,超过这个高度会出现滚动条 | string | number | string, number | |
| rowSelection | 是否启用选择模式 | { getProps?: (record: any, index: number) => void; onChange?: (selectedRowKeys: any[], records: any[]) => void; onSelect?: (selected: boolean, record: any, records: any[]) => void; onSelectAll?: (selected: boolean, records: any[]) => void; ... 4 more ...; titleAddons?: () => any; } | ||
| stickyHeader | 表头是否是sticky | boolean | ||
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | ||
| affixProps | affix组件的的属性 | AffixProps | ||
| indent | 在tree模式下的缩进尺寸, 仅在isTree为true时候有效 | number | ||
| isTree | 开启Table的tree模式, 接收的数据格式中包含children则渲染成tree table | boolean | ||
| useVirtual | 是否开启虚拟滚动 | boolean | ||
| scrollToRow | 滚动到指定行 | number | ||
| rowHeight | 设置行高 | number | (() => void) | number, () => void | |
| onBodyScroll | 在内容区域滚动的时候触发的函数 | () => void | ||
| expandedIndexSimulate | 开启时,getExpandedColProps() / getRowProps() / expandedRowRender() 的第二个参数 index (该行所对应的序列) 将按照01,2,3,4...的顺序返回,否则返回真实index(0,2,4,6... / 1,3,5,7...) | boolean | ||
| crossline | 在 hover 时出现十字参考轴,适用于表头比较复杂,需要做表头分类的场景。 | boolean | ||
| defaultChecked | boolean | |||
| defaultValue | string | number | readonly string[] | string, number, readonly string[] | ||
| suppressContentEditableWarning | boolean | |||
| suppressHydrationWarning | boolean | |||
| accessKey | string | |||
| contentEditable | Booleanish | "inherit" | false, true, "true", "false", "inherit" | ||
| contextMenu | string | |||
| dir | string | |||
| draggable | Booleanish | |||
| hidden | boolean | |||
| id | string | |||
| lang | string | |||
| placeholder | string | |||
| slot | string | |||
| spellCheck | Booleanish | |||
| tabIndex | number | |||
| title | string | |||
| translate | "yes" | "no" | "yes", "no" | ||
| radioGroup | string | |||
| role | string | |||
| about | string | |||
| datatype | string | |||
| inlist | any | |||
| property | string | |||
| resource | string | |||
| typeof | string | |||
| vocab | string | |||
| autoCapitalize | string | |||
| autoCorrect | string | |||
| autoSave | string | |||
| color | string | |||
| itemProp | string | |||
| itemScope | boolean | |||
| itemType | string |
0.1.6
4 years ago
0.1.6-alpha.1
4 years ago