OverflowList - Semi Design

Show · OverflowList

OverflowList

OverflowList is a behavior component used to take list of items and display as many items as can fit inside itself. Overflowed items that do not fit are collected and rendered by callback function. The visible items will be recomputed when a resize is detected.

Demos

How to import


import { OverflowList } from '@douyinfe/semi-ui';

Collapse Mode - Simple

You could use renderMode="collapse" (default) to render items.

Collapse Mode - Direction

collapse mode supports two collapseFrom directions: start and end (default).

Collapse Mode - Visible

collapse mode supports to set up minimum visible items that will not be collected.

Scroll Mode

You could use renderMode="scroll" for a scrollable list.
If you need certain element in the list to scrollIntoView, use document.querySelector(`.item-cls[data-scrollkey="${key}"] to select to corresponding DOM.

API Reference

Properties	Instructions	type	Default	version
className	Class name.	string	-	1.1.0
renderMode	Render mode.	`collapse`\| `scroll`	`true`	-
style	OverflowList style	React.CSSProperties	-	1.1.0

renderMode='collapse'

Properties	Instructions	type	Default	version
collapseFrom	Which direction the items should collapse from: start or end of the children.	`start`\| `end`	`end`	1.1.0
items	All items to display in the list.	Record<string, any>[]	`true`	-
minVisibleItems	The minimum number of visible items that should never collapse into the overflow menu.	number	0	1.1.0
onOverflow	Callback invoked when the overflowed items change.	(overflowItems: Record<string, any>[]) => void	-	1.1.0
overflowRenderer	Callback invoked to render the overflowed items.	(overflowItems: Record<string, any>[]) => React.ReactNode	-	1.1.0
visibleItemRenderer	Callback invoked to render each visible item.	(item: Record<string, any>, index: number) => React.ReactElement	-	1.1.0

renderMode='scroll'

Properties	Instructions	type	Default	version
items	All items to display in the list. Key is required.	Record<string, any>[]	`true`	-
onIntersect	Callback invoked when the overflowed items change.	({[key: string]: IntersectionObserverEntry}) => void	-	1.1.0
overflowRenderer	Callback invoked to render the overflowed items.	(overflowItems: Record<string, any>[]) => React.ReactNode[]	-	1.1.0
threshold	At what percentage of the target's visibility the observer's callback should be executed.	number	0.75	1.1.0
visibleItemRenderer	allback invoked to render each visible item.	(item: Record<string, any>, index: number) => React.ReactElement	-	1.1.0
wrapperClassName	Scroll wrapper classname.	string	-	1.1.0
wrapperStyle	Scroll wrapper style.	React.CSSProperties	-	1.1.0