# Umbraco 清单选择器 ## 这是什么？ `` 组件提供了一个选择器 UI，用于从 Umbraco 扩展注册表中选择已注册的扩展。它允许用户从任何扩展类型（工作区、仪表板、属性编辑器等）中进行选择并返回选定的清单。这对于用户需要引用其他扩展的配置 UI 非常有用。 ## 文档在实施之前始终获取最新文档： * **扩展注册表**： * **基础** ： ## 参考示例 Umbraco 源代码包含一个工作示例： **位置**：`/Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/manifest-picker/` 此示例演示了一个仪表板，可让用户按类型浏览和选择扩展程序。 ## 相关基础技能 * **扩展注册** ：用于了解扩展如何注册 * 参考技能：`umbraco-extension-registry` * **Umbraco Element** ：用于创建选择器 UI * 参考技能：`umbraco-umbraco-element` ## 工作流程 1. **获取文档** \- 在上面的 URL 上使用 WebFetch 2. **提问** \- 选择哪些扩展类型？如何使用选择？ 3. **生成文件** \- 使用清单选择器创建元素 4. **解释** \- 显示创建的内容以及选择的工作原理 ** ** ## 基本用法从 '@umbraco-cms/backoffice/external/lit' 导入 { html, customElement, state }; 从 '@umbraco-cms/backoffice/lit-element' 导入 { UmbLitElement }；从 '@umbraco-cms/backoffice/components' 导入类型 { UmbInputManifestElement }； @customElement('我的清单选择器示例') 导出类 MyManifestPickerExampleElement 扩展 UmbLitElement { @状态（）私人_selectedManifest = ''; #onChange(事件：{ 目标：UmbInputManifestElement }) { const selectedManifest = event.target.value; this._selectedManifest = selectedManifest?.value ?? ''; } 覆盖渲染（）{ 返回 html`

${this._selectedManifest ？ html`

已选择：${this._selectedManifest}

` : ''}

`; } } ** ** ## 动态扩展类型选择从'@umbraco-cms/backoffice/external/lit'导入{html,customElement,state,when,nothing}; 从 '@umbraco-cms/backoffice/extension-registry' 导入 { umbExtensionsRegistry }；从 '@umbraco-cms/backoffice/lit-element' 导入 { UmbLitElement }；从 '@umbraco-cms/backoffice/components' 导入类型 { UmbInputManifestElement }；从 '@umbraco-cms/backoffice/external/uui' 导入类型 { UUISelectEvent }；接口选项{ 名称：字符串；值：字符串；选择：布尔值； } @customElement('我的扩展浏览器') 导出类 MyExtensionBrowserElement 扩展 UmbLitElement { #选项：选项[] = []； @状态（）私人_selectedExtensionType = '仪表板'; @状态（）私人_selectedManifest = ''; 构造函数（）{ 超级（）； // 从注册表构建可用扩展类型列表 this.observe(umbExtensionsRegistry.extensions, (扩展) => { const 类型 = [...new Set(extensions.map((x) => x.type))]; this.#options = types.sort().map((x) => ({ 姓名：x，值：x，选定：x === this._selectedExtensionType， })); }); } #onTypeSelect(事件：UUISelectEvent) { this._selectedManifest = ''; this._selectedExtensionType = event.target.value 作为字符串； } #onManifestChange(事件：{ 目标：UmbInputManifestElement }) { const selectedManifest = event.target.value; this._selectedManifest = selectedManifest?.value ?? ''; } 覆盖渲染（）{ 返回 html`

${当( this._selectedExtensionType, () => html`

`, () => 什么都没有 )} ${当( this._selectedManifest， () => html`

${this._selectedManifest}

`, () => 什么都没有 )}

`; } } ** ** ## 获取所有扩展类型从 '@umbraco-cms/backoffice/extension-registry' 导入 { umbExtensionsRegistry }； // 在你的元素构造函数中 this.observe(umbExtensionsRegistry.extensions, (扩展) => { // 获取唯一的扩展类型 const 类型 = [...new Set(extensions.map((x) => x.type))]; console.log('可用类型：', types); // 按类型过滤 const 仪表板 = Extensions.filter((x) => x.type === '仪表板'); console.log('仪表板：', 仪表板); // 通过别名获取扩展名 const Specific = extensions.find((x) => x.alias === 'Umb.Dashboard.Welcome'); console.log('具体扩展名：', Specific); }); ** ** ## 常见扩展类型类型 |描述 ---|--- `仪表板` |部分仪表板 `工作区` |实体工作区 `工作区视图` |工作区中的视图 `工作区操作` |工作区操作按钮 `propertyEditorUi` |属性编辑器 UI `propertyEditorSchema` |属性编辑器架构 `实体动作` |上下文菜单操作 `树` |导航树 `树项目` |树项目渲染器 `部分` |后台部门 `sectionView` |剖面图 `headerApp` |标题栏应用程序 `模态` |模态对话框 `条件` |延期条件 ** ** ## UmbInputManifest 属性物业 |类型 |描述 ---|---|--- `扩展类型` | `字符串` |可供选择的扩展类型 `价值` | `清单库|未定义` |选定的清单 ** ** ## 活动活动 |详情 |描述 ---|---|--- `改变` | `{ 目标：UmbInputManifestElement }` |选择更改时触发 ** ** ## 访问选定的清单数据 #onManifestChange(事件：{ 目标：UmbInputManifestElement }) { const 清单 = event.target.value; 如果（清单）{ console.log('别名：', manifest.alias); console.log('名称：', 清单.name); console.log('类型：', manifest.type); console.log('完整清单：', 清单); } } ** ** ## 用例 1. **配置屏幕** \- 让用户选择要显示的仪表板/工作区 2. **扩展管理** \- 浏览并检查已注册的扩展 3. **动态路由** \- 配置导航目标 4. **条件配置** \- 选择要应用的条件 5. **包开发** \-测试扩展注册 ** ** ## 最佳实践 1. **清除选择** \- 当类型更改时重置`_selectedManifest` 2. **处理未定义** \- 在访问属性之前检查`value`是否存在 3. **使用属性布局** \- 包裹在 `` 中以获得一致的样式 4. **显示反馈** \- 显示选定的清单别名/名称以确认选择 5. **对类型进行排序** \- 按字母顺序对扩展类型选项进行排序以提高可用性就是这样！始终获取新文档，保持示例最少，生成完整的工作代码。

Umbraco 舱单选择器

包含技能