bubble-card弹窗卡片使用方法分享

gasment

bubble-card的弹窗效果可以看下我之前的帖子：
使用bubble-card代替子视图和browser_mod弹窗，改造我的UI 2.0 - 『HomeAssistant』综合讨论区 - 『瀚思彼岸』» 智能家居技术论坛 - Powered by Discuz!

bubble-card的github项目地址：https://github.com/Clooos/Bubble-Card
项目说明里有详细的使用方法，我在这里尽我所能复读一下：

安装：
使用hacs商店，搜索bubble，找到Bubble Card，点进去下载，完成后刷新下页面即可食用。
      （版本release可以选择最新的beta版v2.3.4-beta.1，这个修复问题和流畅度比正式版好，作者说的）

使用：
1、页面视图，一般我使用部件视图，点击新增一个系统自带的垂直堆叠卡片，在垂直堆叠卡片的第一个卡片，选择自定义Bubble Card


2、card type 选择 pop-up（bubble card除了弹窗卡，还有其他很棒的实体/控制卡片，可以尝试使用一下），
     Hash这里相当于页面路径，改为一个唯一的即可，比如：#bedroom-light

3、header setting   

4、子按钮sub-button


5、pop-up-setting


6.pop-up trigger触发机制


7、pop-up close action弹窗关闭时触发


8、styling弹窗样式


9、完成一个简单的弹窗卡片




10、在其他卡片/按钮触发弹窗


11、styles里官方提供的修改元素的种类和方法



12、styles元素修改举例，更多样式参考官方文档

styles: >
  .bubble-name {   /* 设置name的字体大小和加粗，加粗为heavy */
  font-size:16px !important;
  font-weight: normal !important;
  } 

  .bubble-pop-up {    /* 设置弹窗高度 */
    height: 230px !important;    /* 设置弹窗内的堆叠高度 */
         
     /*height: ${hass.states['switch.211106241774699_power'].state === "on" ? '420px' : '300px'} !important; /*
    /*根据开关状态，动态设置高度/*

   max-height: 95vh !important;  /* 最大高度为95vh(95%屏幕高度），防止显示不全 */
   bottom: 0vh !important;
 } 

 .bubble-icon {   /* 设置icon的大小和颜色 */
   --mdc-icon-size: 30px !important;
   color: white !important;
 } 
 .bubble-icon-container {   /* 动态设置icon的背景颜色 ，可用js语法根据条件返回不同参数*/
    background: ${hass.states['binary_sensor.2l_zhu_wo_deng_he_ji'].state === 'on' ? 'rgb(255, 165, 0)' : 'rgb(211, 211, 211)'}        !important;
 }
        
 .bubble-sub-button-1 {   /* 动态设置子按钮1图标颜色和卡片背景颜色*/
    background-color: ${hass.states['sensor.2lzhu_wo_liang_du'].state === '明亮' ? 'Orange' : 'DarkSlateGray'} !important;
    color: white !important;
 }

 .bubble-sub-button-2 {  /* 动态设置子按钮2图标颜色和卡片背景颜色*/
    background-color: ${hass.states['sensor.2lzhu_wo_ren_zai'].state === '有人' ? 'Orange' : 'DarkSlateGray'} !important;
    color: white !important;
 }

 .bubble-sub-button-icon {   /* 设置子按钮图标大小/*
    --mdc-icon-size: 23px !important;
 }

 /* 设置子按钮1图标/*
 ${subButtonIcon[0].setAttribute("icon",hass.states['sensor.2lzhu_wo_liang_du'].state === '明亮' ? 'mdi:white-balance-sunny' :       'mdi:weather-night')}
 /* 设置子按钮2图标/*
 ${subButtonIcon[1].setAttribute("icon",hass.states['sensor.2lzhu_wo_ren_zai'].state === '有人' ? 'mdi:motion-sensor' :  'mdi:motion-sensor-off')}

 /* $开头的语句建议放最后，防止不生效/*

复制代码

13、打开ha 手机app时如果偶发随机弹出卡片，官方修复方法，在configuration.yaml的frontend字段下添加：

    extra_module_url:
        - /hacsfiles/Bubble-Card/bubble-pop-up-fix.js

复制代码

    偶发的随机弹窗貌似以不复发，新问题是，如果有弹窗开启情况下，直接后台划掉app，再次进入ha，100%重现这个弹窗。

Suchh

感谢分享

Ari

太棒了，很详细 会用了

llity

很详细，谢谢楼主

ghostist

看了下介绍 貌似有弹窗背景模糊（毛玻璃效果）的选项，但是我怎么调参数都实现不了，要么接近全黑，要么完全透明
楼主有实现吗？

gasment

ghostist 发表于 2025-1-7 08:58
看了下介绍 貌似有弹窗背景模糊（毛玻璃效果）的选项，但是我怎么调参数都实现不了，要么接近全黑，要么完 ...

试下调整这几个参数，左边是5，右边是0的效果

ghostist

gasment 发表于 2025-1-7 10:34
试下调整这几个参数，左边是5，右边是0的效果

感谢！ 试了下可以的 我原先给的值太大了
最近忙，等全移植过来再交作业

liu_han

遇到个问题不知道怎么解决，
我直接使用垂直堆叠，没有问题，如【图1】

垂直堆叠没问题

但是我在垂直堆叠中套一个水平堆叠，添加的内容就不可见了，如【图2】


添加触发以后，弹出的也没有内容，如【图3】


请问这个是哪里出的问题呢？怎么破？