样式实体卡。
(包括一些特殊的行元素-按钮,部分,分频器)
彩色背景和圆角——可以很容易地通过使用”——ha-card-background”&”——ha-card-border-radius”变量:
类型:实体标题:标题实体:-实体:太阳。阳光风格:| ha-card {——ha-card-background:橙色;——ha-card-border-radius: 14 px;}
使用背景图片:
测试图片:
默认背景图像放置w / o调整:
类型:实体实体:实体:太阳。太阳标题:图像剪风格:| ha-card{背景图片:url(“/地方/图片/ blue_low_2.jpg”);}
如何适应图像定义卡的大小:
注意:名片的高度定义。
类型:实体实体:实体:太阳。太阳标题:图像拟合风格:| ha-card{背景图片:url(“/地方/图片/ blue_low_2.jpg”);background-size: 100% - 100%;身高:250 px !重要;}
一个内容区域:
类型:实体实体:实体:太阳。太阳标题:图片上内容风格:| ha-card .card-content{背景图片:url(“/地方/图片/ blue_low_2.jpg”);background-size: 100% - 100%;}
仅供一个头部区域:
类型:实体实体:实体:太阳。太阳-实体:sun.suntitle: Image fitted to header style: | ha-card .card-header { background-image: url("/local/images/blue_low_2.jpg"); background-size: 100% 100%; }
定义了一个位置:
类型:实体实体:实体:太阳。太阳-实体:sun.suntitle: Image placed on header style: | ha-card .card-header { background-image: url("/local/images/blue_low_2.jpg"); background-size: 30% 50%; background-position: 95% center; background-repeat: no-repeat; }
彩色的文字:(w / o“secondary_info”)
类型:实体实体:实体:太阳。阳光的名字:彩色text style: | :host { color: red; } - entity: sun.sun name: Colored value style: | :host .text-content { color: orange; } - entity: sun.sun name: Colored name style: hui-generic-entity-row: $: | .info.pointer.text-content { color: green; } - entity: sun.sun name: Colored name & value style: hui-generic-entity-row: $: | .info.pointer.text-content { color: green; } .: | .text-content { color: orange; }
彩色的文字:(与“secondary_info”)
如果“secondary_info”指定的代码变更,我需要使用吗“.info.pointer”而不是“.info.pointer.text-content”。
根据我的测试在所有上述情况下可以一直使用“.info.pointer”——这似乎工作。
类型:实体实体:实体:太阳。阳光的名字:彩色name style: hui-generic-entity-row: $: | .info.pointer { color: orange; } - entity: sun.sun name: Colored name (with secondary_info) secondary_info: last-changed style: hui-generic-entity-row: $: | .info.pointer { color: cyan; }
常见的风格:为所有行改变颜色:(除了“secondary_info”)
所有文本(除了一个标题):
类型:实体名称:一些标题风格:| ha-card .card-content{颜色:红色;实体}:实体:input_boolean。test_boolean -实体:太阳。太阳secondary_info:最后一次修改
只值:
类型:实体风格:hui-text-entity-row: $: hui-generic-entity-row: | .text-content{颜色:红色;实体}:实体:sun.sun- entity: sun.sun
只有名字:
类型:实体风格:hui-text-entity-row: $: hui-generic-entity-row:美元:| .info.pointer.text-content{颜色:绿色;实体}:实体:sun.sun- entity: sun.sun
值和名称:
类型:实体风格:hui-text-entity-row: $: hui-generic-entity-row:美元:| .info.pointer.text-content{颜色:绿色;}:| .text-content{颜色:红色;实体}:实体:sun.sun- entity: sun.sun
改变颜色为整个卡(即包括一个标题):(除了“secondary_info”)
标题:类型:实体的共同之处:所有文本风格:| ha-card{颜色:橙色;实体}:实体:sun.sunsecondary_info: last-changed - entity: sun.sun
颜色的标题:
类型:实体名称:风格:彩色标题的风格:| ha-card .card-header{颜色:红色;实体}:实体:sun.sun
另一个选项——使用”——ha-card-header-color”变量:
类型:实体名称:风格:彩色标题的风格:| ha-card {——ha-card-header-color:红色;实体}:实体:sun.sun
覆盖类型:
指定:
- 所有文本是蓝色的
- 的所有行文本是红色的
- 一行的文本是青色
类型:实体名称:“改变颜色”风格:| ha-card{颜色:蓝色;}ha-card .card-content{颜色:红色;实体}:实体:input_boolean。test_boolean名称:继承的颜色-实体:太阳。阳光的名字:继承颜色secondary_info:最后一次修改-实体:太阳。阳光的名字:改变颜色secondary_info:上次调整风格:|:主机{颜色:青色;}
彩色secondary_info:
类型:实体实体:实体:太阳。太阳secondary_info:最后一次修改style: hui-generic-entity-row: $: .info.pointer .secondary: | ha-relative-time { color: green !important; }
注意,我使用“重要!”没有它,它不工作,不知道为什么…
彩色的secondaryinfo-entity-row:
有时需要使用“自定义:secondaryinfo-entity-row”,这是如何的风格(注意“hui-toggle-entity-row”添加为例):
类型:实体实体:类型:“自定义:secondaryinfo-entity-row”实体:input_boolean。test_boolean名称:secondaryinfo-entity-row secondary_info:一些彩色文本风格:hui-toggle-entity-row:美元:hui-generic-entity-row:美元:| .info.pointer .secondary{颜色:红色;}
它看起来类似的标准“secondary_info”(没有“ha-relative-time”指定)。
常见的样式:改变颜色“secondary_info”:
类型:实体名称:常见的样式风格:hui-text-entity-row:美元:hui-generic-entity-row:美元:.info.pointer .secondary: | ha-relative-time{颜色:绿色!重要;实体}:实体:sun.sunsecondary_info: last-changed - entity: sun.sun secondary_info: last-changed
如何设置不同颜色的名字&secondary-info:
类型:实体实体:实体:太阳。太阳secondary_info:最后一次修改style: hui-generic-entity-row: $: .info.pointer: | .secondary ha-relative-time { color: green; } .: | .info.pointer { color: red; }
额外的样式“secondary-info”:
帖子
彩色的运行按钮行:
标题:类型:实体运行按钮实体:类型:按钮名称:彩色文本风格:| .flex{颜色:红色;}-类型:按钮名称:彩色图标和文本样式:ha-icon:美元:| ha-svg-icon{颜色:绿色;}:| .flex{颜色:红色;}-类型:按钮名称:彩色按钮风格:.flex mwc-button:美元:| .mdc-button{颜色:橙色!重要;}-类型:按钮名称:彩色文本和按钮风格:.flex mwc-button:美元:| .mdc-button{颜色:橙色!重要;}:| .flex{颜色:红色;}-类型:按钮名称:彩色图标、文本和按钮的风格:ha-icon:美元:| ha-svg-icon{颜色:绿色;}.flex mwc-button: $: | .mdc-button{颜色:橙色!重要;}:| .flex{颜色:红色;}-类型:按钮名称:样式按钮风格:.flex mwc-button:美元:| .mdc-button{背景:橙色!重要; margin-right: 10px; border: 1px solid black !important; border-radius: 10px !important; }
彩色的部分:(包括彩色标签,彩色部分的上,看不见的部分的上部线)
类型:实体名称:彩色部分实体:类型:部分标签:彩色部分风格:| .label{颜色:紫红色!重要;}-实体:sun.sun- entity: sun.sun - type: section label: Colored section style: | .label { color: green !important; } - entity: sun.sun - entity: sun.sun - type: section label: Colored section's line style: | .divider { background-color: red !important; margin-top: 32px !important; height: 8px !important; } - entity: sun.sun - entity: sun.sun - type: section label: Invisible section's line style: | .divider { background-color: transparent !important; margin-top: 32px !important; } - entity: sun.sun - entity: sun.sun
样式的上部分线包括:
“margin-top”——空间线前;“高度”——一条线的厚度;“背景颜色”——一条线的颜色。
注意:“重要!”都是确定的。
样式分隔行:
应该使用样式本机“样式”选项为“实体卡”。
颜色分:
类型:实体名称:彩色分配器(not-card-mod)实体:-实体:太阳。太阳-实体:sun.sun- type: divider style: background-color: red height: 8px - entity: sun.sun - entity: sun.sun - type: divider style: background-color: magenta - entity: sun.sun - entity: sun.sun
看不见的分频器(可以用作间距行):
类型:实体名称:看不见的分配器(not-card-mod)实体:-实体:太阳。太阳-实体:sun.sun- type: divider style: background-color: transparent height: 32px - entity: sun.sun - entity: sun.sun
改变图标的颜色:
在默认情况下等实体“传感器”(相同“device_tracker”,“人”,“区域”…)一个图标的颜色并不依赖于实体的状态。
有两种方法来改变一个颜色:
- 使用一个
”——paper-item-icon-color”变量;
- 使用一个
“颜色”CSS属性。
对于一些行(方法# 1,# 2):
类型:实体实体:实体:传感器。cleargrass_1_co2名称:彩色风格:|:主持人{——paper-item-icon-color:红色;}-实体:传感器。cleargrass_1_co2名称:默认颜色
类型:实体实体:实体:传感器。cleargrass_1_co2名称:彩色风格:hui-generic-entity-row: $: state-badge:美元:ha-icon:美元:| ha-svg-icon{颜色:红色;}-实体:传感器。cleargrass_1_co2名称:默认颜色
所有行:
方法# 1(使用”——paper-item-icon-color”变量):
注意:对于第三行颜色覆盖了一个个人风格。
类型:实体风格:| ha-card {——paper-item-icon-color:红色;实体}:实体:传感器。cleargrass_1_co2名称:彩色-实体:传感器。cleargrass_1_co2名称:彩色-实体:传感器。cleargrass_1_co2名称:覆盖颜色(主机)的风格:|:主持人{——paper-item-icon-color:青色;}-实体:sun.sunname: Colored
方法# 2(使用“颜色”CSS属性):
类型:实体风格:hui-sensor-entity-row: $: hui-generic-entity-row:美元:state-badge:美元:ha-icon:美元:| ha-svg-icon{颜色:红色;}hui-text-entity-row: $: hui-generic-entity-row: $: state-badge:美元:ha-icon:美元:| ha-svg-icon{颜色:青色;实体}:实体:sun.sunname: Colored - entity: sun.sun name: Colored - entity: sensor.cleargrass_1_co2 name: Colored - entity: sensor.cleargrass_1_co2 name: Colored - entity: input_boolean.test_boolean name: Default color - entity: sensor.cleargrass_1_co2 name: 'Overwritten color (:host) - failed' style: | :host { --paper-item-icon-color: orange !important; } - entity: sensor.cleargrass_1_co2 name: Overwritten color style: hui-generic-entity-row: $: state-badge: $: ha-icon: $: | ha-svg-icon { color: green !important; }
注:
1。第六届图标没有覆盖:常见的样式是由方法# 2,个人风格——方法# 1,所以覆盖失败了。
2。第七届图标覆盖:常见的样式是由方法# 2,个人风格——方法# 2(与“重要!”)。
3所示。以来的第五个图标不是彩色“hui-sensor-entity-row”和“hui-text-entity-row”不影响的“input_boolean”行- - - - - -“hui-toggle-entity-row”必须使用。
在默认情况下等实体“binary_sensor”,“sun.sun”,“开关”,“input_boolean”——一个图标的颜色取决于实体的状态——如果该财产“state_color:真正的“将卡片(或为这个特定的行)。如果它被设置“假”,那么颜色并不依赖于状态——使用相同的方法# 1,# 2至于“传感器”(上述)。
有两种方法来改变一个颜色:
- 使用
”——paper-item-icon-color”和”——paper-item-icon-active-color”变量;
- 使用一个
“颜色”CSS属性。
方法# 1(使用”——paper-item-icon-color”和”——paper-item-icon-active-color”变量):
对于一些行:
类型:实体state_color:真正的实体:-实体:binary_sensor。battery_charging_cleargrass_1名称:彩色风格:|:主持人{——paper-item-icon-active-color:红色;——paper-item-icon-color:青色;}-实体:sun.sunname: Default colors - entity: binary_sensor.service_off_value name: Default colors - entity: binary_sensor.service_off_value name: Colored style: | :host { --paper-item-icon-active-color: red; --paper-item-icon-color: cyan; }
所有行:
注:第四行颜色覆盖。
类型:实体state_color:真正的风格:| ha-card {——paper-item-icon-active-color:红色;——paper-item-icon-color:青色;实体}:实体:binary_sensor。battery_charging_cleargrass_1名称:彩色-实体:太阳。阳光的名字:颜色-实体:binary_sensor。service_off_value名称:彩色-实体:binary_sensor。service_off_value名称:覆盖的颜色风格:|:主持人{——paper-item-icon-active-color:绿色;——paper-item-icon-color:红色;}
方法# 2(使用“颜色”CSS属性):
对于一些行:
类型:实体state_color:真正的实体:-实体:binary_sensor。battery_charging_cleargrass_1名称:默认颜色-实体:太阳。阳光的名字:默认颜色-实体:binary_sensor。service_off_value名称:默认颜色-实体:binary_sensor。service_off_value名称:彩色风格:hui-generic-entity-row: $: state-badge:美元:ha-icon:美元:| ha-svg-icon{颜色:红色;}
所有行:
注:第四行颜色覆盖。
类型:实体state_color:真正的风格:hui-text-entity-row:美元:hui-generic-entity-row:美元:state-badge:美元:ha-icon:美元:| ha-svg-icon{颜色:青色;实体}:实体:binary_sensor。battery_charging_cleargrass_1名称:彩色-实体:太阳。阳光的名字:颜色-实体:binary_sensor。service_off_value名称:彩色-实体:binary_sensor。service_off_value名称:覆盖的颜色风格:hui-generic-entity-row: $: state-badge:美元:ha-icon:美元:| ha-svg-icon{颜色:红色!重要;}
样式entity_picture:
在默认情况下(至少在默认主题)“entity_picture”显示在一个圆框:
类型:实体实体:实体:person.ildar
它——的原因“这个特性:50%”财产。
这是如何与圆角方形框架:
类型:实体实体:实体:person.ildarstyle: hui-text-entity-row$hui-generic-entity-row$: | state-badge { border-radius: 10%; }
我们也可以应用过滤器“entity_picture”:
类型:实体实体:实体:person.ildar- entity: person.ildar style: hui-generic-entity-row$: | state-badge { filter: grayscale(80%); }
包装的文字:
类型:实体实体:实体:太阳。太阳的名字:裹包包装包裹裹包包装风格:hui-generic-entity-row:美元:| info{颜色:红色;文本溢出:复原!重要;空白:复原!重要;}-实体:sun.sunname: Not wrapped Not wrapped Not wrapped Not wrapped
改变字体大小:
在这里看到的
改变图标的大小:
整张卡片:
类型:实体show_header_toggle:假实体:-实体:太阳。太阳-实体:sun.sun风格:|ha-card {--mdc-icon-size: 60px; }
对于一些行:
类型:实体show_header_toggle:假实体:-实体:太阳。太阳-实体:sun.sun风格:|:host { --mdc-icon-size: 60px; }
样式卡的标题如果指定一个主要图标:
主要的图标,图标卡片的标题。
类型:垂直堆栈标题:卡图标卡片:-类型:实体名称:彩色图标和标题图标:mdi:汽车的风格:| .card-header . name{颜色:红色;实体}:实体:sun.sun- entity: sun.sun - type: entities title: Colored icon icon: 'mdi:car' style: .card-header .name .icon: $: | ha-svg-icon { color: orange; } entities: - entity: sun.sun - entity: sun.sun - type: entities title: Colored icon & title (different) icon: 'mdi:car' style: .card-header: .name .icon: $: | ha-svg-icon { color: orange; } .: | .name { color: red; } entities: - entity: sun.sun - entity: sun.sun - type: entities title: Colored title icon: 'mdi:car' style: .card-header: .name .icon: $: | ha-svg-icon { color: var(--paper-item-icon-color); } .: | .name { color: red; } entities: - entity: sun.sun - entity: sun.sun
调整图标:
类型:实体名称:缩放图标图标:mdi:汽车的风格:.card-header: | . name .icon {——mdc-icon-size: 60 px;实体}:实体:sun.sun- entity: sun.sun
添加一个前缀或后缀,数学操作,更换一个值:
帖子
更多的例子伟德国际官方app下载苹果版描述在这里。
