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

List列表

通用列表。

何时使用

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

Examples

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

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

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

expand code expand code

基础列表。

expand code expand code

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

expand code expand code

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

expand code expand code

可以通过设置 Listgrid 属性来实现栅格列表,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 属性列表的大小 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 --
Image图片 Popover气泡卡片
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.