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

gasment

这是HA自带的tapbar(页面切换按钮），平平无奇


这是主题带的tapbar,just so so

这是bubble-card中horizontal-buttons-stack 做的 tapbar

动态效果：

• 底层是楼层卡，拉起不同区域的控制页面
• 倒数第二层是当前设备打开的数量，会根据最近打开的设备类型来自动排序，为0时不显示图标，角标数按实际变化，，其弹窗可以设计为专门用于快速关闭设备的页面
• 有两个用法，同一页面拉起不同弹窗，或不同视图之间切换（需要每个视图都部署这个tarbar，然后修改跳转地址）
• 可以使用静态图标，推荐使用动态图标（apng/webp），不推荐使用矢量图标动画或CSS动画，一是实现难度大，而是耗费性能
• 需要自定义实体配合，比如所有灯的打开统计，所有风扇的打开统计等
• 本人不熟悉css，下文中 css 样式修改都是从F12扒的，有能力的朋友可以自己优化增强
  

下面开始制作：
一、floor-card （楼层/区域选择卡）
图例：

卡片配置（新建卡片，选手动编辑，直接粘贴）
论坛排版可能有问题，可下载yaml文件

游客，如果您要查看本帖隐藏内容请回复

type: custom:bubble-card
card_type: horizontal-buttons-stack
highlight_current_view: true
hide_gradient: false
margin: 7px
rise_animation: false
1_link: "#1fctl"    #1号按钮点击打开的页面路径或pop-up hash
1_name: null
1_icon: none
2_link: "#2fctl"  #2号按钮点击打开的页面路径或pop-up hash
2_name: null
2_icon: none
3_link: "#serverctl"   #3号按钮点击打开的页面路径或pop-up hash
3_name: null
3_icon: none
styles: |
  .horizontal-buttons-stack-card::before {
    background: rgb(239,239,239) !important;
    height: 150px;
    margin-top: 25px !important;
    margin-left: -13px !important;
   
  }
  .bubble-button-1.highlight {   /*图标1高亮时属性*/
    animation: none !important;   /* 取消闪烁动画*/
    background-color: none !important;   /*取消背景色*/
    background-image: url("/local/ui_v3/apng_webp_icon/floor_card/1f/1f_highlight.png") !important;  /*图标路径*/
    background-size: cover  /*图标覆盖*/
    }
  .bubble-button-2.highlight {   /*图标2高亮时属性*/
      animation: none !important;    /*取消闪烁动画*/
      background-color: none !important;   /*取消背景色*/
      background-image: url("/local/ui_v3/apng_webp_icon/floor_card/2f/2f_highlight.png") !important;  /*图标路径*/
      background-size: cover  /*图标覆盖*/
      }
  .bubble-button-3.highlight {   /*图标3高亮时属性*/
      animation: none !important;   /* 取消闪烁动画*/
      background-color: none !important;   /*取消背景色*/
      background-image: url("/local/ui_v3/apng_webp_icon/floor_card/server/server_highlight.png") !important;  /*图标路径*/
      background-size: cover  /*图标覆盖*/
      }
  .bubble-button-1 {  /*图标1未高亮时属性*/
    background-image: url("/local/ui_v3/apng_webp_icon/floor_card/1f/1f_no_highlight.png") !important;  /*图标路径*/
    background-size: cover  /*图标覆盖*/
    }
  .bubble-button-2 {  /*图标2未高亮时属性*/
      background-image: url("/local/ui_v3/apng_webp_icon/floor_card/2f/2f_no_highlight.png") !important;  /*图标路径*/
      background-size: cover  /*图标覆盖*/
      }
  .bubble-button-3 {  /*图标3未高亮时属性*/
      background-image: url("/local/ui_v3/apng_webp_icon/floor_card/server/server_no_highlight.png") !important;  /*图标路径*/
      background-size: cover  /*图标覆盖*/
      }
  .bubble-background{
      display: none !important;
      }
  .bubble-background-color {
       border: 0px solid #FFFFFF !important;
       }
  .bubble-button {
       height: 60px;
       width: 100px;     /*按钮宽高*/
       }
  .horizontal-buttons-stack-card {
       bottom: 40px;  /*水平卡片位置从底部提升*/
       }
  .bubble-horizontal-buttons-stack-card-container {
       height: 100px !important;  /*水平卡片高度*/
       }




你可以制作自己喜欢的图标，按照按钮宽高比例，尽量放大原图尺寸，比如这里按钮宽高为60x100，制作的图标可以为300x500
如果你喜欢我的图标，欢迎下载（已包含AE工程文件，全矢量素材，可以自己修改）：

游客，如果您要查看本帖隐藏内容请回复

一、close-card （快速关闭卡）
图例：

卡片配置：
论坛排版可能有问题，可下载yaml文件：

游客，如果您要查看本帖隐藏内容请回复

需要实体配合，主属性为on/off，包含一个根据打开数量动态变化的图标路径属性，如：

当然你有法子用其他形式实现也是很ok的，我用开nodered，就用nodered做了，根据打开的数量来拼接对应图标的url即可：


type: custom:bubble-card
card_type: horizontal-buttons-stack
1_link: "#horizon-button-all-ac"    #1号按钮点击打开的页面路径或pop-up hash
1_name: null
2_link: "#horizon-button-all-fan"    #2号按钮点击打开的页面路径或pop-up hash
2_name: null
3_link: "#horizon-button-all-plug"    #3号按钮点击打开的页面路径或pop-up hash
3_name: null
4_link: "#horizon-button-all-light"    #4号按钮点击打开的页面路径或pop-up hash
4_name: null
5_link: "#horizon-button-all-vacuum"   #5号按钮点击打开的页面路径或pop-up hash
5_name: null
1_pir_sensor: sensor.kong_diao_lei_da_kai_tong_ji    ##1号按钮设备为打开的统计实体
2_pir_sensor: sensor.feng_shan_lei_da_kai_tong_ji    ##2号按钮设备为打开的统计实体
3_pir_sensor: sensor.cha_zuo_lei_da_kai_tong_ji       ##3号按钮设备为打开的统计实体
4_pir_sensor: sensor.deng_lei_da_kai_tong_ji          ##4号按钮设备为打开的统计实体
5_pir_sensor: sensor.zong_sao_di_ji_huo_dong_tong_ji   ##5号按钮设备为打开的统计实体
#######以上5个实体主属性需为on/off，来模拟Presence/Occupancy sensor,用于自动排列图标(最近变化的会排在前面）
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_lei_da_kai_tong_ji'].attributes.svg}") !important;  
      background-size: cover;
      display:      /*统计实体为off时，隐藏该图标*/
         ${hass.states['sensor.deng_lei_da_kai_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"};
  }



你可以制作自己喜欢的图标，按照按钮宽高比例，尽量放大原图尺寸，比如这里按钮宽高为50x70，制作的图标可以为300x420
如果你喜欢我的图标，欢迎下载（已包含AE工程文件，全矢量素材，可以自己修改）：

游客，如果您要查看本帖隐藏内容请回复

PS:

• 推荐搭配minimalist主题使用
• 可以使用minimalist-mobile主题来隐藏手机界面自带的tapbar,可以使用kiosk_mode来隐藏顶栏
• 如需修改floor-card的圆角大小，需要修改主题文件，比如我使用的主题为minimalis，则修改
  
  

    /config/custom_components/ui_lovelace_minimalist/lovelace/themefiles/minimalist-desktop/minimalist-desktop.yaml和
    /config/custom_components/ui_lovelace_minimalist/lovelace/themefiles/minimalist-mobile/minimalist-mobile.yaml
    这两个文件，在顶部插入：bubble-horizontal-buttons-stack-border-radius: 15px，如：
   

• 修改完成后，删除/config/themes/目录下同名主体，重启HA，清除浏览器缓存，强制刷新检查效果
  
  

PPS:你可能还需要那个看起来像是透明的pop-up弹窗

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#horizon-button-all-light"   #pop-up hash
    button_type: name
    bg_color: rgb(239.239,239)    #背景色，与ha浅色背景色一致，做伪透明
    bg_opacity: "100"
    shadow_opacity: "0"
    card_layout: normal
    bg_blur: "0"
    backdrop_blur: "100"
    show_header: false
    margin_top_mobile: "-50px"
    margin_top_desktop: "-50px"
    hide_backdrop: false
    margin: 7px
    width_desktop: 400px   #PC模式弹窗最大宽度
    styles: |-
      .bubble-pop-up {
        height: 300px !important;    /* 设置弹窗高度 */
        max-height: 95vh !important;  /* 最大高度，防止超过屏幕高度 */
        bottom: 0vh !important;
      }


      .bubble-pop-up-background {
        background: none !important;
       }

      .bubble-backdrop {
          background-color: rgb(239,239,239);  /*与ha浅色背景色一致，做伪透明 */
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: none;
          opacity: none;
          transition: none;
          transition-delay: none;
          backdrop-filter: none;
          -webkit-backdrop-filter: none;
      }

Ari

给力，ui大佬 很喜欢！

zza774886285

学习下

jimgo

厉害，看到改代码就是不小的工程哦。UI是最难弄

burntheguitar

这UI真好看

wskxwypl

太漂亮了。。。

花落花空

抄作业了

dajuadmin

学习学习

cqrg

做的真漂亮，赞！

Hinata

看看大佬的作品