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

 找回密码
 立即注册
查看: 548|回复: 9

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

[复制链接]

17

主题

76

帖子

681

积分

论坛分享达人

积分
681
金钱
605
HASS币
10
发表于 6 天前 | 显示全部楼层 |阅读模式
我之前的帖子:写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使用方法时的经验和方法,有兴趣的可以关注下




回复

使用道具 举报

40

主题

2179

帖子

8348

积分

元老级技术达人

积分
8348
金钱
6154
HASS币
110
发表于 6 天前 | 显示全部楼层
关注有一阵了 后面准备也替换下
browser_mod好像很久不更新了
回复

使用道具 举报

3

主题

59

帖子

370

积分

中级会员

Rank: 3Rank: 3

积分
370
金钱
311
HASS币
0
发表于 6 天前 | 显示全部楼层
本帖最后由 hassmingovo 于 2024-12-30 19:13 编辑

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

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

使用道具 举报

22

主题

624

帖子

2833

积分

金牌会员

Rank: 6Rank: 6

积分
2833
金钱
2209
HASS币
0
发表于 5 天前 | 显示全部楼层
这位大佬提供的 试下?
https://bbs.hassbian.com/thread-27772-1-1.html
回复

使用道具 举报

11

主题

319

帖子

1717

积分

金牌会员

Rank: 6Rank: 6

积分
1717
金钱
1398
HASS币
0
发表于 5 天前 | 显示全部楼层
看着不错。browser弹出的动画太生硬了
回复

使用道具 举报

0

主题

21

帖子

59

积分

注册会员

Rank: 2

积分
59
金钱
38
HASS币
0
发表于 5 天前 | 显示全部楼层
你这个也太萌了,谢谢
回复

使用道具 举报

1

主题

62

帖子

1739

积分

金牌会员

Rank: 6Rank: 6

积分
1739
金钱
1672
HASS币
20
发表于 3 天前 | 显示全部楼层
browser_mod 创建一堆实体看着烦,有空了研究下也换换
回复

使用道具 举报

18

主题

282

帖子

2957

积分

论坛DIY达人

积分
2957
金钱
2660
HASS币
60
发表于 前天 20:15 | 显示全部楼层
由于您的浏览器禁用了COOKIE,视频无法正常播放
请设置开启COOKIE后刷新页面
回复

使用道具 举报

0

主题

4

帖子

68

积分

注册会员

Rank: 2

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

使用道具 举报

17

主题

76

帖子

681

积分

论坛分享达人

积分
681
金钱
605
HASS币
10
 楼主| 发表于 昨天 13:41 | 显示全部楼层
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-1-5 20:04 , Processed in 0.089138 second(s), 31 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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