『瀚思彼岸』» 智能家居技术论坛

 找回密码
 立即注册
查看: 1428|回复: 10

[UI界面] 使用bubble-card代替子视图和browser_mod弹窗,改造我的UI 2.0

[复制链接]

18

主题

90

帖子

823

积分

论坛UI达人

积分
823
金钱
733
HASS币
10
发表于 2024-12-30 15:55:11 | 显示全部楼层 |阅读模式
我之前的帖子:写UI断断续续写了快2个月,终于把手机UI搭得7788了 - 『HomeAssistant』综合讨论区 - 『瀚思彼岸』» 智能家居技术论坛 - Powered by Discuz!使用button-card写一些服务器状态监控页面,配合nodered - 『HomeAssistant』综合讨论区 - 『瀚思彼岸』» 智能家居技术论坛 - Powered by Discuz!

提到使用了browser_mod弹窗和子视图,但是一直有几个问题没法得到有效解决
1、子视图内如果有交互点击,它页面自带的返回按钮经常不好使
2、browser_mod弹窗内套用button-card,自定义的数值状态,在弹窗期间不会得到更新
3、browser_mod会创建N多实体
4、browser_mod没法仅在当前设备打开

了解到bubble-card插件,其弹出功能深得我心,很好的解决了以上遇到的问题,用几天时间学习了下,把原先的卡片进行了改造,
所有browser_mod弹窗都换位bubble-card的pop-up卡片,由于pop-up卡片使用 action: navigate来触发弹出,因此可以在pop-up卡片内继续嵌套pop-up卡,这样子视图也可以抛弃了

下面看下改造成果:


后面会单独出一篇帖子,讲下我摸索bubble-card使用方法时的经验和方法,有兴趣的可以关注下




回复

使用道具 举报

41

主题

2198

帖子

8508

积分

元老级技术达人

积分
8508
金钱
6295
HASS币
110
发表于 2024-12-30 16:26:42 | 显示全部楼层
关注有一阵了 后面准备也替换下
browser_mod好像很久不更新了
回复

使用道具 举报

4

主题

73

帖子

466

积分

中级会员

Rank: 3Rank: 3

积分
466
金钱
393
HASS币
0
发表于 2024-12-30 19:10:20 | 显示全部楼层
本帖最后由 hassmingovo 于 2024-12-30 19:13 编辑

bubble-card 确实用起来方便不少,基本都能可视化配置

                               
登录/注册后可看大图
回复

使用道具 举报

22

主题

649

帖子

2923

积分

金牌会员

Rank: 6Rank: 6

积分
2923
金钱
2274
HASS币
0
发表于 2024-12-31 00:19:06 | 显示全部楼层
这位大佬提供的 试下?
https://bbs.hassbian.com/thread-27772-1-1.html
回复

使用道具 举报

12

主题

346

帖子

1846

积分

金牌会员

Rank: 6Rank: 6

积分
1846
金钱
1500
HASS币
0
发表于 2024-12-31 09:19:20 | 显示全部楼层
看着不错。browser弹出的动画太生硬了
回复

使用道具 举报

0

主题

22

帖子

68

积分

注册会员

Rank: 2

积分
68
金钱
46
HASS币
0
发表于 2024-12-31 22:22:12 | 显示全部楼层
你这个也太萌了,谢谢
回复

使用道具 举报

1

主题

63

帖子

1839

积分

金牌会员

Rank: 6Rank: 6

积分
1839
金钱
1771
HASS币
20
发表于 2025-1-2 16:22:25 | 显示全部楼层
browser_mod 创建一堆实体看着烦,有空了研究下也换换
回复

使用道具 举报

18

主题

294

帖子

3062

积分

论坛DIY达人

积分
3062
金钱
2753
HASS币
100
发表于 2025-1-3 20:15:43 | 显示全部楼层
由于您的浏览器禁用了COOKIE,视频无法正常播放
请设置开启COOKIE后刷新页面
回复

使用道具 举报

1

主题

13

帖子

165

积分

注册会员

Rank: 2

积分
165
金钱
152
HASS币
0
发表于 2025-1-4 03:38:51 | 显示全部楼层
想問一下 可以顯示系統內存,CPU,GPU的長條圖示哪一張card呢!?
回复

使用道具 举报

18

主题

90

帖子

823

积分

论坛UI达人

积分
823
金钱
733
HASS币
10
 楼主| 发表于 2025-1-4 13:41:20 | 显示全部楼层
hqwaszx 发表于 2025-1-4 03:38
想問一下 可以顯示系統內存,CPU,GPU的長條圖示哪一張card呢!?

我用的是custom button-card,自定义布局,在卡片背景色中设置两种颜色的长度占比来模拟进度条
linear-gradient(to right, ${color1} ${percentage}%, ${color2} ${percentage}%)`
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2025-2-23 12:00 , Processed in 0.068510 second(s), 31 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表