徽章如何实现图标动态显示

盗掘爱情

hungheo 发表于 2025-6-11 18:02
card_mod貌似对徽章不起作用呀
换成button card 吧

折腾半天，用你给的button card代码弄的差不多了，但是感觉跟系统自带徽章还是有差别，两行字中间的空隙比较原版有点大，图中左为系统徽章，右边是button card徽章，现在不知道该怎么调整了，能再指点下么？

hungheo

盗掘爱情 发表于 2025-6-12 16:47
折腾半天，用你给的button card代码弄的差不多了，但是感觉跟系统自带徽章还是有差别，两行字中间的空隙 ...

我的name和label的属性给的很明确呀
用Y轴对其方式来控制name和label的间距，没用padding和margin
name的字宽是12px，Y轴对其方式align-self: start
label的字宽是10px,Y轴对齐方式align-self: end


label的字体颜色可以增加一个，- font-color: var(--grey-color)

图标和文字的间隔用- column-gap: 8px来控制

盗掘爱情

hungheo 发表于 2025-6-12 17:27
我的name和label的属性给的很明确呀
用Y轴对其方式来控制name和label的间距，没用padding和margin
name的 ...

我就是用的你写的Y轴对齐方式，但最后这个缝隙怎么也收不回去，最后问了下AI，用padding和margin慢慢调整的，现在基本跟原版差不许多了。另外再问下蘑菇的方式和button card方式哪个好一些，如果用蘑菇的话，代码是不是跟button card差不多。本人比较小白，不吝赐教

hungheo

盗掘爱情 发表于 2025-6-12 19:06
我就是用的你写的Y轴对齐方式，但最后这个缝隙怎么也收不回去，最后问了下AI，用padding和margin慢慢调整 ...

能达到效果就行吧
mushroom card和ha自带的卡片都是一样的，支持jinja2模板，但仅能对预设的变量进行值的修改，比如 图标的样子，颜色、文字内容等等（就是你在UI编辑的时候框框里能填的内容）

但很多固定或者预设的CSS样式，比如 图标的大小、文字的粗细、动画等等就需要用card_mod插件修改。
card_mod是修改html中的卡片的相关标签样式，能修改大部分ha自带的卡片，和几乎全部的mushroom卡片

唯独没办法对徽章进行修改
所以徽章部分想要更多的自定义，button card最合适。

代码量整体上多个几百和少个几百性能上是不会有啥差别的，对于相同样式的卡片，很多插件都有模板模式（或者全局设定），把代码放入模板中，然后用2行代码引用就可以实现相同的样式。论坛上有很多教程的

盗掘爱情

hungheo 发表于 2025-6-12 21:01
能达到效果就行吧
mushroom card和ha自带的卡片都是一样的，支持jinja2模板，但仅能对预设的变量进行值的 ...

受教了。还有一个问题，原生徽章还能显示一些状态值，比如我看实体有个percentage属性，原生徽章可以在UI设置界面添加，现在我也想在button card加进来，该如何添加实现跟原生一样的效果呢？问了下AI，但效果不太理想，代码小白，能否再帮我补完一下代码？

type: custom:button-card
entity: fan.zhimi_cn_70713307_v3_s_2_fan
show_state: true
show_label: false
name: 风扇
label: 风扇
icon: mdi:fan
tap_action:
  action: toggle
extra_styles: |
  @keyframes spin { 
      0% {transform: rotate(0deg);} 
      100% {transform: rotate(360deg);} 
    }  
styles:
  grid:
    - grid-template-areas: |
        "i n" 
        "i s" 
    - grid-template-columns: 16px 1fr
    - grid-template-rows: 17px 17px
    - column-gap: 7px
    - row-gap: 0px
  card:
    - height: 36px
    - border-radius: 18px
    - padding: 0px 15px 0px 10px
  name:
    - font-size: 10px
    - justify-self: flex-start
    - align-self: center
    - margin-top: 1.5px
    - color: "#707070"
    - font-weight: 450
  state:
    - font-size: 12px
    - font-weight: 500
    - justify-self: flex-start
    - align-self: center
    - margin-bottom: 8px
  icon:
    - width: 18px
    - color: |
        [[[return entity && entity.state   == "on" ? "green" : "grey" ]]] 
    - animation: >
        [[[return entity && entity.state   == "on" ? "spin 1s linear infinite"
        :  "" ]]] 

复制代码

hungheo

盗掘爱情 发表于 2025-6-12 21:25
受教了。还有一个问题，原生徽章还能显示一些状态值，比如我看实体有个percentage属性，原生徽章可以在UI ...

修改label的内容就可以
button card 很多属性都接受JavaScript模板，
把你代码中的
label: 风扇

换成以下代码

label: |
  [[[ 
    const state = entity.state == "on" ? "开启" : "关闭";
    return `${state} · ${entity.attributes.percentage}% `
  ]]]

复制代码

其中entity.state是实体的状态，默认的是英文，帮你中文了
entity.attributes.percentage是你的百分比的附加属性，我这里不一定正确，需要你自己检查替换

盗掘爱情

hungheo 发表于 2025-6-12 21:41
修改label的内容就可以
button card 很多属性都接受JavaScript模板，
把你代码中的

感谢大神耐心指点，经过多次代码改进，已经大功告成

wbdownn

一直没用过徽章，主要用途是哪些？