当前位置:首页 » 《关注互联网》 » 正文

探索卡片魔力:Home Assistant前端定制工具——card-mod 3

17 人参与  2024年09月19日 14:41  分类 : 《关注互联网》  评论

点击全文阅读


探索卡片魔力:Home Assistant前端定制工具——card-mod 3

lovelace-card-mod? Add CSS styles to (almost) any lovelace card项目地址:https://gitcode.com/gh_mirrors/lo/lovelace-card-mod

在智能家居控制的舞台上,Home Assistant以其强大和灵活的特性赢得了众多用户的青睐。为了进一步提升用户体验,我们有这样一个神奇的开源项目——card-mod 3,它让你能够随心所欲地为Home Assistant前端应用自定义CSS样式。

安装及性能优化

要安装card-mod 3,你可以选择通过HACS(Home Assistant Community Store)进行集成,或者按照官方提供的安装指南手动操作。若想提升性能,将其作为前端模块安装也是一个不错的选择。只需在configuration.yaml文件中添加相应配置,然后重启Home Assistant,即可享受无缝且高效的定制体验。

快速上手

启动card-mod 3十分简单。打开你想修改的卡片,在GUI编辑器中点击“显示代码编辑器”按钮,将以下代码粘贴到底部:

card_mod:  style: |    ha-card {      color: red;    }

你会看到卡片的文字立刻变为红色,并出现一个画刷图标,标志着该卡片已启用card-mod代码,视觉编辑器将不会显示这部分自定义内容。

使用方法

样式化卡片

在卡片配置中添加card_mod属性并指定style,就像这样:

card_mod:  style: <STYLES>

这里,<STYLES>可以是任何有效的CSS字符串,这些样式将会被注入到卡片的ha-card元素中。需要注意的是,card-mod仅适用于包含ha-card元素的卡片。

样式化实体、徽章和元素

entitiesglance卡片中,每个实体都可以有自己的选项。只需要在实体配置中增加card_mod字段,便能对它们进行单独的样式调整。对于这些情况,样式会被注入到阴影DOM内,可以直接访问最底层的:host元素。

改变图标

安装了card-mod后,ha-icon元素会响应CSS变量--card-mod-icon来设置其图标,以及根据--card-mod-icon-color设置图标的颜色(即使状态改变也有效),除非你也设置了--card-mod-icon-dimnone

- entity: light.bed_light  card_mod:    style: |      :host {        --card-mod-icon: mdi:bed;      }

模板与DOM导航

所有样式都支持Jinja2模板,这意味着你可以利用Home Assistant的后端处理模板。card-mod还提供了一些额外的变量供模板使用,例如卡片配置config、当前用户名称user、浏览器标识browser以及URL哈希hash

针对阴影DOM的复杂性,card-mod提供了特殊的CSS查询方式。你可以在style属性中使用字典结构,键用于指定选择器,值则表示要注入的样式。美元符号 ($) 将被替换为 #shadow-root 进行选择。例如,改变markdown卡片中第三级标题的颜色和背景:

card_mod:  style:    ha-markdown$: |      h3 {        color: purple;      }    .: |      ha-card {        background: teal;      }

项目特点

易用性强:无需深入HTML或CSS知识,通过简单的YAML配置即可实现前端界面个性化。灵活性高:从整体布局到细节元素,无论是卡片还是实体,你都有权定制。兼容广泛:支持大部分可查看的卡片类型,也可应用于实体和badge。性能优化:作为前端模块安装,可显著提高应用效率。模板支持:允许利用Jinja2模板动态生成样式,实现更智能的自定义。

如果你热爱探索,喜欢个性化的界面设计,那么card-mod 3无疑是你的得力助手。立即尝试,让你的Home Assistant焕发出独一无二的魅力吧!

lovelace-card-mod? Add CSS styles to (almost) any lovelace card项目地址:https://gitcode.com/gh_mirrors/lo/lovelace-card-mod


点击全文阅读


本文链接:http://zhangshiyu.com/post/161738.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1