使用import { Masonry } from "antd"; |
文档 |
版本自 6.0.0 起支持 |
文档贡献者
瀑布流布局组件，用于展示不同高度的内容。
通用属性参考：通用属性
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| classNames | 用于自定义组件内部各语义化结构的 class，支持对象或函数 | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | |
| columns | 列数，可以是固定值或响应式配置 | number | { xs?: number; sm?: number; md?: number } | 3 | |
| fresh | 是否持续监听子项尺寸变化 | boolean | false | |
| gutter | 间距，可以是固定值、响应式配置或水平垂直间距配置 | Gap | [Gap, Gap] | 0 | |
| items | 瀑布流项 | MasonryItem[] | - | |
| itemRender | 自定义项渲染 | (item: MasonryItem) => React.ReactNode | - | |
| styles | 语义化结构 style，支持对象和函数形式 | Record<SemanticDOM, CSSProperties> | ((info: { props }) => Record<SemanticDOM, CSSProperties>) | - | |
| onLayoutChange | 列排序回调 | ({ key: React.Key; column: number }[]) => void | - |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| children | 自定义展示内容，相对 itemRender 具有更高优先级 | React.ReactNode | - |
| column | 自定义所在列 | number | - |
| data | 自定义存储数据 | T | - |
| height | 高度 | number | - |
| key | 唯一标识 | string | number | - |
Gap 是项之间的间距，可以是固定值，也可以是响应式配置。
type Gap = undefined | number | Partial<Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', number>>;