Bubble Card 使用教程

项目介绍

Bubble Card 是一个为 Home Assistant 设计的极简主义卡片集合，具有漂亮的弹出式触摸效果。这个项目允许用户在 Home Assistant 的仪表板上添加各种类型的卡片，并通过弹出窗口展示更多详细信息。Bubble Card 支持多种卡片类型，包括按钮、媒体播放器、选择器等，并且可以通过 CSS 进行高度定制。

项目快速启动

安装步骤

使用 HACS 安装（推荐）

1. 安装 HACS：

   • 访问 HACS 安装文档 并按照指示下载和安装 HACS。
   • 完成 HACS 的基本配置，参考 HACS 配置文档。

2. 通过 HACS 安装 Bubble Card：

   • 在 Home Assistant 侧边栏中，进入 HACS > Frontend。
   • 点击右下角的 + 按钮，搜索 Bubble Card，然后点击下载。

3. 添加 Bubble Card 到仪表板：

   • 返回 Home Assistant 仪表板，点击右上角的编辑图标，进入编辑模式。
   • 点击右下角的 添加卡片，搜索 Bubble Card 并添加。

手动安装

1. 下载文件：

   • 下载 bubble-card.js 和 bubble-pop-up-fix.js 文件。

2. 添加文件到配置目录：

   • 将下载的文件添加到 <config>/www 文件夹。

3. 添加资源：

   • 在仪表板上点击右上角的编辑图标，进入编辑模式。
   • 再次点击编辑图标，选择 管理资源。
   • 点击 添加资源，粘贴以下内容：

     /local/bubble-card.js?v=1
     

   • 选择 JavaScript 模块，然后创建。

4. 刷新页面：

   • 返回并刷新页面。
   • 点击右下角的 添加卡片，搜索 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 仪表板。