Flex Table Card 使用教程

Flex Table Card 使用教程

flex-table-cardHighly Flexible Lovelace Card - arbitrary contents/columns/rows, regex matched, perfect to show appdaemon created content and anything breaking out of the entity_id + attributes concept项目地址:https://gitcode.com/gh_mirrors/fl/flex-table-card

项目介绍

Flex Table Card 是一个高度灵活的 Home Assistant Lovelace UI 自定义卡片，允许用户展示任意内容、列和行。它通过正则表达式匹配，完美地展示了由 AppDaemon 创建的内容，突破了传统的 entity_id 和属性概念。该卡片支持图标、完全可自定义的 CSS，并且可以可视化、格式化和修改任何表格数据。

项目快速启动

安装

1. 通过 HACS 安装：

   • 在 HACS 中搜索 flex-table-card，点击安装。
   • 将以下代码添加到你的 Lovelace UI 配置中：

     resources:
       - type: module
         url: /hacsfiles/flex-table-card/flex-table-card.js
     

2. 手动安装：

   • 找到你的 Home Assistant 配置目录（例如 ~/homeassistant/），进入 ~/homeassistant/www 目录（如果没有则创建）。
   • 运行以下命令下载 flex-table-card.js 文件：

     wget https://raw.githubusercontent.com/custom-cards/flex-table-card/master/flex-table-card.js
     

   • 在 Lovelace UI 配置中添加以下资源：

     resources:
       - type: module
         url: /local/flex-table-card.js
     

基本配置示例

以下是一个展示电池电量的基本配置示例：

type: 'custom:flex-table-card'
title: 电池电量
/* 标题（可选），如果设置则显示 */

应用案例和最佳实践

应用案例

1. 电量消耗视图：

   • 在一个视图中显示所有设备的电量消耗（按消耗排序）。

   type: 'custom:flex-table-card'
   title: 电量消耗
   

2. 电池状态视图：

   • 一次性显示所有设备的电池状态，避免忘记更换电池。

   type: 'custom:flex-table-card'
   title: 电池状态
   

3. 可点击实体弹出窗口：

   • 支持点击实体弹出窗口（选项）。

   type: 'custom:flex-table-card'
   title: 可点击实体
   

最佳实践

• 自定义 CSS：
  • 使用自定义 CSS 来美化表格，使其更符合你的 UI 风格。

  type: 'custom:flex-table-card'
  title: 自定义样式
  styles:
    custom_css: |
      .table-row {
        background-color: #f0f0f0;
      }
  

典型生态项目

Flex Table Card 可以与其他 Home Assistant 插件和卡片结合使用，以实现更复杂的数据可视化和自动化。以下是一些典型的生态项目：

1. AppDaemon：

   • 使用 AppDaemon 创建自定义数据源，并通过 Flex Table Card 展示。

2. Home Assistant Automation：

   • 结合 Home Assistant 自动化，动态更新表格数据。

3. 其他自定义卡片：

   • 与其他自定义卡片（如 button-card、lovelace-card-mod）结合，实现更丰富的 UI 效果。

通过这些生态项目的结合，可以大大扩展 Flex Table Card 的功能和应用场景。

flex-table-cardHighly Flexible Lovelace Card - arbitrary contents/columns/rows, regex matched, perfect to show appdaemon created content and anything breaking out of the entity_id + attributes concept项目地址:https://gitcode.com/gh_mirrors/fl/flex-table-card