# 1717

有一件事我记得:card-mod 3.0语法已经改变了。当旧的语法仍然像托马斯的更新日志中提到的工作,我现在想知道使用旧的语法能导致性能下降。

旧:

风格:……东西……

新:

card_mod:风格:……东西……

因为我使用旧的语法,我想也许这可能会导致这个问题。如果它是未知的,我将重新创建仪表板与一些元素使用新的语法和负载3.0。然后比较与旧语法3.0和使用性能选项卡。很多人仍在使用旧的语法,所以我觉得很奇怪的没有任何人提到过或经历过的性能影响。

但可能是我方法,语法没有影响(我没有足够的经验去做这样的假设)。我想避免浪费大量的时间在测试的东西当然没有影响。

# 1718

我可能会问一些愚蠢的问题(对不起蹩脚的英语)。

我对零售物价指数3公顷(码头工人)。
我的HA设置包括3仪表板(HA本身,用于测试的东西,测试card-mod),每个仪表盘包括很多(~ 10…20)的观点。
这是所有的编辑界面,而不是在yaml文件(我对yaml-mode一无所知,这是我的计划)。
我用一个旧card-mod语法在大多数情况下(99%)。

每次当我工作督察(Chrome, Win10x64)意见card-mod,我观察一个高CPU负载我的电脑(~ 40%负载铬)。
有时我不得不重启Chrome以来就太慢了。
当我不使用检查员-,它工作得非常好。
我通常用检查员card-mod仅供测试。
第一季度:这是正常的Chrome当使用一个检查员变得如此缓慢?
如果不是,我应该改变一些Chrome的设置吗?

据我所知,某些特定视图代码只有当我在我的浏览器打开该视图。
这部分代码适用于零售物价指数,部分——在我的电脑。
这意味着我可以在我的HA设置有很多意见,也不会让我的HA慢——除非我打开一些非常复杂的观点。但是,这只是我的意见,我的知识HA内部结构很差。
第二季:因为我有一个单独的仪表板~ 20视图测试card-mod——可能会减缓我的哈当我不打开这个指示板吗?

# 1720

与此同时,一个小动画的bar-card:

进步运动,如果电池是充电。

类型:“自定义:bar-card”标题:动画列:1实体:-实体:传感器。battery_life360_ildar_iphone_5s方向:正确的名字:电池图标:mdi:电池的高度:40 px小数:' 0 '分钟:“0”马克斯:“100”目标:“100”风格:| bar-card-row bar-card-card bar-card-background bar-card-targetbar{{%如果is_state (“binary_sensor.battery_charging_life360_ildar_iphone_5s”,“上”)%}动画:填充5 s线性无限;{% endif %}——bar-percent: 0 !重要;{}@keyframes填充{0%——bar-target-percent: 0;{}10%——bar-target-percent: 10%;{}20%——bar-target-percent: 20%;{}30%——bar-target-percent: 30%;{}40%——bar-target-percent: 40%;{}50%——bar-target-percent: 50%;{}60%——bar-target-percent: 60%; } 70% { --bar-target-percent: 70%; } 80% { --bar-target-percent: 80%; } 90% { --bar-target-percent: 90%; } 100% { --bar-target-percent: 100%; } } bar-card-row bar-card-card bar-card-background bar-card-markerbar { display: none; }

更多的例子伟德国际官方app下载苹果版描述在这里。

1像
# 1721

嗨,伙计们,

我想知道你是否可以帮我设置我的名片的过程中对我的空气清新剂im 90%,但我似乎无法找出下面突出显示的文本输入方式:

使用下面的我已经能够改变字体大小:

——paper-input-container-shared-input-style_ -_font-size: 12 px;

但是我不能解决如何改变文本的颜色和证明右边。什么好主意吗?

截图在09.57.28 2021-04-08
截图在09.57.28 2021-04-08 964×1084 164 KB

# 1722

你可能需要shadow-root进去。

# 1723

样式的“文本”行内部实体卡:

颜色的名称:
图像
方法# 1:

类型:实体实体:实体:input_text。test_text风格:hui-generic-entity-row: $: | info{颜色:红色;}

方法# 2:

类型:实体实体:实体:input_text。test_text风格:|:主持人{颜色:红色;}

颜色的值:
图像
方法# 1:

类型:实体实体:实体:input_text。test_text风格:hui-generic-entity-row:纸张输入:$:| paper-input-container iron-input{颜色:红色;}

方法# 2:

类型:实体实体:实体:input_text。test_text风格:|:主持人{——paper-input-container-input-color:红色;}

彩色的背景:
图像
方法# 1:

类型:实体实体:实体:input_text。test_text风格:hui-generic-entity-row:纸张输入:$:| paper-input-container iron-input{背景颜色:橙色;}

方法# 2:

类型:实体实体:实体:input_text。test_text风格:|:主持人{——paper-input-container-shared-input-style_ -_background:橙色;}

对齐值:
图像
方法# 1:

类型:实体实体:实体:input_text。test_text风格:hui-generic-entity-row:纸张输入:$:| paper-input-container iron-input {text-align:正确;}

方法# 2:

类型:实体实体:实体:input_text。test_text风格:|:主持人{——paper-input-container-input_ -_text-align:正确的;}

包装一个文本的名称:
默认情况下长叫剪:
图像

类型:实体实体:实体:input_text。test_text名称:很久很久很久很久

如何启用包装:
图像

类型:实体实体:实体:input_text。test_text名称:很久很久很久很久风格:hui-generic-entity-row:美元:| info{文本溢出:复原!重要;空白:复原!重要;}

改变一个输入字段的宽度:
图像
方法# 1:

类型:实体实体:实体:input_text。test_text风格:hui-generic-entity-row:纸张输入:$:| paper-input-container iron-input{宽度:300 px;}

方法# 2:

类型:实体实体:实体:input_text。test_text风格:|:主持人{——paper-input-container-shared-input-style_ -_width: 300 px;}

隐藏的名字:
图像

类型:实体实体:实体:input_text。info {test_text风格:hui-generic-entity-row: $: |显示:没有;}纸张输入:$:| paper-input-container iron-input {——paper-input-container-shared-input-style_ -_width: 400 px;}

彩色强调:
图像
图像
方法# 1:

类型:实体实体:实体:input_text。test_text风格:hui-generic-entity-row:纸张输入:$:paper-input-container:美元:| .underline .unfocused-line{边框颜色:橙色;}.underline .focused-line{边框颜色:红色;}

方法# 2:

类型:实体实体:实体:input_text。test_text风格:|:主持人{——paper-input-container-focus-color:红色;——paper-input-container-color:橙色;}

彩色的图标:
图像
方法# 1:

类型:实体实体:实体:input_text。test_text风格:hui-generic-entity-row: $: | state-badge{颜色:红色;}

方法# 2:

类型:实体实体:实体:input_text。test_text风格:|:主持人{——paper-item-icon-color:红色;}

调整图标:
图像

类型:实体实体:实体:input_text。test_text风格:|:主持人{——mdc-icon-size: 40像素;}

隐藏的图标:
图像

类型:实体实体:实体:input_text。test_text风格:hui-generic-entity-row: $: | state-badge{显示:没有;}

更多的例子伟德国际官方app下载苹果版描述在这里。

2喜欢
# 1724

谢谢你这么多,真的是把我的头发在这一个。

# 1725

我是超级新手,只是想减少我的名片的字体的大小。已经在一些卡片,但不能看到在这个水平工作卡。codef我现在只是应用在2卡的堆栈。我还想控制水平叠加卡本身的字体大小(标题)。

感谢任何帮助让我开始…

类型:水平叠加标题:客厅卡片:类型:按钮tap_action:行动:实体:切换场景。living_room_hang名称:挂icon_height幕:“4 px”——类型:光实体:光。living_room_fireplace double_tap_action:行动:切换名称:壁炉card_mod:风格:| ha-card{字体大小:10 px;}-类型:衡量实体:传感器。living_room_trisensor_temperature_measurement分钟:0马克斯:100姓名:临时card_mod:风格:| ha-card{字体大小:8 px;}-类型:光实体:光。living_room_walls double_tap_action:行动:切换名称:墙壁
# 1726 
类型:“自定义:mod-card”风格:hui-vertical-stack-card美元:| .card-header{字体大小:10 px !重要;}卡:类型:垂直堆栈标题:改变字体卡片:# # # # # # # # # # # # # # # # # # #
# 1727

谢谢!我尝试了各种各样的组合,但似乎无法得到正确格式化或添加到我的代码。

那么这“自定义:mod-card”类型片段去顶部的卡片在我水平堆栈代码?

同时我将花更多的时间了解自定义:mod-card符合所有这些…

# 1728

卡mod延伸现有的卡片。它允许样式的html实体内卡。你用它通过添加每个卡片样式属性的定义。

然而有时card-mod无法到达一些外html对象(样式允许将样式应用于儿童项目虽然一些卡片外card-mod对象不可用)。mod-card创建一个容器,里面你的卡。这样你的整个卡变成mod-card的子元素,允许从mod-card风格水平

# 1729

使用的一些伟德国际官方app下载苹果版例子“::”,“::”&“内容”:
注意:可以使用许多浪子卡(我希望)。

前缀和后缀:
图像

类型:实体实体:实体:太阳。太阳-实体:太阳。阳光风格:hui-generic-entity-row: | .text-content{颜色:红色;{前}.text-content:内容:“XXX”;颜色:红色;{后}.text-content:内容:”(海拔{{state_attr (config.entity“海拔”)}})”;颜色:橙色;}-实体:传感器。iphone_5s_battery_level风格:hui-generic-entity-row: | .text-content{颜色:红色;{前}.text-content:内容:“水平:”;颜色:红色; } .text-content::after { content: " ({{states('sensor.iphone_5s_battery_state')}})"; color: magenta; }

+无证功能“secondary_info”:
图像

类型:实体实体:实体:太阳。太阳secondary_info:真正的风格:hui-generic-entity-row: $: | info .secondary{颜色:红色;info .secondary}:{前内容:“海拔:”;颜色:红色;info .secondary}:{后内容:“{{state_attr (config.entity“海拔”)}}”;颜色:红色;}

“非法”意味着你也可以使用“secondary_info: bla_bla_bla”而不是“secondary_info:真正的“,它将创建一个" div "元素。

数学操作:
图像

类型:实体实体:实体:传感器。cleargrass_1_co2风格:hui-generic-entity-row: | .text-content{颜色:红色;之前}.text-content:{内容:“{{州(config.entity) | int / 10}}(分裂),”;颜色:红色;}

更换一个值:
图像
对于实体卡设置透明色的元素保持状态:

类型:实体实体:实体:sensor.network_throughput_in_eth0_mbits名称:网络吞吐量-实体:sensor.network_throughput_in_eth0_mbits名称:网络吞吐量风格:hui-generic-entity-row: | .text-content::{后内容:“{{(config.entity) |浮* 1024}}KBit / s”;颜色:var (——primary-text-color);}.text-content{颜色:透明;}

但看卡我要设定一个零字体大小:
图像

类型:看实体:实体:sensor.network_throughput_in_eth0_mbits名称:网络吞吐量-实体:sensor.network_throughput_in_eth0_mbits名称:网络吞吐量风格:|:主机div:没有(. name)::{后内容:“{{(config.entity) |浮* 1024}}KBit / s”;字体大小:var (——mdc-typography-body1-font-size 1 rem);}:主机div:不(. name){字体大小:0 px;}

为“multiple-entity-row”棘手得多:
图像
原始值必须是透明的和放在下一行的高度必须设置为0 px:

类型:实体实体:类型:“自定义:multiple-entity-row”风格:|:主机.entities-row div.entity: nth-child (1) div::{之前颜色:橙色;内容:{%如果is_state (“sun.sun”、“above_horizon”) - - - - - - %}”起床喜洋洋\“{% -其他- %}”睡好\“{% - endif %};行高:var (1.5——mdc-typography-body1-line-height,快速眼动);}:主机.entities-row div.entity: nth-child (1) div{颜色:透明;行高:0 px;}实体:太阳。太阳实体:实体:太阳。阳光的名字:xxx风格:宽度:60 px -实体:太阳。阳光的名字:xxx风格:宽度:60像素单元:”图标:“切换:假show_state:假state_header:“state_color:假的

内徽章“图像元素”名片:
这个技巧可能是有用的因为没有显示任何文本的可能性(顺便说一句,实体的名称徽章显示在顶部的观点这种可能性存在——“名称”属性)。
图像

类型:图像元素形象:/地方/图片/ blue.jpg风格:| ha-card{高度:130 px !重要;}元素:类型:state-badge实体:传感器。左cleargrass_1_co2风格:前:18%:10%——类型:state-badge实体:传感器。左cleargrass_1_co2风格:前:18%:30% card_mod:风格:ha-state-label-badge:美元:ha-label-badge:美元:.badge-container: | .title{颜色:透明;行高:0 px !重要;之前}.title:{颜色:var (——primary-text-color);内容:“新名称\”;行高:正常;}

如何显示“上次调整”项目:

这里描述

自定义:mini-graph-card:
如何显示额外的信息在卡吗

更多的例子伟德国际官方app下载苹果版描述在这里。

1像
100%的模板化色鬼配置
100%的模板化色鬼配置
# 1730

我试图使用风格markdown-card card-mod的帮助下。
但无论我在,没有什么会改变markdown-card的格式。
我做错了什么?

类型:减价风格:| ha-card{字体大小:20 px;字体类型:流沙;高度:30 px;背景:无;}ha-markdown{填充:0 px 0 px 0 px 8 px !重要;border-left: 3 px固体var(——强调色);}内容:“修改”
# 1731

样式垂直堆栈(水平)卡。

标题样式:
图像
方法# 1:

类型:“自定义:mod-card”风格:| ha-card {——ha-card-header-color:红色;——ha-card-header-font-size: 10 px;}卡:类型:垂直堆栈标题:改变字体的标题卡:-类型:实体实体:-实体:太阳。太阳-实体:太阳。太阳-类型:实体实体:sun.sun

方法# 2:

类型:“自定义:mod-card”风格:hui-vertical-stack-card美元:| .card-header{字体大小:10 px !重要;颜色:红色!重要;}卡:类型:垂直堆栈标题:改变字体的标题卡:-类型:实体实体:-实体:太阳。太阳-实体:太阳。太阳-类型:实体实体:sun.sun

彩色的头:
图像

类型:“自定义:mod-card”风格:hui-vertical-stack-card美元:| .card-header {background:绿色;}卡:类型:垂直堆栈标题:标题卡:-类型:实体实体:-实体:太阳。太阳-实体:太阳。太阳-类型:实体实体:sun.sun

彩色的背景:
图像

类型:“自定义:mod-card”风格:| ha-card{背景颜色:红色;}卡:类型:垂直堆栈标题:彩色背景卡:-类型:实体实体:-实体:太阳。太阳-实体:太阳。太阳-类型:实体实体:sun.sun

使用一个图像的背景:
图像
注:

  1. 的”——ha-card-background”变量用于风格子卡。
  2. 背景图像拉伸以适应名片的大小。
类型:“自定义:mod-card”风格:| ha-card{背景图片:url(/地方/图片/ blue_low_2.jpg);background-size: 100% - 100%;——ha-card-background: rgba(50, 50岁,50岁,0.3);}卡:类型:垂直堆栈标题:图像背景卡:-类型:实体实体:-实体:太阳。太阳-实体:太阳。太阳-类型:实体实体:sun.sun

使用一个图像的标题:
图像

类型:“自定义:mod-card”风格:hui-vertical-stack-card美元:| .card-header{背景图片:url(/地方/图片/ blue_low_2.jpg);background-size: 100% - 100%;}卡:类型:垂直堆栈标题:图像背景卡:-类型:实体实体:-实体:太阳。太阳-实体:太阳。太阳-类型:实体实体:sun.sun

更多的垂直叠加样式:
例子# 1:

图像
图像 500×517 32 KB

注意:”——vertical-stack-card-margin”变量是用于定义利润为孩子卡片。

类型:“自定义:mod-card”风格:| ha-card{边框样式:固体;边框宽度:5 px;border - radius: 10 px;背景图片:线性渐变(到右,红、橙、黄、绿、蓝、靛、紫);——ha-card-header-color:白色;——ha-card-header-font-size: 40像素;身高:500 px !重要;——vertical-stack-card-margin: 0 px 20 px 190 px 20 px;——ha-card-background: rgba(50, 50岁,50岁,0.3);}卡:类型:垂直堆栈标题:标题卡:-类型:实体实体:-实体:太阳。太阳-实体:太阳。sun - type: entity entity: sun.sun

例子# 2:

图像
图像 497×513 28.3 KB 

类型:“自定义:mod-card”风格:hui-vertical-stack-card美元:| hui-entities-card {——ha-card-background: rgba(50岁,50岁,50岁,0.7);——vertical-stack-card-margin: 0 px 200 px 190 px 20 px;}hui-entity-card {——ha-card-background: rgba(50岁,50岁,50岁,0.1);——vertical-stack-card-margin: 0 px 20 px 0 px 200 px;}:| ha-card{边框样式:固体;边框宽度:5 px;border - radius: 10 px;背景图片:线性渐变(到右,红、橙、黄、绿、蓝、靛、紫);——ha-card-header-color:白色;——ha-card-header-font-size: 40像素; height: 500px !important; } card: type: vertical-stack title: Some title cards: - type: entities entities: - entity: sun.sun - entity: sun.sun - type: entity entity: sun.sun

更多的水平叠加样式:
例子# 1:
图像

类型:“自定义:mod-card”风格:hui-horizontal-stack-card美元:| hui-entities-card {margin-left: 10 px !重要;margin-bottom: 10 px !重要;——ha-card-background: rgba(50, 50岁,50岁,0.1);}hui-entity-card {margin-right: 10 px !重要;margin-bottom: 10 px !重要;——ha-card-background: rgba(50, 50岁,50岁,0.7);}:| ha-card {background: lightblue;}卡:类型:水平叠加标题:标题卡:-类型:实体实体:-实体:太阳。太阳-实体:太阳。太阳-实体:太阳。太阳-类型:实体实体:sun.sun

例子# 2:
图像

类型:“自定义:mod-card”风格:hui-horizontal-stack-card美元:| hui-entities-card {margin-left: 10 px !重要;margin-right: 10 px !重要;margin-bottom: 10 px !重要;宽度:150%;flex:复原!重要;}mini-graph-card {margin-right: 10 px !重要;margin-bottom: 10 px !重要;flex:复原!重要;}:| ha-card {background: lightblue;——ha-card-background: rgba(50, 50岁,50岁,0.1); } card: type: horizontal-stack title: Some title cards: - type: entities entities: - entity: sun.sun - entity: sun.sun - entity: sun.sun - type: 'custom:mini-graph-card' entities: - sensor.cleargrass_1_co2 hours_to_show: 12 points_per_hour: 60 show: name: false icon: false

更多的例子伟德国际官方app下载苹果版描述在这里。

# 1732

你需要shadow-root,我认为。

# 1733

我怎么做呢?
没有什么工作。是减价牌甚至改写?

# 1734

这就是我和你的代码:

图像
图像 972×325 11.3 KB

这是你希望的么?
如果是的,可能是你没有安装card-mod。
如果没有,是什么错了吗?

# 1735

现在工作,谢谢。
验证代码的帮我看别处。
似乎有问题我hac github的关键。
谢谢你的帮助。

# 1736

使用的例子“card-mod”为“multiple-entity-row“显示“上次调整”项目:

这里描述

# 1737

人来说,我真的需要帮助:

谁能帮我吗?