Listy
Listy
Importimport { Listy } from 'antd'; |
Versionsupported since 6.6.0 |
virtual to render only the rows in view.Listy component is available since
antd@6.6.0.
Common props ref: Common props
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| classNames | Semantic class names | { root?, item?, groupHeader? } | - | 6.6.0 | 6.6.0 |
| group | Grouping config, see Group below | Group<T, K> | - | 6.6.0 | × |
| height | Height of the scroll container; content scrolls when it overflows | number | - | 6.6.0 | × |
| itemRender | Render a single row | (item: T, index: number) => ReactNode | - | 6.6.0 | × |
| items | Data source of the list | T[] | [] | 6.6.0 | × |
| rowKey | Unique key of an item, a field name or a getter | keyof T | (item: T) => Key | - | 6.6.0 | × |
| sticky | Whether group headers stick to the top | boolean | false | 6.6.0 | × |
| styles | Semantic inline styles | { root?, item?, groupHeader? } | - | 6.6.0 | 6.6.0 |
| virtual | Whether to enable virtual scrolling, rendering only rows in view, requires height | boolean | false | 6.6.0 | × |
| onScroll | Native scroll event handler | React.UIEventHandler<HTMLElement> | - | 6.6.0 | × |
| Property | Description | Type |
|---|---|---|
| key | Compute the group key an item belongs to; items with the same key are grouped together | (item: T) => K |
| title | Render the group header; receives the group key and its items | (groupKey: K, items: T[]) => ReactNode |
| Name | Description | Type |
|---|---|---|
| scrollTo | Scroll to a position, an item, or a group | (config?: ListyScrollToConfig) => void |
ListyScrollToConfig is one of:
| Shape | Description |
|---|---|
| number | Scroll to a pixel offset (scrollTop) |
{ top?, left? } | Scroll to an absolute pixel position |
{ key, align?, offset? } | Scroll to the item whose rowKey matches key |
{ groupKey, align?, offset? } | Scroll to a group header |
align is 'top' | 'bottom' | 'auto'; offset is an extra pixel offset applied after alignment.
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| itemPaddingBlock | Vertical padding of a list item. | number | 12 |
| itemPaddingInline | Horizontal padding of a list item. | number | 16 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorBgContainer | Container background color, e.g: default button, input box, etc. Be sure not to confuse this with `colorBgElevated`. | string | #ffffff |
| colorFillAlter | Control the alternative background color of element. | string | rgba(0,0,0,0.02) |
| colorSplit | Used as the color of separator, this color is the same as colorBorderSecondary but with transparency. | string | rgba(5,5,5,0.06) |
| colorText | Default text color which comply with W3C standards, and this color is also the darkest neutral color. | string | rgba(0,0,0,0.88) |
| colorTextDescription | Control the font color of text description. | string | rgba(0,0,0,0.45) |
| controlItemBgHover | Control the background color of control component item when hovering. | string | rgba(0,0,0,0.04) |
| fontFamily | The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics. | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | The most widely used font size in the design system, from which the text gradient will be derived. | number | 14 |
| fontWeightStrong | Control the font weight of heading components (such as h1, h2, h3) or selected item. | number | 600 |
| lineHeight | Line height of text. | number | 1.5714285714285714 |
| lineType | Border style of base components | string | solid |
| lineWidth | Border width of base components | number | 1 |
| motionDurationMid | Motion speed, medium speed. Used for medium element animation interaction. | string | 0.2s |
| motionEaseInOut | Preset motion curve. | string | |
| paddingXS | Control the extra small padding of the element. | number | 8 |