资源列表

资源列表显示相同类型的对象的集合，如产品或客户。资源列表的主要工作是帮助商家找到对象并导航到该对象的整页表示。

具有简单项的资源列表，没有批量操作、排序或过滤。

进口｛卡，ResourceList，《阿凡达》，ResourceItem，文本｝从“@shopify /北极星”;进口反应从“反应”;函数ResourceListExample（）｛返回（<卡><ResourceList resourceName＝｛｛单数：“客户”，复数：“客户”｝｝项目＝｛［｛id：One hundred.，url：“客户/ 341”，名字：“美Jemison”，位置：美国迪凯特的，｝，｛id：200，url：“客户/ 256”，名字：“艾伦·奥乔亚”，位置：“美国洛杉矶”，｝，］｝renderItem＝｛（项）＝＞｛常量｛id，url，名字，位置｝＝项;常量媒体＝<Avatar客户规模＝“媒介”名字＝｛名字｝/>;返回（<ResourceItem id＝｛id｝url＝｛url｝媒体＝｛媒体｝accessibilityLabel＝｛｀查看详细信息$ {名字｝｀｝><文本变体＝“bodyMd”fontWeight＝“大胆”作为＝“h3”>｛名字｝</文本><div>｛位置｝</div></ResourceItem>）;｝｝/></卡>）;｝

道具

想让这个功能变得更好吗?请分享你的反馈。

接口 ResourceListProps

项目 TItemType［］: 项目数据;每个项目被传递给renderItem。
filterControl？反应。ReactNode
emptyState？反应。ReactNode: 当还不存在资源时要显示的标记。当set和items为空时渲染。
emptySearchState？反应。ReactNode: 当列表的搜索或筛选没有返回结果时显示的标记。当' filterControl '设置时渲染，项目为空，' emptyState '未设置。

默认为EmptySearchResult。
resourceName？｛单数：字符串;复数：字符串;｝: 资源的名称，如客户或产品。
promotedBulkActions？（|（＆）) []: 最多2个批量行动，将给予更多的突出。
bulkActions？（|（＆）) []: 当前选定项上可用的操作。
设置selecteditem？字符串[] |“所有”: 当前选定项的id集合。
isFiltered？布尔: 列表是否应用了过滤器。
可选择的？布尔: 在列表顶部呈现“全选”按钮，并在每个列表项前面呈现复选框。当没有提供bulkActions时使用。*。
hasMoreItems？布尔: 是否有比当前设置的物品更多的物品。决定是否在BulkActions组件上设置paginatedSelectAllAction和paginatedSelectAllText道具。
加载？布尔: 在执行后台操作时，用旋转器覆盖项目列表。
showHeader？布尔: 显示或隐藏标题的布尔值。
totalItemsCount？数量: 资源总数。
sortValue？字符串: 排序控件的当前值。
sortOptions？字符串|［］: 要从中选择的排序选项的集合。
alternateTool？反应。ReactNode: ReactNode来显示，而不是排序控件。
onSortChange？（选择：字符串，id：字符串) = >无效: 排序选项更改时回调。
onSelectionChange？（设置selecteditem：字符串[] |“所有”) = >无效: 当选择被改变时回调。
renderItem （项：TItemType，id：字符串，指数：数量) = >反应。ReactNode: 函数来呈现每个列表项，必须返回一个ResourceItem组件。
idForItem？（项：TItemType，指数：数量) = >字符串: 函数自定义每个项目的唯一ID。
resolveItemId？（项：TItemType) = >字符串: 函数解析项的id。

资源列表还可以:

支持自定义列表项
包括批量操作，这样商家就可以一次操作多个对象
支持排序和过滤长长的清单
搭配分页，使长列表易于消化

构建

在项目中使用资源列表涉及以下组件和子组件的组合:

ResourceList
ResourceItem或自定义列表项
过滤器(可选)
分页组件(可选)

资源列表组件提供用于列表排序、过滤和分页的UI元素，但不提供这些操作的逻辑。当排序选项发生更改、添加过滤器或请求第二页时，您需要处理该事件(包括任何网络请求)，然后用新道具更新组件。

目的

Shopify围绕代表商家业务的对象(如客户、产品和订单)进行组织。例如，每个单独的订单都有一个可以链接到的专用页面。在Shopify中，我们称这些类型为对象资源，我们称对象的专用页为its详细信息页面。

问题

以订单为例。商人可能有很多这样的人。他们需要一种方法来扫描他们的订单，看看他们处于什么状态，并找出哪些订单需要先采取行动。换句话说，他们需要一种方法找到单个订单，调用有关该订单的更多信息，并对其采取行动。

解决方案

资源列表的作用如下:

一种内容格式，以紧凑的形式呈现一组单独的资源
对一个或多个独立资源采取行动的系统
导航到单个资源详细信息页面的一种方法

由于详细信息页面显示单个资源的所有内容和操作，因此可以将资源列表视为这些详细信息页面的摘要。通过这种方式，资源列表在Shopify的导航层次结构中架起了一个中间的桥梁。

在资源列表中显示来自详细信息页面的内容的示意图

资源列表不是数据表

在宽屏幕上，资源列表通常看起来像一个表，特别是当一些内容在列中对齐时。尽管如此，资源列表和数据表有不同的用途。

数据表是数据可视化的一种形式。它最适合呈现高度结构化的数据，以便进行比较和分析。

如果您的用例更多是关于可视化或分析数据，请使用数据表组件。如果您的用例更多的是关于查找和对对象采取操作，则使用资源列表。

最佳实践

资源列表可以存在于Shopify的许多地方。你可以在卡片中包含一个简短的资源列表，总结最近的营销活动。ob欧宝娱乐app下载地址你也可以用一整个页面来展示资源列表，比如Shopify的主要产品列表。

资源列表应该:

具有在单击时执行操作的项。操作应该导航到资源的详细信息页面，或者提供有关该项的更多详细信息。
自定义内容和布局的列表项，以支持商家的需求。
如果列表可能很长，特别是如果不同的商业任务受益于不同的排序顺序，则支持排序。
支持过滤如果列表可以很长。
当当前列表包含超过50个项目时进行分页。
使用框架页面如果加载prop为true且项正在处理，则在初始页面加载时为页面的其余部分加载组件。

资源列表可以选择:

为经常一次应用于多个列表项的任务提供批量操作。例如，商家可能希望为大量产品添加相同的标签。

内容的指导方针