# Umbraco 包视图 ## 这是什么？包视图为 Umbraco 中已安装的包提供自定义 UI 面板。它们出现在“包”部分中，允许包开发人员为其包创建专用的配置或信息页面。当用户单击已安装的包时，包视图将显示为模式或面板。 ## 文档在实施之前始终获取最新文档： * **基础** ： * **扩展注册表**： * **Umbraco 元素**： ## 相关基础技能 * **Umbraco Element** ：用于创建 UI 组件的基类 * 参考技能：`umbraco-umbraco-element` * **Modals** ：包视图显示在模态上下文中 * 参考技能：`umbraco-modals` ## 工作流程 1. **获取文档** \- 在上面的 URL 上使用 WebFetch 2. **提问** \- 什么包？有哪些配置选项？ 3. **生成文件** \- 根据最新文档创建清单+元素 4. **解释** \- 显示创建的内容以及如何测试 ## 最小示例 ### 清单（manifests.ts）从'@umbraco-cms/backoffice/packages'导入类型{ManifestPackageView}；导出 const 清单：Array = [ { 类型：'packageView'，别名： 'My.PackageView', name: '我的包裹视图', 元素：() => import('./my-package-view.element.js'), 元：{ packageName: '我的包裹', }, }, ]; ### 使用 Lit 实现元素 (my-package-view.element.ts) 从 '@umbraco-cms/backoffice/external/lit' 导入 { html, customElement }；从 '@umbraco-cms/backoffice/lit-element' 导入 { UmbLitElement }；从'@umbraco-cms/backoffice/modal'导入{UmbModalBaseElement}； @customElement('我的包视图') 导出类 MyPackageViewElement 扩展 UmbModalBaseElement { 覆盖渲染（）{ 返回 html`

包配置

在此处配置您的包设置。

设置 1

`; } #onClose() { this.modalContext?.reject(); } #onSave() { // 在这里保存逻辑 this.modalContext?.submit(); } } 导出默认的 MyPackageViewElement； ### Vanilla JS 元素 (my-package-view.js) const template = document.createElement('template'); 模板.innerHTML = `

我的包裹

包信息和设置

关闭 `; 导出默认类 MyPackageViewElement 扩展 HTMLElement { 构造函数（）{ 超级（）； this.attachShadow({ 模式: '打开' }); this.shadowRoot.appendChild(template.content.cloneNode(true)); this.shadowRoot.querySelector('uui-button').addEventListener('click', this.onClick.bind(this)); } onClick() { this.modalContext.close(); } } customElements.define('my-package-view', MyPackageViewElement); ## 接口参考接口 ManifestPackageView 扩展 ManifestElement { 类型：'packageView'；元：MetaPackageView； } 接口 MetaPackageView { 包名：字符串； // 必须与 umbraco-package.json 中的包名称匹配 } ## 包集成包视图通过将“meta.packageName”与“umbraco-package.json”中的包名称相匹配来链接： { "$schema": "../../umbraco-package-schema.json", "name": "我的包裹", “版本”：“1.0.0”， “扩展”：[ { “类型”：“包视图”， "alias": "My.PackageView", "name": "我的包视图", “元素”：“/App_Plugins/MyPackage/my-package-view.js”， “元”：{ "packageName": "我的包裹" } } ] } 就是这样！始终获取新文档，保持示例最少，生成完整的工作代码。

Umbraco 封装视图

包含技能