本帖最后由 gasment 于 2025-8-29 15:48 编辑 废话不多说，先上图：
适合使用水平堆叠2个使用，手机界面友好，可以配合bubble-card弹窗使用 列举几个我在用的使用例子 灯类，带亮度色温控制的，可配置额外的控制按钮，动态图： 亮度色温直接使用more-info动作来拉起ha自带控件，简单高效
风扇类，可配置定时，风速之类的额外按钮， 动态图： 这些控件都是用nodered自建实体做的，不展开了，过于繁琐
插座类，可以配置显示当前功率等， ， 动态图：
对于不能随便开关的的电器，可以加个锁，防止误触： 锁定时，开关按钮无法触发，长按锁头图标可解锁10秒（秒数可自定义），10秒内可操作开关，超时后自动回锁，这个是button-card自带的功能
下面开始操作： 1、先去HACS搜索下载安装 button-card和card-mod，可选bubble-card（安装插件是基础知识，不赘述了） 2、在仪表盘原始代码插入我的button-card模板，附件
打开附件代码后，共有两个template模板：
single_button_control_card_with_option：用于卡片整体布局 animation_switch_template：用于开关按钮的动画样式 3、建议分批插入到到原始代码中，注意需要插入到首行，views的上面（button_card_templates:与views：同级都是顶格 ），格式缩进比较严格，注意边添加边检查
4、新建一个卡片，搜索输入yaml，选入手动编辑，之后粘贴代码： 注意注释说明！！！！！ 图例：
type: custom:button-card
triggers_update:
- example.entity.1
- example.entity.2 ##你的实体，该卡片用到的实体都要加到此处，用于刷新卡片状态
name: 夜灯 ###对应图例p1文字
variables:
entity: example.entity ####你的实体，此实体状态用于图标变化，背景色变化,图例p2的状态显示等
control_method: auto ###该电器的控制方式，自动化控制为auto，未做自动化为manual,对应图例p3，auto才会显示，非auto不显示文字
entity_on_icon: /local/ui_v3/apng_webp_icon/control_card/light/night_light_on.svg ##实体on时的图标路径
entity_on_bg: rgb(244,236,220) ##实体on时的卡片背景色
entity_off_icon: /local/ui_v3/apng_webp_icon/control_card/light/night_light_off.svg ##实体off时的图标路径
entity_off_bg: rgb(255,255,255) ##实体off时的卡片背景色
option_state: | ##图例p6中显示的状态，此处例子为亮度转换,注意替换light.entity为自己的实体名，如果没有，直接删掉js语句后配置为option_state: null
[[[
var brightness = states[`light.entity`].attributes.brightness;
brightness = parseFloat(brightness / 255 *100).toFixed(0)+"%"
return brightness
]]]
option_gb: rgb(255,170,0) ##图例中p5p6的背景颜色，如果没有，直接配置为option_gb: null
##option_show控制图例中p5p6 的显示时机，此处例子为灯打开才显示，注意替换example.entity为自己的实体名，
##如果没有，直接删掉js语句后配置为option_show: none
option_show: |
[[[
if (states[`example.entity`].state === "on"){
return "block";
} else {
return "none"
}
]]]
template: single_button_control_card_with_option ##引用模板
custom_fields:
option: #图例中p5p6的按钮配置，如果没有，直接从option到icon整段删掉
card:
type: custom:button-card
entity: example.entity #该实体用于点击p5p6打开的窗口，注意替换example.entity为自己的实体名
tap_action:
action: more-info
icon: mdi:brightness-6 #图例p5的图标
styles:
state:
- font-size: 12px ##如果P6字体大小不对，可单独调整px
switch:
card:
type: custom:button-card
entity: example.entity #该实体用于实际的开关操作，注意替换example.entity为自己的实体名
entity_on_color: "#FFAA00" #实体打开时，图例p7的颜色
template: animation_switch_template ##引用模板
lock:
enabled: true #给开关上锁，默认为false，加锁配置为true复制代码
option_state中显示功率？
option_state: | #注意替换example.entity为自己的实体名，该结果不保留小数，添加单位w
[[[
var power = states[`example.entity`].state;
power = parseFloat(power).toFixed(0)+"w"
return power
]]]复制代码
以及： 图例中用到的图标： 那个魔改的bubble-card弹窗
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#test" ##改为你自己的hash
button_type: name
card_layout: normal
width_desktop: 390px
styles: |-
.bubble-header-container {
height: 0px;
padding: 15px;
}
.bubble-close-icon {
--mdc-icon-size: 60px; /* 关闭弹窗按钮的大小调节*/
color: white;
}
.bubble-close-button {
position: absolute;
margin-top: 230px; /* 关闭弹窗按钮的垂直位置*/
margin-left: 270px; /* 关闭弹窗按钮的水平位置*/
height: 80px;
width: 80px;
background: rgb(199,207,226);
border-radius: 40px;
#box-shadow: 0px 0px 0px 2px rgb(112,116,135)
}
.bubble-pop-up-background {
border-radius: 30px;
width: 0 !important;
}
.bubble-pop-up {
bottom: 250px; /* 弹窗底部空白高度*/
height: 400px !important; /* 弹窗本体高度*/
}
复制代码
✅以上全部，欢迎反馈测试 
发表于 
