本帖最后由 hungheo 于 2025-8-31 12:33 编辑
之前的手机客户端UI主要用card-mod和Decluttering Card来写的
虽然两个插件都很强大，但是用card-mod来left、right调位置确实调的辛苦
看了这个UI大神的分享：https://bbs.hassbian.com/thread-25894-1-1.html
自己用button card改了之前的UI，感觉舒服很多，尤其是2个不同分辨率的手机同时用一套UI的时候
个人觉得，button card适用于对css不熟悉的，对JavaScript熟悉的
本人不是程序员，纯属个人爱好，之前用nodered学了一点JavaScript，感觉用着还是比较顺畅
AI工具真的很强大，很好用，大部分代码或者问题都是问的AI，我用的是阿里的通义千问
参考链接：
本论坛的UI大神：https://bbs.hassbian.com/thread-25964-1-1.html
玩button card的国外大神：https://github.com/UI-Lovelace-Minimalist/UI
以下是分享的一些认识、技巧：
二楼：button card的基本操作，主要是布局部分
三楼：template模板介绍，简单使用
四楼：template使用中的几个小注意
五楼：一些觉得有意思的卡片模板分享
还在完善中，后面再分享一些自己的总结和基于模板卡片
如果有错误的地方，欢迎指正
有更好的idea，欢迎分享
2024-08-19：完整代码 在19楼
2024-11-15：更新extra_styles使用，在25楼
2025-08-31: 4.2.0版本新特性更新，本楼
最后，分享下自己的界面：
手机UI
PAD UI
0、button-card 4.2.0版本更新内容
（1）、可以使用部件布局
这个版本适配了部件布局，可以设置高度和宽度，和ha默认的ui编辑界面一样的了，具体代码：
type: custom:button-card
entity: sensor.youjia
icon: mdi:gas-station
name: 92#油价
section_mode: true
grid_options:
rows: 1 #行
columns: 6 #列
效果如下：
（2）、更新了子卡片套嵌下entity的简写使用规则
之前是用do_not_eval:true进行打断，详见本帖3.3https://bbs.hassbian.com/forum.php?mod=redirect&goto=findpost&ptid=26299&pid=619335
现在改为子卡片中的JavaScript模板多加一个[]来区分
代码示例：
type: custom:button-card
show_icon: false
show_state: false
show_name: false
styles:
grid:
- grid-template-areas: |
"a b c d e x y"
- grid-template-columns: 38px repeat(4, 1fr) 38px 38px;
- grid-template-rows: 1fr
- column-gap: 5px
card:
- height: 56px
custom_fields:
b:
# do_not_eval: true 取消
card:
type: custom:button-card
entity: input_select.home_button_select
show_icon: false
show_state: false
show_name: true
name: Home
styles:
card:
- height: 38px
# 之前是3个[],这里改为4个[]
- background: >
[[[[return entity.state == "home" ? "var(--accent-color)" : ""]]]]
name:
- font-size: 14px
- font-weight: bold
- justify-self: center
（3）、允许所有的action使用对象类型的模板
示例代码：
type: custom:button-card
variables:
my_action_object: |
[[[
if (entity.state == "on")
return {
action: "call-service",
service: "light.turn_off",
target: { entity_id: entity.entity_id }
}
else return { action: "none" }
]]]
entity: light.bed_light
tap_action: "[[[ return variables.my_action_object ]]]"
（4）、还有其他更新和修复内容，详见：
https://github.com/custom-cards/button-card/releases/tag/v4.2.0
| 
发表于 2024-7-27 12:10:22
