代码演示
如何引入
折叠模式 - 默认
通过 renderMode="collapse"
(默认) 来实现内容的折叠。
折叠模式 - 方向
collapse
模式下支持 collapseFrom 设置折叠方向。
折叠模式 - 最小展示的数目
collapse
模式下支持 minVisibleItems 设置最小展示的数目。
滚动模式
通过 renderMode="scroll"
来使用滚动模式的折叠列表。如果需要 scrollIntoView,可以通过选择器: document.querySelector(`.item-cls[data-scrollkey="${key}"]
来选取。
API 参考
属性 | 说明 | 类型 | 默认值 | 版本 |
---|
className | 类名 | string | - | 1.1.0 |
renderMode | 渲染模式 | collapse | scroll | collapse | 1.1.0 |
style | OverflowList的样式 | React.CSSProperties | - | 1.1.0 |
renderMode='collapse'
属性 | 说明 | 类型 | 默认值 | 版本 |
---|
collapseFrom | 折叠方向 | start | end | end | 1.1.0 |
items | 渲染项目 | Record<string, any>[] | - | 1.1.0 |
minVisibleItems | 最小展示的可见项数目 | number | 0 | 1.1.0 |
onOverflow | 溢出回调 | (overflowItems: Record<string, any>[]) => void | - | 1.1.0 |
overflowRenderer | 溢出项的自定义渲染函数 | (overflowItems: Record<string, any>[]) => React.ReactNode | - | 1.1.0 |
visibleItemRenderer | 展示项的自定义渲染函数 | (item: Record<string, any>, index: number) => React.ReactElement | - | 1.1.0 |
属性 | 说明 | 类型 | 默认值 | 版本 |
---|
items | 渲染项目,要求必含 key 项 | Record<string, any>[] | - | 1.1.0 |
onIntersect | 溢出回调 | ({[key: string]: IntersectionObserverEntry}) => void | - | 1.1.0 |
overflowRenderer | 溢出项的自定义渲染函数 | (overflowItems: Record<string, any>[]) => React.ReactNode[] | - | 1.1.0 |
threshold | 触发溢出回调的阈值 | number | 0.75 | 1.1.0 |
visibleItemRenderer | 展示项的自定义渲染函数 | (item: Record<string, any>, index: number) => React.ReactElement | - | 1.1.0 |
wrapperClassName | 滚动 wrapper 的类名 | string | - | 1.1.0 |
wrapperStyle | 滚动 wrapper 的样式 | React.CSSProperties | - | 1.1.0 |