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

代码演示

如何引入

折叠模式 - 默认

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

折叠模式 - 方向

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

折叠模式 - 最小展示的数目

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

滚动模式

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

API 参考

属性说明类型默认值版本
className类名string-1.1.0
renderMode渲染模式collapse| scrollcollapse1.1.0
styleOverflowList的样式React.CSSProperties-1.1.0

renderMode='collapse'

属性说明类型默认值版本
collapseFrom折叠方向start| endend1.1.0
items渲染项目Record<string, any>[]-1.1.0
minVisibleItems最小展示的可见项数目number01.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

renderMode='scroll'

属性说明类型默认值版本
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触发溢出回调的阈值number0.751.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

© 2021 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED