纯bubble-card制作的底部tapbar，动态图标

wkbhll

不错，房子有多层的用这个挺好的。

wenbieba

这估计有一年都弄不出来，大佬厉害

wenbieba

不知什么原因，统计已创建，卡片实体已更改，图标不显示

gasment

wenbieba 发表于 2025-8-20 20:15
不知什么原因，统计已创建，卡片实体已更改，图标不显示

贴下卡片代码看看

[email protected]

感谢分享

wenbieba

gasment 发表于 2025-8-20 20:27
贴下卡片代码看看

type: custom:bubble-card
card_type: horizontal-buttons-stack
auto_order: true
highlight_current_view: true
rise_animation: true
styles: |-
  .horizontal-buttons-stack-card::before {
    margin-left: -5px !important;   
    }
  .horizontal-buttons-stack-card {
       bottom: 100px;  /*水平卡片位置从底部提升*/
       }
  .bubble-horizontal-buttons-stack-card-container{
    scale: 0.95;   /*图标大小缩放*/
    }
  .bubble-background{
      display: none !important;
      }
  .bubble-background-color {
       border: 0px solid #FFFFFF !important;
      }
  .bubble-button {
         height: 50px;
         width: 70px     /*按钮宽高*/
    }
  .bubble-button-1 {
      background-image:   /*读取实体属性来获取对应的图标路径*/
          url("${hass.states['sensor.kong_diao_lei_da_kai_tong_ji'].attributes.icon_path}") !important;  
      background-size: cover;   
      display:      /*统计实体为off时，隐藏该图标*/
         ${hass.states['sensor.kong_diao_lei_da_kai_tong_ji'].state === "on" ?  
        "flex":              
        "none"};
    }
  .bubble-button-2 {
      background-image:  /*读取实体属性来获取对应的图标路径*/
          url("${hass.states['sensor.feng_shan_lei_da_kai_tong_ji'].attributes.svg}") !important;  
      background-size: cover;
      display:  /*统计实体为off时，隐藏该图标*/
         ${hass.states['sensor.feng_shan_lei_da_kai_tong_ji'].state === "on" ?
        "flex":
        "none"};
    }
  .bubble-button-3 {
      background-image:  /*读取实体属性来获取对应的图标路径*/
          url("${hass.states['sensor.cha_zuo_lei_da_kai_tong_ji'].attributes.svg}") !important;  
      background-size: cover;
      display:  /*统计实体为off时，隐藏该图标*/
         ${hass.states['sensor.cha_zuo_lei_da_kai_tong_ji'].state === "on" ?
        "flex":
        "none"};
    }
  .bubble-button-4 {
      background-image:   /*读取实体属性来获取对应的图标路径*/
          url("${hass.states['sensor.deng_guang_zhuang_tai_tong_ji'].attributes.svg}") !important;  
      background-size: cover;
      display:      /*统计实体为off时，隐藏该图标*/
         ${hass.states['sensor.deng_guang_zhuang_tai_tong_ji'].state === "on" ?
        "flex":
        "none"};
    }
  .bubble-button-5 {
      background-image:   /*读取实体属性来获取对应的图标路径*/
          url("${hass.states['sensor.zong_sao_di_ji_huo_dong_tong_ji'].attributes.svg}") !important;  
      background-size: cover;
      display:     /*统计实体为off时，隐藏该图标*/
         ${hass.states['sensor.zong_sao_di_ji_huo_dong_tong_ji'].state === "on" ?
        "flex":
        "none"};
    }
1_name: null
1_link: "#horizon-button-all-light"
1_pir_sensor: sensor.deng_guang_zhuang_tai_tong_ji

wenbieba

gasment 发表于 2025-8-20 20:27
贴下卡片代码看看

删除了其他留一个测试，把原来实体的数量改为已开启已关闭，也不行

wenbieba

有人成功了吗

gasment

wenbieba 发表于 2025-8-20 20:42
删除了其他留一个测试，把原来实体的数量改为已开启已关闭，也不行

要修改成自己的实体，比如你的1号按钮是：1_pir_sensor: sensor.deng_guang_zhuang_tai_tong_ji
那么你要修改这里：
.bubble-button-1 {
      background-image:   /*读取实体属性来获取对应的图标路径*/
          url("${hass.states['你自己的实体名'].attributes.icon_path}") !important;  
      background-size: cover;   
      display:      /*统计实体为off时，隐藏该图标*/
         ${hass.states['你自己的实体名'].state === "on" ?  
        "flex":              
        "none"};
    }

wenbieba

gasment 发表于 2025-8-20 21:14
要修改成自己的实体，比如你的1号按钮是：1_pir_sensor: sensor.deng_guang_zhuang_tai_tong_ji
那么你要 ...

目前用灯光4号测试，实体已改4_pir_sensor: sensor.deng_guang_zhuang_tai_tong_ji

  .bubble-button-4 {
      background-image:   /*读取实体属性来获取对应的图标路径*/
          url("${hass.states['sensor.deng_guang_zhuang_tai_tong_ji'].attributes.svg}") !important;  
      background-size: cover;
      display:      /*统计实体为off时，隐藏该图标*/
         ${hass.states['sensor.deng_guang_zhuang_tai_tong_ji'].state === "on" ?
        "flex":
        "none"};
  }