使用import { Masonry } from "antd"; |
版本自 6.0.0 起支持 |
- 组件总览
- 通用
- 布局
- 导航
- 数据录入
- 数据展示
- 反馈
- 其他
瀑布流布局组件，用于展示不同高度的内容。
通用属性参考：通用属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| classNames | 语义化结构 className | 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> | - |
| 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>>;