Bubble-Card 指南：安装与配置

Bubble-Card 指南：安装与配置

Bubble-CardBubble Card is a minimalist card collection for Home Assistant with a nice pop-up touch.项目地址:https://gitcode.com/gh_mirrors/bu/Bubble-Card

1. 项目目录结构及介绍

Bubble-Card 是一个用于 Home Assistant 的简约卡片集合，它提供了美观的弹出式功能。项目的基本目录结构如下：

Bubble-Card/
├── bubble-card.js         # 主要卡片逻辑代码
├── bubble-pop-up-fix.js   # 弹出修复辅助脚本
└── README.md               # 项目说明文档

这两个JavaScript文件是核心组件，你需要将它们添加到 Home Assistant 的自定义资源中以启用 Bubble-Card 功能。

2. 项目启动文件介绍

这个项目没有独立的启动文件，因为 Bubble-Card 是作为 Home Assistant 的自定义卡片来使用的。你需要在 Home Assistant 的配置里添加卡片定义，通常是通过 UI 编辑器或 YAML 文件来完成。

例如，在 configuration.yaml 或者 Home Assistant 的UI编辑模式下，你会创建一个如下的卡片配置：

type: 'custom:bubble-card'
card_type: 'button'     # 或其他支持的类型
styles: {...}           # 自定义CSS样式
...

3. 项目配置文件介绍

配置选项概览

以下是 Bubble-Card 卡片的主要配置选项：

• name：卡片的名称，类型为字符串。
• type: 必须设置为 custom:bubble-card 来指定使用此自定义组件。
• card_type: 可选值包括 button, cover, empty-column, horizontal-buttons-stack, media-player, pop-up, select 或 separator，用来定义卡片的类型。
• styles: 对象列表，允许你自定义卡片的CSS样式。

配置示例

创建一个简单的按钮型 Bubble-Card，你可以这样配置：

type: 'custom:bubble-card'
card_type: 'button'
styles:
  button:
    background-color: '#008CBA'
    color: 'white'
    font-size: '16px'

在这个例子中，我们创建了一个背景色为蓝色的按钮，白色字体，且字体大小为16像素。

更新与管理

如果你使用了 HACS 管理自定义集成，你可以直接从其界面更新 Bubble-Card。如果没有安装 HACS，你需要手动下载最新版本的 bubble-card.js 和 bubble-pop-up-fix.js 并更新本地资源。

记得每次更新文件后，更新 /local/bubble-card.js?v=<新版本号> 中的版本号以刷新浏览器缓存。

---

通过以上步骤，你应该能够成功安装并配置 Bubble-Card 为你的 Home Assistant 增添更多个性化和交互性。如有疑问，可以查阅项目README文件或社区讨论获取更多信息和支持。

Bubble-CardBubble Card is a minimalist card collection for Home Assistant with a nice pop-up touch.项目地址:https://gitcode.com/gh_mirrors/bu/Bubble-Card