按钮卡片（Button Card）自定义组件安装及使用指南

按钮卡片（Button Card）自定义组件安装及使用指南

button-card❇️ Lovelace button-card for home assistant项目地址:https://gitcode.com/gh_mirrors/bu/button-card

---

1. 项目目录结构及介绍

Button Card 是一个用于 Home Assistant 的自定义 Lovelace 卡片，它允许您以美观的方式展示和控制实体。以下是一般项目目录结构：

button-card/
├── button-card.js    // 主要的卡片脚本，包含了卡片的核心逻辑
├── button-card.css   // 样式文件，定义了卡片的外观
└── README.md         // 项目说明文档

• button-card.js: 这是卡片的JavaScript实现，包含卡片的定义以及各种功能。
• button-card.css: 提供卡片的样式，你可以根据需求修改这些CSS规则来自定义卡片的视觉效果。
• README.md: 文档文件，提供了详细的使用和配置说明。

---

2. 项目启动文件介绍

在 Home Assistant 中，button-card.js 文件作为自定义资源来加载。为了使用此卡片，你需要在 ui-lovelace.yaml 配置文件中添加资源引用和卡片配置。启动流程如下：

1. 将 button-card.js 文件上传到你的 Home Assistant /config/www/hacsfiles/button-card/ 目录。
2. 在 ui-lovelace.yaml 添加以下资源定义：

   resources:
     - url: /local/hacsfiles/button-card/button-card.js
       type: module
   

3. 重启 Home Assistant 或刷新 Lovelace UI 页面使更改生效。

---

3. 项目的配置文件介绍

ui-lovelace.yaml 或者 Lovelace Editor 是配置 Button Card 的地方。下面是一个示例卡片配置：

views:
  - badges:
      - type: "custom:button-card"
        entity: light.bedroom_light
        icon: mdi:lightbulb
        show_name: false
        show_state: false
        color: white
        tap_action:
          action: toggle

• entity: 必填项，指定要控制的实体ID，例如灯光或开关等。
• icon: 可选，设置显示的图标，可以是 Material Design 图标。
• show_name, show_state: 可选，控制是否显示名称和状态。
• color: 可选，设置卡片的颜色，默认根据实体状态变化。
• tap_action: 可选，点击卡片时执行的动作，如这里设置为切换实体状态。

可以通过添加更多属性和模板进行更复杂的自定义。具体配置选项和变量可以在项目README或者官方文档中找到详细说明。

---

以上就是 Button Card 的基本安装和使用步骤。通过灵活配置，你可以创建出符合你个性化的家居控制界面。如有更多疑问，可参考项目仓库中的文档和示例。

button-card❇️ Lovelace button-card for home assistant项目地址:https://gitcode.com/gh_mirrors/bu/button-card