logo
为了能更好地了解您的商业使用需求,请参与 Ant Design Blazor 商业应用调查,一起建设商业应用社区,为企业系统研发赋能!

List列表

通用列表。

何时使用

最基础的列表展示,可承载文字、列表、图片、段落,常用于后台数据展示页面。

Examples

列表拥有大、中、小三种尺寸。

通过设置 size 为 large small 分别把按钮设为大、小尺寸。若不设置 size,则尺寸为中。

可通过设置 header 和 footer,来自定义列表头部和尾部。

expand code expand code

基础列表。

expand code expand code

可通过 loadMore 属性实现加载更多功能。

expand code expand code

通过设置 itemLayout 属性为 vertical 可实现竖排列表样式。

expand code expand code

可以通过设置 List 的 grid 属性来实现栅格列表,column 可设置期望显示的列数。

expand code expand code

响应式的栅格列表。尺寸与 Layout Grid 保持一致。

expand code expand code

结合 react-infinite-scroller 实现滚动自动加载列表。

expand code expand code

结合 react-virtualized 实现滚动加载无限长列表,带有虚拟化(virtualization)功能,能够提高数据量大时候长列表的性能。

virtualized 是在大数据列表中应用的一种技术,主要是为了减少不可见区域不必要的渲染从而提高性能,特别是数据量在成千上万条效果尤为明显。了解更多

expand code expand code

为ListItem子组件包装一层div, 设置draggable='true', 并为之加上ondrop/ondragstart/ondragover事件处理函数.

expand code expand code

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 属性列表的大小 ListSize ListSize.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 --
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.