请选择 进入手机版 | 继续访问电脑版

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

 找回密码
 立即注册
查看: 928|回复: 13

[UI界面] 真正的自定义,超牛逼卡片集成重新定义你的界面

[复制链接]

21

主题

146

帖子

1216

积分

论坛技术达人

积分
1216
金钱
1070
HASS币
0
发表于 7 天前 | 显示全部楼层 |阅读模式
本帖最后由 nuknoop 于 2024-6-8 12:42 编辑

无意冲浪的时候,突然发现去年外面的世界里有个大佬开发的卡片集成相当牛逼


hacs 安装TailwindCSS Template 卡片


之后再编辑器中可以选择任意卡片,直接可以修改,之后再内部就可以直接显示传感器的数值或者控制开关灯


https://daisyui.com/blog/bidirectional/ 官方样式
https://components.willpinha.link/alert/ 汇总样式


性能测试下来非常好,大家可以都试试
一起给面板中添砖加瓦,目前没啥头绪,所以希望界面大佬可以基于如此写出更多可以复制的卡片


可以实现起来很好看的卡片,例如彩云天气卡片等


截屏2024-06-08 12.00.31.png 截屏2024-06-08 11.59.30.png






评分

参与人数 1金钱 +1 收起 理由
summ99111 + 1 感谢楼主分享!

查看全部评分

回复

使用道具 举报

21

主题

146

帖子

1216

积分

论坛技术达人

积分
1216
金钱
1070
HASS币
0
 楼主| 发表于 7 天前 | 显示全部楼层
例如

<div class="flex flex-col">
  <div class="form-control h-12 justify-center w-full">
    <label class="cursor-pointer label justify-between items-center">
      <span class="label-text text-center w-full">厨房灯</span>
      <input type="checkbox" class="toggle toggle-primary" 
        {{ iif(is_state('light.xiaomi_mesh_triple_wall_switch_channel_2', 'on'), "checked", "") }} 
        onChange="this.checked ? hass.callService('light', 'turn_on', { entity_id: 'light.xiaomi_mesh_triple_wall_switch_channel_2' }) : hass.callService('light', 'turn_off', { entity_id: 'light.xiaomi_mesh_triple_wall_switch_channel_2' })" 
      />
    </label>
  </div>
</div>

截屏2024-06-08 12.41.11.png
回复

使用道具 举报

21

主题

146

帖子

1216

积分

论坛技术达人

积分
1216
金钱
1070
HASS币
0
 楼主| 发表于 7 天前 | 显示全部楼层
本帖最后由 nuknoop 于 2024-6-8 12:53 编辑
<!-- The button to open modal -->
<label for="my_modal_6" class="btn">open modal</label>

<!-- Put this part before </body> tag -->
<input type="checkbox" id="my_modal_6" class="modal-toggle" />
<div class="modal" role="dialog">
  <div class="modal-box">
    <h3 class="font-bold text-lg">Hello!</h3>
    <p class="py-4">测试下</p>
    <div class="modal-action">
      <label for="my_modal_6" class="btn">关掉</label>
    </div>
  </div>
</div>

弹窗方式,抛弃mod插件臃肿

604C67AD4E7CD9F089BBF4F46FEAC955.png
回复

使用道具 举报

2

主题

97

帖子

1470

积分

金牌会员

Rank: 6Rank: 6

积分
1470
金钱
1373
HASS币
0
发表于 7 天前 | 显示全部楼层
确实很强大,就是需要有css基础
回复

使用道具 举报

56

主题

376

帖子

1693

积分

金牌会员

Rank: 6Rank: 6

积分
1693
金钱
1312
HASS币
0
发表于 7 天前 | 显示全部楼层
期待有教程
回复

使用道具 举报

3

主题

130

帖子

1069

积分

金牌会员

Rank: 6Rank: 6

积分
1069
金钱
939
HASS币
0
发表于 6 天前 | 显示全部楼层
习惯mod那种了。。。。
回复

使用道具 举报

2

主题

163

帖子

596

积分

高级会员

Rank: 4

积分
596
金钱
433
HASS币
0
发表于 3 天前 | 显示全部楼层
持续关注
回复

使用道具 举报

0

主题

18

帖子

58

积分

注册会员

Rank: 2

积分
58
金钱
40
HASS币
0
发表于 前天 09:43 | 显示全部楼层
测试下,看看好不好使
回复

使用道具 举报

1

主题

99

帖子

623

积分

高级会员

Rank: 4

积分
623
金钱
524
HASS币
0
发表于 前天 09:57 来自手机 | 显示全部楼层
好看,但是纯代码有难度了
回复

使用道具 举报

21

主题

581

帖子

2469

积分

金牌会员

Rank: 6Rank: 6

积分
2469
金钱
1888
HASS币
0
发表于 昨天 08:43 | 显示全部楼层
nuknoop 发表于 2024-6-8 12:50
弹窗方式,抛弃mod插件臃肿

弹出可以不需要安装mod了?
回复

使用道具 举报

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

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-6-15 13:05 , Processed in 0.086142 second(s), 35 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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