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

gasment · 发表于 2025-2-5 17:30:11

liu_han 发表于 2025-2-1 10:04
遇到个问题不知道怎么解决，
我直接使用垂直堆叠，没有问题，如【图1】

bubble-card必须在垂直堆叠的第一个卡片，你可以把垂直堆叠的第二个卡片设置为水平堆叠卡片，在水平卡片下再放其他卡片就可以了

7815480 · 发表于 2025-2-14 10:22:10

请问我按照你这个设置，弹出的高度都是100%，不能根据弹出内容的高度自适应

xhily · 发表于 2025-2-15 00:24:57

试了下确实不错，他可以弹出类似这种页面吗

gasment · 发表于 2025-2-17 11:11:56

7815480 发表于 2025-2-14 10:22
请问我按照你这个设置，弹出的高度都是100%，不能根据弹出内容的高度自适应
...

高度我这是写死的，只是根据实体状态来返回不同高度预设值，实体关闭的时候只有一个开关就低一些，开启时多了控制部件就高些

.bubble-pop-up {
    height: ${hass.states['switch.211106241774699_power'].state === "on" ? '420px' : '300px'} !important;    /* 设置已知的堆叠高度 */
    max-height: 95vh !important;  /* 最大高度为，防止超过屏幕高度 */
    bottom: 0vh !important;
      }

bboyjim · 发表于 2025-2-19 21:43:48

LZ能把完整代码分享出来吗很喜欢你的卡片样式

klhd · 发表于 4 天前

是不是要弹出一个页面，也要把这个页面内容全部塞到一张垂直卡片里面

sundat · 发表于 4 天前

试试这个

		自动登录	找回密码
密码			立即注册

[UI界面] bubble-card弹窗卡片使用方法分享