Bubble Card 使用教程
项目介绍
Bubble Card 是一个为 Home Assistant 设计的极简主义卡片集合,具有漂亮的弹出式触摸效果。这个项目允许用户在 Home Assistant 的仪表板上添加各种类型的卡片,并通过弹出窗口展示更多详细信息。Bubble Card 支持多种卡片类型,包括按钮、媒体播放器、选择器等,并且可以通过 CSS 进行高度定制。
项目快速启动
安装步骤
使用 HACS 安装(推荐)
-
安装 HACS:
-
通过 HACS 安装 Bubble Card:
- 在 Home Assistant 侧边栏中,进入
HACS > Frontend
。 - 点击右下角的
+
按钮,搜索Bubble Card
,然后点击下载。
- 在 Home Assistant 侧边栏中,进入
-
添加 Bubble Card 到仪表板:
- 返回 Home Assistant 仪表板,点击右上角的编辑图标,进入编辑模式。
- 点击右下角的
添加卡片
,搜索Bubble Card
并添加。
手动安装
-
下载文件:
- 下载
bubble-card.js
和bubble-pop-up-fix.js
文件。
- 下载
-
添加文件到配置目录:
- 将下载的文件添加到
<config>/www
文件夹。
- 将下载的文件添加到
-
添加资源:
- 在仪表板上点击右上角的编辑图标,进入编辑模式。
- 再次点击编辑图标,选择
管理资源
。 - 点击
添加资源
,粘贴以下内容:/local/bubble-card.js?v=1
- 选择
JavaScript 模块
,然后创建。
-
刷新页面:
- 返回并刷新页面。
- 点击右下角的
添加卡片
,搜索Bubble Card
并添加。
配置示例
type: custom:bubble-card
card_type: button
name: 示例按钮
应用案例和最佳实践
自定义样式
Bubble Card 允许用户通过 CSS 进行高度定制。以下是一些常见的自定义样式示例:
-
更改字体大小:
styles: | * { font-size: 16px !important; }
-
更改按钮背景颜色:
styles: | .button { background-color: #ff0000 !important; }
弹出窗口
Bubble Card 支持将垂直堆栈转换为弹出窗口。每个弹出窗口默认隐藏,可以通过点击链接打开。
type: custom:bubble-card
card_type: pop-up
content:
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: button
name: 弹出按钮1
- type: custom:bubble-card
card_type: button
name: 弹出按钮2
典型生态项目
Bubble Card 可以与其他 Home Assistant 插件和项目结合使用,以增强用户体验。以下是一些典型的生态项目:
- Home Assistant Community Store (HACS):一个社区驱动的插件商店,提供各种 Home Assistant 插件和卡片。
- Lovelace UI:Home Assistant 的默认用户界面,支持自定义卡片和布局。
- Home Assistant Themes:允许用户自定义 Home Assistant 的外观和感觉。
通过结合这些项目,用户可以创建一个高度定制和功能丰富的 Home Assistant 仪表板。