前端智能家居UI组件【免费下载链接】frontend:lollipop: Frontend for Home Assistant项目地址https://gitcode.com/gh_mirrors/frontend149/frontend点击查看免费下载ha-dropdown是 Home Assistant 前端本仓库即 frontend基于 Web Awesomewebawesomedropdown 组件封装的可样式化下拉菜单广泛用于设置菜单、操作菜单、选择器与溢出菜单等交互场景。本文以 gallery 组件文档 为核心骨架结合 组件实现源码 与 菜单项源码系统讲解它的组合式用法composition、ha-dropdown-item的图标/子菜单/复选框/危险变体等能力、事件与主题定制并给出项目内的真实调用案例帮助你直接上手使用。组件定位紧凑、可访问的下拉菜单在组件画廊gallery的 sidebar 分类 中ha-dropdown与ha-dialog、ha-adaptive-popover、ha-tooltip一同归入Overlays浮层分组它的定位是一个紧凑、可访问的下拉菜单用于选择操作或设置项。它由两个配套元素组成ha-dropdown菜单容器负责触发按钮trigger与弹层的定位、显隐与事件分发ha-dropdown-item菜单项支持图标、子菜单、复选框、禁用项与危险destructive变体。组件支持两种使用模式通过slottrigger插槽组合自定义触发按钮官方推荐以及使用placement等属性控制弹层位置。官方文档原文指出该组件基于 webawesome 的 dropdown 组件实现更多底层细节可查阅 Web Awesome 官方文档。组合式用法完整示例官方文档给出的核心示例展示了ha-dropdown的全部组合能力自定义触发按钮、图标菜单项、禁用项、子菜单、复选框菜单项与危险变体。以下为可直接复制使用的完整写法ha-dropdown ha-button slottrigger with-caretDropdown/ha-button ha-dropdown-item ha-svg-icon .pathmdiContentCut sloticon/ha-svg-icon Cut /ha-dropdown-item ha-dropdown-item ha-svg-icon .pathmdiContentCopy sloticon/ha-svg-icon Copy /ha-dropdown-item ha-dropdown-item disabled ha-svg-icon .pathmdiContentPaste sloticon/ha-svg-icon Paste /ha-dropdown-item ha-dropdown-item Show images ha-dropdown-item slotsubmenu valueshow-all-images Show all images/ha-dropdown-item ha-dropdown-item slotsubmenu valueshow-thumbnails Show thumbnails/ha-dropdown-item /ha-dropdown-item ha-dropdown-item typecheckbox checkedEmoji shortcuts/ha-dropdown-item ha-dropdown-item typecheckbox checkedWord wrap/ha-dropdown-item ha-dropdown-item variantdanger ha-svg-icon .pathmdiDelete sloticon/ha-svg-icon Delete /ha-dropdown-item /ha-dropdowngallery 中的 ha-dropdown 演示组件 用同样的结构渲染了该示例并包裹在demo-theme-comparison内做明暗主题对比展示可运行 gallery 开发脚本gallery/script/build_gallery/gallery/script/develop_gallery在浏览器中直接查看效果。菜单项能力逐项拆解结合 ha-dropdown-item 源码 与上述示例ha-dropdown-item支持以下核心特性能力用法说明图标ha-svg-icon sloticon .path...在菜单项左侧渲染图标默认颜色取自--ha-color-on-neutral-normal禁用disabled布尔属性置灰且不可点击子菜单ha-dropdown-item slotsubmenu value...嵌套在父菜单项内形成二级菜单value用于标识选项长列表自动限高滚动复选框typecheckboxchecked渲染勾选图标checked控制选中态危险变体variantdanger图标与文字使用危险色--ha-color-on-danger-quiet用于删除类操作选中高亮selected布尔属性reflect选中项加粗并使用主色--primary-color与浅主色填充背景其中复选框图标由renderCheckboxIcon()渲染选中显示mdiCheckboxMarked未选中显示mdiCheckboxBlankOutline见 ha-dropdown-item.ts。子菜单的限高样式定义在#submenu[popover]规则中max-height: calc(100dvh - var(--ha-space-4)); overflow-y: auto保证手机端标签类长菜单滚动而不溢出屏幕。源码实现基于 Web Awesome 的封装与扩展从源码结构看HaDropdown直接继承home-assistant/webawesome的Dropdown类并通过customElement(ha-dropdown)注册为自定义元素见 ha-dropdown.ts。其封装要点包括1. 自定义标签名映射property({ attribute: false }) dropdownTag ha-dropdown; property({ attribute: false }) dropdownItemTag ha-dropdown-item;它显式指定弹层内使用ha-dropdown与ha-dropdown-item标签确保与项目内的主题样式绑定。2. 支持替代锚点anchor组件通过anchorElement的 getter/setter 允许把锚点指向ha-icon-button等替代元素而不局限于默认slottrigger的按钮。切换锚点时若原锚点是ha-icon-button会先清除其selected选中态避免菜单关闭后图标仍停留在高亮状态ha-dropdown.ts。3. 显隐联动showMenu()在弹层打开后会把ha-icon-button类型的触发器标记为selectedhideMenu()在关闭时还原形成图标按钮按下态的视觉反馈ha-dropdown.ts。4. 主题化样式组件样式由Dropdown.styles与自定义 CSS 合并而成ha-dropdown.ts字体大小遵循--ha-dropdown-font-size缺省回退到--ha-font-size-m弹层面板背景色--wa-color-surface-raised映射到--card-background-color依次回退--ha-dialog-surface-background、--mdc-theme-surface使菜单与卡片外观一致菜单内边距使用设计令牌--ha-space-1并让弹层宽度不超过--safe-width减去--ha-space-5针对 Android 导航条与刘海屏做了安全区适配底部弹出时减去--safe-area-inset-bottom顶部弹出时减去--safe-area-inset-top防止长菜单被系统 UI 遮挡wa-popup::part(popup)的z-index设为 200确保浮层位于页面内容之上。菜单项ha-dropdown-item同样继承 Web Awesome 的DropdownItem其选中态selected样式与--primary-color联动并保持最小高度--ha-space-10与长文本自动换行ha-dropdown-item.ts。事件与常用属性在项目源码中ha-dropdown常用以下事件与属性wa-select菜单项被选中时触发。事件负载event.detail.item即被选中的ha-dropdown-item通过value可读取选项值类型为HaDropdownSelectEventTValue, TDataha-dropdown.ts若菜单项设置了datadetail中会额外携带data字段。wa-show/closed弹层显示/关闭事件常用于打开时同步宽度、记录状态或阻止事件冒泡。placement弹层位置例如placementbottom、placementbottom-end。一个典型的事件处理写法来自 ha-form-optional_actions.tsprivate _handleAddAction(ev: HaDropdownSelectEvent) { const action ev.detail.item.value; this._displayActions [...(this._displayActions ?? []), action]; }项目内的真实应用场景ha-dropdown在 frontend 中已大量落地可作为组件选型的参考更多设置菜单supervisor-app-config.ts 中卡片头部用ha-icon-button slottrigger作为触发按钮菜单内包含在 UI / YAML 间切换编辑普通项与恢复默认设置variantdanger危险项并通过wa-select分发处理函数。表单可选操作ha-form-optional_actions.ts 将超出显示范围的表单动作折叠进下拉菜单触发按钮为ha-button appearancefilled sizes选项由hiddenActions.map()动态生成。相机选择器ha-qr-scanner.ts 在检测到多路摄像头时用ha-dropdown列出相机列表并通过.selected高亮当前相机。侧边栏编辑对话框dialog-edit-sidebar.ts 将恢复默认设置放入slotheaderActionItems的下拉菜单中使用placementbottom-end贴齐头部右侧。溢出菜单封装ha-icon-overflow-menu.ts 在窄屏narrow模式下把多个操作折叠成ha-dropdownha-icon-button(mdiDotsVertical)并支持wa-divider分隔线与危险项。控件级选择菜单ha-control-select-menu.ts 内部同样基于ha-dropdown placementbottom实现配合wa-show在打开时把触发器宽度同步到--control-select-menu-width使弹层宽度与按钮对齐。在画廊中预览与调试想快速预览ha-dropdown在明暗主题下的完整效果可运行 gallery 项目# 开发模式 gallery/script/develop_gallery # 构建 gallery/script/build_gallerygallery 的演示源码位于 gallery/src/pages/components/ha-dropdown.ts对应的文档即 gallery/src/pages/components/ha-dropdown.markdown。此外ha-dropdown是 Web Awesome dropdown 的再封装底层弹层定位、焦点管理与键盘导航能力均继承自上游组件若需了解完整的 API 属性如placement的全部取值、hoist等可直接查阅 Web Awesome 官方组件文档。小结ha-dropdown以组合优于配置的方式让开发者用最少的模板代码搭建出功能完整的下拉菜单自定义触发器用slottrigger富内容菜单项用ha-dropdown-item子菜单、复选框、禁用与危险变体开箱即用同时通过 CSS 变量与设计令牌完全融入 Home Assistant 的主题体系。本文覆盖了它的实现原理、完整示例、事件契约与项目内真实用例可以作为你在前端开发中选用或扩展该组件的直接参考。赞分享前端智能家居UI组件【免费下载链接】frontend:lollipop: Frontend for Home Assistant项目地址https://gitcode.com/gh_mirrors/frontend149/frontend点击查看免费下载相关推荐Ant Design Dropdown 按钮式下拉菜单Button with dropdown menu组合实战指南Ant Design Dropdown 按钮式下拉菜单Button with dropdown menu组合实战指南 本指南围绕 ant design 官方前端UI组件设计系统react-bootstrap下拉菜单高级用法Dropdown组件深度解析react bootstrap下拉菜单高级用法Dropdown组件深度解析 react bootstrap的Dropdown组件是构建交互式导航和操作菜单的核前端UI组件ant-design-vue Dropdown 下拉菜单组件完整指南API、事件与源码实现剖析ant design vue Dropdown 下拉菜单组件完整指南API、事件与源码实现剖析 向下弹出的命令集合菜单是后台系统中最高频的导航交互之一。本文以前端UI组件设计系统上一篇告别动态IP烦恼5分钟搞定DDNS自动域名解析终极指南下一篇3个终极技巧用dr/drei的Bvh和Instances组件大幅提升Three.js性能创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考