Ant Design Blazor
List列表
Examples
列表拥有大、中、小三种尺寸。
通过设置 size 为 large small 分别把按钮设为大、小尺寸。若不设置 size，则尺寸为中。
可通过设置 header 和 footer，来自定义列表头部和尾部。
基础列表。
可通过 loadMore 属性实现加载更多功能。
通过设置 itemLayout 属性为 vertical 可实现竖排列表样式。
可以通过设置 List 的 grid 属性来实现栅格列表，column 可设置期望显示的列数。
响应式的栅格列表。尺寸与 Layout Grid 保持一致。
结合 react-infinite-scroller 实现滚动自动加载列表。
结合 react-virtualized 实现滚动加载无限长列表，带有虚拟化（virtualization）功能，能够提高数据量大时候长列表的性能。
virtualized 是在大数据列表中应用的一种技术，主要是为了减少不可见区域不必要的渲染从而提高性能，特别是数据量在成千上万条效果尤为明显。了解更多
为ListItem子组件包装一层div, 设置draggable='true', 并为之加上ondrop/ondragstart/ondragover事件处理函数.
List API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| DataSource | 属性要在列表中显示的项目列表 | IEnumerable<TItem> | -- |
| Bordered | 属性在列表上添加边框 | Boolean | false |
| Header | 属性列表的标题内容 | RenderFragment | -- |
| Footer | 属性列表的页脚内容 | RenderFragment | -- |
| LoadMore | 属性用于显示负载的列表项末尾的内容 | RenderFragment | -- |
| ItemLayout | 属性列表的布局，默认是水平的，如果需要垂直的列表，设置itemLayout属性为vertical | ListItemLayout | -- |
| Loading | 属性在列表中显示加载 | Boolean | false |
| NoResult | 属性Currently unused | String | -- |
| Size | 属性列表的大小 | String | AntSizeLDSType.Default |
| Split | 属性切换列表项下拆分的呈现 | Boolean | true |
| Grid | 属性列表的网格类型 | ListGridType | -- |
| Pagination | 属性列表分页选项 | PaginationOptions | -- |
| ChildContent | 属性列表内容 | RenderFragment<TItem> | -- |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |
ListItem API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| Extra | 属性列表项的额外内容。如果 itemLayout 是垂直的，则显示右侧的内容，否则显示最右侧的内容。 | RenderFragment | -- |
| Actions | 属性列表项的动作内容。如果 itemLayout 是垂直的，则在底部显示内容，否则在最右侧显示内容。 | RenderFragment[] | -- |
| ChildContent | 属性项目的主要内容 | RenderFragment | -- |
| OnClick | 属性单击项目时执行的回调 | EventCallback | -- |
| NoFlex | 属性是否对 item 使用 flex。当为真时，将不会使用 flex。 | Boolean | -- |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |
ListItemMeta API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| Title | 属性列表项的标题 | String | -- |
| TitleTemplate | 属性列表项的标题内容。优先于 AntDesign.ListItemMeta.Title |
RenderFragment | -- |
| Avatar | 属性列表项头像 | String | -- |
| AvatarTemplate | 属性列表项的头像内容。优先于 AntDesign.ListItemMeta.Avatar |
RenderFragment | -- |
| Description | 属性列表项说明 | String | -- |
| DescriptionTemplate | 属性列表项的描述内容。优先于 AntDesign.ListItemMeta.Description |
RenderFragment | -- |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |
PaginationOptions API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| IsSmall | 属性分页是否小 | Boolean | false |
| Disabled | 属性是否禁用分页 | Boolean | false |
| RootPrefixCls | 属性 | String | -- |
| ChangeSize | 属性页面大小改变时执行的回调 | EventCallback<Int32> | -- |
| Current | 属性当前页面 | Int32 | -- |
| PageSize | 属性当前页面大小 | Int32 | -- |
| PageSizeOptions | 属性页面尺寸选择选项 | Int32[] | { 10, 20, 50, 100 } |
| QuickGo | 属性跳转到特定页面时执行的回调 | EventCallback<Int32> | -- |
| GoButton | 属性快速跳转确认按钮，这是用于 React 版本 ShowQuickJumper: { goButton: ReactNode } |
OneOf<Boolean, RenderFragment?? | -- |
| Locale | 属性用于组件本地化的语言环境 | PaginationLocale | LocaleProvider.CurrentLocale.Pagination |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |
ListGridType API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| Gutter | 网格间距 | Int32 | -- |
| Column | 网格列 | Int32 | -- |
| Xs | <576px 网格列 | Int32 | -- |
| Sm | ≥576px 网格列 | Int32 | -- |
| Md | ≥768px 网格列 | Int32 | -- |
| Lg | ≥992px 网格列 | Int32 | -- |
| Xl | ≥1200px 列的网格 | Int32 | -- |
| Xxl | ≥1600px 列的网格 | Int32 | -- |