HA文档 目录

  1. 首页
  2. HA文档
  3. HA文档
  4. LoveLace UI文档

LoveLace UI文档

LoveLace UI文档
0.86版本的HomeAssistant已经默认LoveLace文档,可选编辑模式有两种,一种为前端编辑模式,一种为使用yaml模式.

全局配置

默认模式为前端编辑模式,若要启用yaml模式,在config文件中添加如下代码:
使用yaml必须的元素:

我们先来给HA增加一张背景图片,将图片放置于www文件夹下

图片可以加在views之上,作为全局图片.或者你也可以加在每个页面上.

如果我们要开多个页面并给每个页面加上图标的话,要在增加以下代码

 

页面卡

基本配置

举个🌰


其中cards表示每个页面内的卡片,可继续扩展出其他的卡片

状态卡

 配置结构


state与state_not必须有一个,并且具有多个实体的将会被视为and条件,所有实体必须同时满足条件

举个🌰

实体卡

实体卡非常接近旧UI的组的概念,这也是用到最多的卡片

配置结构

实体可配置的选项

举个🌰
接下来让我们在这个卡片中添加一个分割线和一个网页链接

 链接配置结构

举个🌰

特殊实体配置

举个🌰

自定义分割

 实体按钮

 配置结构

举个🌰

实体过滤器 Entity Filter

这个卡片主要适用于显示某些设备状态的,比如说显示出未关闭的灯,或者在家的人等等

 配置结构

举个🌰
显示不在家的人和开着的灯
媒体播放器,显示正在播放的媒体

Gauge Card 仪表卡

 配置结构

举个🌰

 Glance 卡

使用Glance可以与实体过滤卡形成动态卡片

配置结构

实体选项

举个🌰
带标题

自定义宽度
不显示标题和状态

历史📈

可以在页面显示某个传感器的历史状态

配置结构

举个栗子
👇这个增加了实体的一些可选项

堆栈

水平堆栈

 配置结构

垂直堆栈

 配置结构

举个🌰

 

卡片内嵌入其他卡片并布局

 iFrame 卡

iFrame卡可以说是LoveLace里面可定制化程度最高的组件了,它允许你嵌入任何web页面(本地或者云端),或者嵌入本地图片(放在www文件夹下,用/local/filename引用)
 注意: 如果你使用HTTPS,你是不可以嵌入HTTP网页的

配置结构


 

举个🌰
我们来插入一个天气云图组件,并通过aspect_ratio属性修改其长宽比
我们还可以通过iFrame嵌入其他组件,比如国内开发者的地图组件

Light 卡

 配置结构

举个🌰

 

Map

HA地图的信息要素不是很全,可以使用iFrame嵌套国内开发者的地图

 配置结构

只有经纬度的实体才会显示在地图上
举个🌰

Markdown Card

 配置结构

举个栗子 前端会显示一个markdown格式的内容组件,此组件支持markdown的语法格式,你可以嵌入任何markdown支持的信息

媒体控制卡

配置结构

举个栗子

图片卡

图片卡允许你使用一张图片来调用服务或者链接跳转

 配置结构

举个🌰
点击图片跳转

图片实体卡

此卡片可通过设置图片来对家里的设备进行控制

配置结构

举个🌰

Picture Glance卡

这个组件允许你将传感器之类的设备放在图片中

配置结构

举个🌰
使用相机背景
只显示相机图像

植物状态卡

 配置结构

举个🌰

传感器

配置结构

举个🌰

购物列表卡

要使用此卡片,要先在config中增加 shopping_list:

配置结构

举个🌰

恒温器

 配置结构

举个🌰

天气预报

配置结构
举个栗子

此文不允许转载,如需转载请与BD@hachina.io联系。

以上内容是否对您有帮助? 10 有帮助 1 没帮助