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

盗掘爱情

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

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

lyx7762

下面的代码可以实现风扇开启后，图标旋转。

更多图标参考这个 https://community.home-assistant ... -part-1/388590/3240

  - type: custom:mushroom-template-card
    primary: Climate
    secondary: |-
      {% set state = states('climate.xiaomi_c16_260d_air_conditioner') %}
        {% if state == 'cool' %}
          ❄️
        {% elif state == 'dry' %}
          💧
        {% elif state == 'fan_only' %}
          🌬️
        {% elif state == 'heat' %}
          🔥
        {% elif state == 'off' %}
          ⚡
        {% else %}
          ❓
        {% endif %}{{state}}
    icon: mdi:fan
    icon_color: "#16C47F"
    layout: vertical
    tap_action:
      action: navigate
      navigation_path: "#climate"
    badge_icon: |
      {% set lights_on = states('sensor.ac_on_count') | int %}
      {% if lights_on > 9 %}
        mdi:numeric-9-plus
      {% elif lights_on > 0 and lights_on < 10 %}
        mdi:numeric-{{ lights_on }}
      {% endif %}
    badge_color: "#77B254"
    card_mod:
      style: |
        {% if states('climate.xiaomi_cn_584928813_c16') != 'off' 
            or states('climate.xiaomi_cn_571004662_m4') != 'off' 
            or states('fan.dmaker_cn_507942370_p8_s_2') != 'off' %}
          ha-card {
            --animation-duration: 1s;
            border-radius: 10px;
            font-family: "Red Hat Display", sans-serif;
          }
          ha-state-icon {
            animation: spin var(--animation-duration) linear infinite;
          }
          @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
          }
        {% endif %}
        :host {
          perspective: 900px;
        }
        ha-card:active {
          transform: scale(0.9);
          transition: 0s;
        }

复制代码

盗掘爱情

lyx7762 发表于 2025-6-16 08:49
下面的代码可以实现风扇开启后，图标旋转。

更多图标参考这个 https://community.home-assistant.io/t/mus ...

感谢提供资源，我去研究研究