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
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
If you need certain element in the list to scrollIntoView, 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 |