home assistant弹出卡片

一、安装

安装步骤:

1、HACS - 集成 - 浏览并下载存储库:搜索 “browser_mod”,下载
在这里插入图片描述

2、重启homeassistant

在这里插入图片描述

3、配置 - 设备与服务 - 添加集成,搜索 “Browser mod”,添加

在这里插入图片描述

4、完成

二、使用

(1)先自定义弹出卡片的内容,把整段代码复制

type: vertical-stack
cards:
  - type: weather-forecast
    entity: weather.su_zhou_ku_dou_wu_lian_ke_ji_you_xian_gong_si
    forecast_type: daily

在这里插入图片描述

(2)点击一个实体,弹出自定义卡片内容

实体如下:

show_name: true
show_icon: true
type: button
tap_action:
  action: toggle
entity: weather.su_zhou_ku_dou_wu_lian_ke_ji_you_xian_gong_si

在这里插入图片描述

需要在弹出的模块的 tap_action里面增加:

tap_action:
	action: fire-dom-event
	browser_mod:
	  service: browser_mod.popup
	  data:
    	title: 弹出卡片标题
   		content: 弹出卡片内容

有时候添加的时候会闪一下然后出现

action: ""

如果出现这个问题就重新操作一次

把前面复制的自定义卡片内容复制进来,并用 Tab键对齐到content的下一层级即可。

show_name: true
show_icon: true
type: button
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      title: 天气
      content:
        type: vertical-stack
        cards:
          - type: weather-forecast
            entity: weather.su_zhou_ku_dou_wu_lian_ke_ji_you_xian_gong_si
            forecast_type: daily
entity: weather.su_zhou_ku_dou_wu_lian_ke_ji_you_xian_gong_si

当点击实体时,就能弹出自定义的弹窗来了:

在这里插入图片描述

相关推荐

  1. js对话框

    2024-07-16 16:16:03       18 阅读
  2. vue 消息框

    2024-07-16 16:16:03       29 阅读
  3. 【WPF】一个窗并显示一个列表

    2024-07-16 16:16:03       66 阅读
  4. css 实现 Popover 框样式

    2024-07-16 16:16:03       48 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-16 16:16:03       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-16 16:16:03       72 阅读
  3. 在Django里面运行非项目文件

    2024-07-16 16:16:03       58 阅读
  4. Python语言-面向对象

    2024-07-16 16:16:03       69 阅读

热门阅读

  1. Hive 常见问题

    2024-07-16 16:16:03       17 阅读
  2. Docker_指令篇

    2024-07-16 16:16:03       22 阅读
  3. 【利用Selenium+autoIt实现文件上传】

    2024-07-16 16:16:03       21 阅读
  4. 专升本(英语)1.0.2-july 15th 升本:210天

    2024-07-16 16:16:03       17 阅读
  5. day30【LeetCode力扣】18.四数之和

    2024-07-16 16:16:03       19 阅读
  6. 力扣 hot100 -- 技巧

    2024-07-16 16:16:03       21 阅读
  7. 【webpack开发环境下的配置】

    2024-07-16 16:16:03       22 阅读
  8. Win7电脑修改网卡配置连接千兆网络的方法

    2024-07-16 16:16:03       22 阅读
  9. 发布自动化:Gradle发布插件的配置全攻略

    2024-07-16 16:16:03       20 阅读