OverflowList 折叠列表

展示类 · OverflowList

折叠列表

OverflowList 是一个行为组件，用于展示列表，并支持自适应来展示尽可能多的项目。因过长而溢出项目将折叠为一个元素。当检测到调整大小时，可见项将被重新计算。

代码演示

通过 renderMode="collapse" (默认) 来实现内容的折叠。

collapse 模式下支持 collapseFrom 设置折叠方向。

collapse 模式下支持 minVisibleItems 设置最小展示的数目。

通过 renderMode="scroll" 来使用滚动模式的折叠列表。如果需要 scrollIntoView，可以通过选择器： document.querySelector(`.item-cls[data-scrollkey="${key}"] 来选取。

属性	说明	类型	默认值	版本
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