# Umbraco 集合视图 ## 这是什么？集合视图定义数据在集合中的显示方式。它允许您创建实体列表的自定义视觉表示 - 例如表格、网格、卡片或任何自定义布局。集合视图可以添加到现有集合或自定义集合中，并且用户可以在可用视图之间切换。 ## 文档在实施之前始终获取最新文档： * **主要文档**： * **集合**： * **基础** ： * **扩展注册表**： ## 相关基础技能 * **上下文 API** ：用于访问集合上下文和项目数据 * 参考技能：`umbraco-context-api` * **状态管理** ：用于订阅集合数据更改 * 参考技能：`umbraco-state-management` * **Umbraco Element** ：用于实现视图元素 * 参考技能：`umbraco-umbraco-element` ## 工作流程 1. **获取文档** \- 在上面的 URL 上使用 WebFetch 2. **提问** \- 什么集合？表格、网格还是自定义布局？什么列/字段？ 3. **生成文件** \- 根据最新文档创建清单+视图元素 4. **解释** \- 显示创建的内容以及如何测试 ## 最小示例 ### 清单（manifests.ts）从'@umbraco-cms/backoffice/extension-registry'导入类型{ManifestCollectionView}； const 清单：ManifestCollectionView = { 类型：'集合视图'，别名： 'My.CollectionView.Cards', name: '卡片视图', 元素：() => import('./card-view.element.js'), 元：{ 标签：“卡片”，图标：'图标网格'，路径名: '卡片', }, 条件：[ { 别名： 'Umb.Condition.CollectionAlias', 匹配：'My.Collection', }, ], }; 导出常量清单 = [清单]; ### 查看元素 (card-view.element.ts) 从 '@umbraco-cms/backoffice/external/lit' 导入 { html, css, customElement, state }；从 '@umbraco-cms/backoffice/lit-element' 导入 { UmbLitElement }；从 '@umbraco-cms/backoffice/collection' 导入 { UMB_COLLECTION_CONTEXT }； @customElement('我的卡片视图') 导出类 MyCardViewElement 扩展 UmbLitElement { @状态（）私有_items：数组<任意> = []；构造函数（）{ 超级（）； this.consumeContext(UMB_COLLECTION_CONTEXT, (上下文) => { this.observe(context.items, (items) => { this._items = 项目； }); }); } 渲染（）{ 返回 html`

${这个._items.map( （项目）=> html`

${项目.名称}

${项目.描述|| “无描述”}

` )} `; } 静态样式= css` .card-grid { 显示：网格；网格模板列：重复（自动填充，minmax（200px，1fr））；间隙：var(--uui-size-space-4); 填充：var(--uui-size-space-4); } .卡{ 背景：var(--uui-color-surface); 边框：1px 实心 var(--uui-color-border); 边框半径：var(--uui-border-radius); 填充：var(--uui-size-space-4); } `; } 导出默认的 MyCardViewElement；声明全局{ 接口 HTMLElementTagNameMap { '我的卡视图'：MyCardViewElement； } } ### 表视图示例从 '@umbraco-cms/backoffice/external/lit' 导入 { html, css, customElement, state }；从 '@umbraco-cms/backoffice/lit-element' 导入 { UmbLitElement }；从 '@umbraco-cms/backoffice/collection' 导入 { UMB_COLLECTION_CONTEXT }； @customElement('我的表视图') 导出类 MyTableViewElement 扩展 UmbLitElement { @状态（）私有_items：数组<任意> = []；构造函数（）{ 超级（）； this.consumeContext(UMB_COLLECTION_CONTEXT, (上下文) => { this.observe(context.items, (items) => { this._items = 项目； }); }); } 渲染（）{ 返回 html`

名称

状态

已更新

${这个._items.map( （项目）=> html`

${item.name}

${item.status}

${item.updateDate}

` )} `; } } 导出默认的 MyTableViewElement； ### 内置集合视图（例如媒体） const 清单：ManifestCollectionView = { 类型：'集合视图'，别名： 'My.CollectionView.MediaThumbnails', name: '缩略图视图', 元素：() => import('./thumbnail-view.element.js'), Weight: 100, // 较高的权重 = 首先出现在视图切换器中元：{ 标签：“缩略图”， icon: '图标图片', 路径名：'缩略图'， }, 条件：[ { 别名： 'Umb.Condition.CollectionAlias', 匹配：'Umb.Collection.Media', }, ], }; ### 访问用户定义的列 this.consumeContext(UMB_COLLECTION_CONTEXT, (上下文) => { // 获取配置的列/属性 this.observe(context.userDefinedProperties, (属性) => { this._columns = 属性； }); // 获取项目 this.observe(context.items, (items) => { this._items = 项目； }); }); ## 元属性物业 |描述 ---|--- `标签` |视图切换器中的显示名称 `图标` |视图切换器中的图标 `路径名` |用于深度链接的 URL 路径段 ## 条件的通用集合别名 * `Umb.Collection.Document` * `Umb.Collection.Media` * `Umb.Collection.Member` * `Umb.Collection.User` 就是这样！始终获取新文档，保持示例最少，生成完整的工作代码。

Umbraco 系列视图

包含技能