代码演示
如何引入
折叠模式 - 默认
通过 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 |
