Ant Design Blazor
List
Simple List.
When To Use
A list can be used to display content related to a single subject. The content can consist of multiple elements of varying type and size.
Examples
Ant Design supports a default list size as well as a large and small size.
If a large or small list is desired, set the size property to either large or small respectively. Omit the size property for a list with the default size.
Customizing the header and footer of list by setting header and footer property.
Basic list.
Load more list with loadMore property.
Set the itemLayout property to vertical to create a vertical list.
Create a grid layout by setting the grid property of List.
Responsive grid list. The size property the is as same as Layout Grid.
The example of infinite load with react-infinite-scroller.
An example of infinite list & virtualized loading using react-virtualized. Learn more.
Virtualized rendering is a technique to mount big sets of data. It reduces the amount of rendered DOM nodes by tracking and hiding whatever isn't currently visible.
Add a div element wrapping ListItem child element, set draggable='true', add ondrop/ondragstart/ondragover event handler.
List API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| DataSource | ParameterList of items to show in list | IEnumerable<TItem> | -- |
| Bordered | ParameterPut a border on the list | Boolean | false |
| Header | ParameterHeader content for the list | RenderFragment | -- |
| Footer | ParameterFooter content for the list | RenderFragment | -- |
| LoadMore | ParameterContent for the end of list items for diplaying a load more | RenderFragment | -- |
| ItemLayout | ParameterThe layout of list, default is horizontal, If a vertical list is desired, set the itemLayout property to vertical | ListItemLayout | -- |
| Loading | ParameterShow loading on the list | Boolean | false |
| NoResult | ParameterCurrently unused | String | -- |
| Size | ParameterSize of the list | String | AntSizeLDSType.Default |
| Split | ParameterToggles rendering of the split under the list item | Boolean | true |
| Grid | ParameterThe grid type of list | ListGridType | -- |
| Pagination | ParameterOptions for paginating the list | PaginationOptions | -- |
| ChildContent | ParameterContent for the list | RenderFragment<TItem> | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
ListItem API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Extra | ParameterThe extra content of list item. If itemLayout is vertical, shows the content on right, otherwise shows content on the far right. | RenderFragment | -- |
| Actions | ParameterThe actions content of list item. If itemLayout is vertical, shows the content on bottom, otherwise shows content on the far right. | RenderFragment[] | -- |
| ChildContent | ParameterMain content for the item | RenderFragment | -- |
| OnClick | ParameterCallback executed when the item is clicked | EventCallback | -- |
| NoFlex | ParameterWhether to use flex for item or not. When true, will not use flex. | Boolean | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
ListItemMeta API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Title | ParameterTitle for the list item | String | -- |
| TitleTemplate | ParameterTitle content of the list item. Takes priority over AntDesign.ListItemMeta.Title |
RenderFragment | -- |
| Avatar | ParameterThe avatar of list item | String | -- |
| AvatarTemplate | ParameterAvatar content of the list item. Takes priority over AntDesign.ListItemMeta.Avatar |
RenderFragment | -- |
| Description | ParameterThe description of list item | String | -- |
| DescriptionTemplate | ParameterThe description content of list item. Takes priority over AntDesign.ListItemMeta.Description |
RenderFragment | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
PaginationOptions API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| IsSmall | ParameterIf pagination is small or not | Boolean | false |
| Disabled | ParameterWhether the pagination is disabled or not | Boolean | false |
| RootPrefixCls | Parameter | String | -- |
| ChangeSize | ParameterCallback executed when the page size changes | EventCallback<Int32> | -- |
| Current | ParameterCurrent page | Int32 | -- |
| PageSize | ParameterCurrent pag size | Int32 | -- |
| PageSizeOptions | ParameterOptions for page size selection | Int32[] | { 10, 20, 50, 100 } |
| QuickGo | ParameterCallback executed when jumping to a specific page | EventCallback<Int32> | -- |
| GoButton | ParameterQuick jumper confirm button, this is for react version ShowQuickJumper: { goButton: ReactNode } |
OneOf<Boolean, RenderFragment?? | -- |
| Locale | ParameterLocale used for localization of the component | PaginationLocale | LocaleProvider.CurrentLocale.Pagination |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
ListGridType API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Gutter | spacing between grid | Int32 | -- |
| Column | column of grid | Int32 | -- |
| Xs | <576px column of grid | Int32 | -- |
| Sm | ≥576px column of grid | Int32 | -- |
| Md | ≥768px column of grid | Int32 | -- |
| Lg | ≥992px column of grid | Int32 | -- |
| Xl | ≥1200px column of grid | Int32 | -- |
| Xxl | ≥1600px column of grid | Int32 | -- |