＃1669

好的酷，但不要浪费你的时间......
如果他在某些卡片上接受RFRIVE，我还问ROMRIDER，在这种情况下，堆栈卡片可以启用此功能。现在，它必须是它的......

没关系编辑，我用了文本颜色，因为我害怕使用颜色也会着色图标，但它没有眨眼:

使用可爱的Somfy橙色......

.header-footer.footer {--mdc-icon-size：30px;填充底部：10px;字体重量：粗体;字体大小：20px;颜色为橙色;}

Schermafbeelding 2021-04-01 OM 09.43.20
Schermafbeelding 2021-04-01 OM 09.43.20 1018×138 3.14 KB

＃1670

刚刚尝试了以下内容，它运作了：

类型：'Custom：Mod-Card'卡：卡：...类型：垂直堆栈Card_Mod：STYLE：|HA卡{背景：var（ - 纸张 - 背景颜色）！重要;}
1像
＃1671

这很棒 ）））
它会使用自定义：堆栈卡吗？
我自己没有检查过

＃1672

我认为它应该，但我现在没有设置它现在的测试（将当前的垂直堆栈更改为堆栈，自动添加背景，而无需使用Mod-Card ...

＃1673

它确实如下：

- type: custom:hui-element # card_type: photo # image: /local/images/vijver.jpg # style: | # ha-card {# box-shadow: none;# margin: -16px -16px 0px;#} - type: custom:hui-element card_type: custom:mod-card card_mod: style: | ha-card {background: url('/local/images/vijver.jpg');Margin: -16px -16px 0px -16px;background-size:封面;} card: type:水平堆叠卡:- type:自定义:按钮卡模板:button_switch实体:交换机。vijverpomp_links triggers_update:传感器。vijverpomp_links_actueel name: Pomp left - type: custom:button-card template: button_switch entity: switch。vijverpomp_rechts triggers_update:传感器。vijverpomp_rechts_actueel name: Pomp right - type: custom:button-card color_type: blank-card - type: custom:button-card color_type: blank-card - entity: input_boolean。Vijverpompen_alterneren secondary_info: last-changed - entity: binary_sensor。Vijverpompen secondary_info: last-changed - entity: sensor。Vijverpompen secondary_info: last-changed - entity: sensor。pond_buiten_sensor_calibrated_temperature name:温度池

Schermafbeeldinging 2021-04-01 OM 12.07.08
Schermafbeeldinging 2021-04-01 OM 12.07.08 1000×672 185 KB

需要微调一点但嘿，这太棒了！
我的第一个Mod卡眨眼:

1像
＃1674

与此同时,造型A.“input_select”排。

造型图标：
更改颜色（2选项）和大小：
图像

类型:垂直堆栈标题:图标卡:-类型:实体标题:彩色图标实体:-实体:input_select。Test_sensors_for_graph style: |:host state-badge {color: red;——paper-item-icon-color实体类型:Test_sensors_for_graph style: |:host{——paper-item-icon-color:红色;} - type:实体标题:调整图标实体:- entity: input_select。Test_sensors_for_graph style: |:host{——mdc-icon-size: 40px;}

隐藏的图标:
图像

类型：实体实体： - 实体：Input_select.test_sensors_for_graph样式：|：主机状态 - 徽章{显示：无;}

打造按钮：
图像

类型：实体标题：彩色按钮实体： - 实体：INPUT_SELECT.TEST_SENSORS_FOR_GRAGH样式：HA-PAPER-DROPHDOWN菜单：$：PAPER-MENU-BUTTON：.dropdown-触发：纸张输入：|铁图标{颜色：红色;}

彩色价值：
图像

类型:entities实体:—entity: input_select。Test_sensors_for_graph style: ha-paper-dropdown menu: $: paper-menu-button: .dropdown trigger: paper-input: $: paper-input-container: |铁-input {color: red;}

列表中的彩色项目：
所有项目的颜色相同：
图像

类型：实体标题：所有项目实体： - 实体：intern_select.test_sensors_for_graph样式：|：主机{--paper-listbox-background-color：黄色;--paper-listbox-color：绿色;}

某些项目的特定颜色:
图像

类型：实体标题：不同颜色实体： - 实体：Input_select.test_sensors_for_graph样式：ha-paper-dropdown-menu：paper-listbox：|纸质项目：nth-​​child（2）{背景 - 颜色：青色;红色;}纸质项目：nth-​​child（4）{背景 - 颜色：蓝色;白颜色;}。：| |：主机{--paper-listbox-background-color：黄色;--paper-listbox-color：绿色;}

彩色标签和下划线：
当聚焦时，这些元素会改变颜色。
标签和下划线：
图像
图像

类型：实体标题：标签和下划线实体： - 实体：inport_select.test_sensors_for_graph样式：|：主机{--paper-input-contains-focus-color：红色;--paper-input-contains-color：橙色;}

只有标签:
图像

类型：实体标题：标签实体： - 实体：Inport_select.test_sensors_for_graph样式：ha-papl-dropdown-menu：$：paper-menu-ukig：.dropdown-触发：纸张输入：$：$：纸张输入容器：|标签{--paper-input-container-focus-color：红色;--paper-input-contains-color：橙色;}

只有下划线：
图像

类型：实体标题：下划线实体： - 实体：Inpe_Select.Test_Sensors_for_Graph样式：HA-Papl-Dropdown-Menu：$：Paper-Menu-ukig：.dropdown-触发：纸张输入：$：$：纸张输入容器：$：|。underline {--paper-input-contains-focus-color：红色;--paper-input-contains-color：橙色;}

隐藏的标签:
图像

类型：实体实体： - 实体：INPET_SELECT.TEST_SENSOSS_FOR_GRAGH样式：HA-PAPER-DROPHDOM-MENU：$：PAPER-MENU-BUTTON：.dropdown-触发：纸张输入：$：纸张输入容器：$：|.floated-label-placeholder {height：0px;} .: | label {display: none;}

下面将介绍伟德国际官方app下载苹果版更多的例子在这里。

2喜欢
＃1675

查看这个帖子，可能是你会发现一些有用的东西。

＃1676

是的，Mod卡应使用没有HA卡的所有卡。我也将它用于堆叠纸牌。此处解释了使用情况：https://github.com/thomasloven/lovelace-card-mod#styling-cards-without-an-ha-card-element

＃1677

是的，但是当卡本身封装在另一张卡片中时，它有点复杂，请参阅上面的示例。惠国元素到救援，并注意，Mod卡模型卡可以再次成为常规卡片类型，无需习惯的Hui元素：Hui-XXX

＃1678

我想要监控不同的设备一个在另一个随着他们的名字，并减少填充允许我查看它在我的手机上没有滚动。

我已经能够在浏览卡片上做同样的事情，但我似乎不能让它在水平堆栈上工作

＃1679

嘿ilily，

你已经检查了picture_glance卡吗？我很乐意在'开'开关时能够旋转图标：

- 类型：图片浏览标题：VijverPompen State_Filter：'Off'：灰度（72％）实体：Binary_Sensor.VijverPompen实体： -  Switch.VijverPomp_Links  -  Switch.VijverPomp_rechts  -  Input_Boolean.VijverPompen_alterneren  -  Sensor.Pond_buiten_sensor_calibrated_temperation  -  Binary_sensor.vijerpompen  - 传感器。Vijverpompen图片：/local/images/vijver.png
＃1680

非常感谢。它完美地工作。
我要稍后保存你的帖子。

＃1681

对不起，我以为我会做它的工作，但我错过了其他东西。
隐藏图标并隐藏标签单独工作，但如果我把它们放在一起，他们就没有。
我尝试了这个，但它只删除标签：

- 类型：实体实体： - 实体：input_select.test #sique：|＃：主机状态 - 徽章{＃显示：无;＃}风格：HA-PAPER-DROPDOWN-MENU：$：paper-menu-button：.dropdown-trigger：纸张输入：$：纸张输入容器：$：|.floated-label-placeholder {height：0px;} .: | label {display: none;Hui-Input-Select-Entity-Row：$：|State-Badge {显示：无;}

谢谢！

＃1682 
类型：实体实体： - 实体：INPET_SELECT.TEST_SENSOSS_FOR_GRAGH样式：HA-PAPER-DROPHDOM-MENU：$：PAPER-MENU-BUTTON：.dropdown-触发：纸张输入：$：纸张输入容器：$：|.floated-label-placeholder {height：0px;} .: | label {display: none;} .: |:主机state-badge {display: none;}

图像

＃1683

谢谢！

＃1684

关于这里描述的错误：


任何人都可以告诉我这2例之间有什么区别：
这有效： 

类型：实体标题：颜色 - > HA-SVG-ICON（+ DIV）样式：.header-footer.footer：hui-buttons-header-footer：$：hui-buttons-base：$：div：send-badge：$：HA-ICON：$：HA-SVG-ICO {颜色：红色;实体： -  Sun.Sun  - 类型：分频器页脚：类型：按钮实体： - 实体：Sun.Sun  - 实体：Sun.Sun

这是好的：

类型：实体标题：Color  - > Ha-Svg-icon（+ div 2）风格：.header-footer.footer：hui-buttons-header-peooter $ hui-buttons-base $ div：state-badge：$：ha-  icon：$：|HA-SVG-ICO {颜色：红色;实体： -  Sun.Sun  - 类型：分频器页脚：类型：按钮实体： - 实体：Sun.Sun  - 实体：Sun.Sun

图像

模式:

图像
图像 430×749 26.6 KB

＃1685

我不认为这是有效的语法。

＃1686

什么是有效的语法?
通常我用这个方法，它有效…
我应该在这里使用.header-footer.footer hui-buttons-header-peader：？
试过，相同的错位。

＃1688

o哇，你再次一直待在。非常酷。谢谢！

关于疑似的错误，这将是卡mod，还是核心图像浏览卡......

尽管如此，给出你说的事实，我们现在只能在全组（右侧，带有togllable实体）：我们可以在那里设置一个模板，只能在'上'时切换。真有兴趣看到会发生什么。

顺便说一句，如果我用旋转图标尝试顶级代码，没有什么是旋转：

- 类型：图片浏览图片：/local/images/vijver.png风格：|.BOX：'div：nth-​​child（3）'：.wrapper：ha-icon-button：$：mwc-icon-button：$：$：| |.mdc-icon-button {颜色：青色;动画：旋转0.5s线性无限;@KeyFrames旋转{0％{变换：旋转（0deg）;} 100％{变换：旋转（360deg）;标题：VijverPompen State_Filter：'Off'：灰度（72％）实体：Binary_Sensor.VijverPompen实体： -  Switch.VijverPomp_Links  -  Switch.VijverPomp_rechts  -  Input_Boolean.VijverPompen_Alterneren  -  Sensor.Pond_Buiten_Sensor_Calibrated_Temperature  -  Binary_Sensor.VijerPompen  - 传感器 -  Sensor.VijverPompen
＃1689

骑风卡：

彩色图标：
只留下物品（哪些不可达到）：
图像

类型：图片浏览标题：左图：/local/images/blue_low.jpg实体： - 实体：binary_sensor.iiyama_2_ping_availability_status  - 实体：sun.sun  - 实体：sun.sun  - 实体：sun.sun  - 实体：sun.sun  - 实体：input_boolean.test_boolean- 实体：intern_boolean.test_boolean  - 实体：input_boolean.test_boolean  - 实体：input_boolean.test_boolean style：'.box div：nth-​​child（2）.wrapper'：ha-icon-button：$：mwc-icon-button：ha-  icon：$：|HA-SVG-icon {颜色：青色;}

物品的不同颜色：
图像
注意：白色颜色=默认样式。

类型：图片浏览标题：某些图片：/local/images/blue_low.jpg实体： - 实体：binary_sensor.iiyama_2_ping_availability_status  - 实体：sun.sun  - 实体：sun.sun  - 实体：sun.sun  - 实体：input_boolean.test_boolean- 实体：intern_boolean.test_boolean  - 实体：input_boolean.test_boolean  - 实体：input_boolean.test_boolean style：'.box div：nth-​​child（2）'：'div：nth-​​child（1）'：ha-icon-button：$：mwc-icon-button：ha-icon：$：$：|HA-SVG-icon {颜色：橙色;}'div：nth-​​child（2）'：ha-icon-button：$：mwc-icon-button：ha-icon：$：$：|HA-SVG-icon {颜色：青色;}'div：nth-​​child（4）'：ha-icon-button：$：mwc-icon-button：ha-icon：$：ha-svg-icon {颜色：黄色;.Box div：nth-​​child（3）'：'div：nth-​​child（1）'：ha-icon-button：$：mwc-icon-button：ha-icon：$：$：HA-SVG-ICO {颜色：红色; } 'div:nth-child(4)': ha-icon-button: $: mwc-icon-button: ha-icon: $: | ha-svg-icon { color: lightgreen; }

物品的不同颜色+更改了默认颜色：
图像
默认颜色由这些变量定义：

  • - HA-Picture-icon-Button-On-Color;
  • - ha-picture-icon-button-color。
类型：图片浏览标题：+ vars图片：/local/images/blue_low.jpg实体： - 实体：binary_sensor.iiyama_2_ping_availability_status  - 实体：sun.sun  - 实体：sun.sun  - 实体：sun.sun-entity：input_boolean。test_boolean  - 实体：input_boolean.test_boolean  - 实体：input_boolean.test_boolean  - 实体：input_boolean.test_boolean样式：'.box div：nth-​​child（2）'：'div：nth-​​child（1）'：ha-icon-button：$：mwc-icon-button：ha-icon：$：$：|HA-SVG-icon {颜色：橙色;}'div：nth-​​child（2）'：ha-icon-button：$：mwc-icon-button：ha-icon：$：$：|HA-SVG-icon {颜色：青色;}'div：nth-​​child（4）'：ha-icon-button：$：mwc-icon-button：ha-icon：$：ha-svg-icon {颜色：黄色;.Box div：nth-​​child（3）'：'div：nth-​​child（1）'：ha-icon-button：$：mwc-icon-button：ha-icon：$：$：HA-SVG-ICO {颜色：红色;}'div：nth-​​child（4）'：ha-icon-button：$：mwc-icon-button：ha-icon：$：HA-SVG-icon {颜色：Lightgreen; } .: | ha-card { --ha-picture-icon-button-on-color: black; --ha-picture-icon-button-color: brown; }

项目的不同默认颜色：
图像

类型：图片浏览标题：vars图片：/local/images/blue_low.jpg实体： - 实体：binary_sensor.iiyama_2_ping_availability_status  - 实体：sun.sun  - 实体：sun.sun  - 实体：sun.sun  - 实体：sun.sun  - 实体：input_boolean.test_boolean- 实体：inport_boolean.test_boolean  - 实体：input_boolean.test_boolean  - 实体：input_boolean.test_boolean style：|.Box div：nth-​​child（2）div：nth-​​child（2）{--ha-picture-icon-button-on-color：cyan;-  HA-Picture-Icon-Button-Color：Brown;} .Box div：nth-​​child（2）div：nth-​​child（3）{--ha-picture-icon-button-on-color：black;-  Ha-picture-icon-button-color：green;} .Box div：nth-​​child（3）div：nth-​​child（1）{--ha-picture-icon-button-on-color：红色;-  HA-Picture-icon-Button-Color：Black;} .Box div：nth-​​child（3）div：nth-​​child（2）{--ha-picture-icon-button-on-color：black;-  HA-Picture-icon-Button-Color：Pink; } .box div:nth-child(3) div:nth-child(4) { --ha-picture-icon-button-on-color: lightgreen; --ha-picture-icon-button-color: yellow; }

调整大小的图标：
对于所有项目：
图像

类型：图片浏览标题：/local/images/blue_low.jpg实体： - 实体：binary_sensor.iiyama_2_ping_availability_status  - 实体：sun.sun  - 实体：sun.sun  - 实体：sun.sun  - 实体：input_boolean.test_boolean- 实体：inport_boolean.test_boolean  - 实体：input_boolean.test_boolean  - 实体：input_boolean.test_boolean style：|HA-CARD {--MDC-ICON大小：40px;}

对于左侧项目：
图像

类型：图片浏览标题：左图：/local/images/blue_low.jpg实体： - 实体：binary_sensor.iiyama_2_ping_availability_status  - 实体：sun.sun  - 实体：sun.sun  - 实体：sun.sun  - 实体：sun.sun  - 实体：input_boolean.test_boolean- 实体：inport_boolean.test_boolean  - 实体：input_boolean.test_boolean  - 实体：input_boolean.test_boolean style：|。box div:nth-child(2) .wrapper { --mdc-icon-size: 40px; }

不同尺寸的物品：
图像

类型：图片浏览标题：某些图片：/local/images/blue_low.jpg实体： - 实体：binary_sensor.iiyama_2_ping_availability_status  - 实体：sun.sun  - 实体：sun.sun  - 实体：sun.sun  - 实体：input_boolean.test_boolean- 实体：inport_boolean.test_boolean  - 实体：input_boolean.test_boolean  - 实体：input_boolean.test_boolean style：|.Box div：nth-​​child（2）div：nth-​​child（2）{--mdc-icon-size：10px;} .Box div：nth-​​child（2）div：nth-​​child（3）{--mdc-icon-size：50px;} .Box div：nth-​​child（3）div：nth-​​child（1）{--mdc-icon-size：35px;}

彩色标题：
图像

type: picture-glance title: title image: /local/images/blue_low.jpgIiyama_2_ping_availability_status - entity: sun。太阳-实体:太阳。Sun - entity: input_boolean。Test_boolean - entity: input_boolean。Test_boolean - entity: input_boolean。Test_boolean - entity: input_boolean。Test_boolean样式:| .box .title{颜色:橙色;}

如何限制标题的区域：
默认情况下长标题占用所有可用区域和图标将转移到右侧，导致某些项目不显示：
图像
为防止此，您可能会限制标题可用的区域。
但在这种情况下，标题将被剪裁。
这种样式使外观更好:
图像

类型：图片浏览标题：标题长长长长的长图像：/local/images/blue_low.jpg实体： - 实体：binary_sensor.iiyama_2_ping_availability_status  - 实体：sun.sun  - 实体：sun.sun  - 实体：input_boolean.test_boolean  -实体：input_boolean.test_boolean  - 实体：input_boolean.test_boolean  - 实体：input_boolean.test_boolean style：|.box .title {text-overflow：未设置;白色空间：正常;最大宽度：130px;字体大小：13px;线高：1.2;对齐 - 自我：中心;}

旋转图标：
只有正确的项目：
222.

类型：图片浏览标题：/local/images/blue_low.jpg实体： - 实体：binary_sensor.iiyamama_2_ping_availability_status  - 实体：sun.sun  - 实体：sun.sun  - 实体：sun.sun  - 实体：sun.sun  - 实体：input_boolean.test_boolean- 实体：internity：intern_boolean.test_boolean  - 实体：input_boolean.test_boolean  - 实体：input_boolean.test_boolean style：'.box div：nth-​​child（3）'：.wrapper：ha-icon-button：$：mwc-icon-button：$：|.mdc-icon-button {动画：旋转0.5s线性无限;@KeyFrames旋转{0％{变换：旋转（0deg）;} 100％{变换：旋转（360deg）;}}

有些项目：
3333333

类型：图片浏览标题：某些图片：/local/images/blue_low.jpg实体： - 实体：binary_sensor.iiyama_2_ping_availability_status  - 实体：sun.sun  - 实体：sun.sun  - 实体：sun.sun  - 实体：input_boolean.test_boolean- 实体：Input_Boolean.Test_Boolean  - 实体：Input_Boolean.Test_Boolean  - 实体：Input_Boolean.Test_Boolean样式：'.Box div：nth-​​child（2）'：'div：nth-​​child（2）'：ha-icon-button：$：mwc-icon-button：$：|.mdc-icon-button {动画：旋转0.5s线性无限;@KeyFrames旋转{0％{变换：旋转（0deg）;} 100％{变换：旋转（360deg）;}''div：nth-​​child（3）'：ha-icon-button：$：mwc-icon-button：$：| |.mdc-icon-button {动画：旋转5s线性无限;@KeyFrames旋转{0％{变换：旋转（0deg）;} 100％{变换：旋转（360deg）; } } '.box div:nth-child(3)': 'div:nth-child(1)': ha-icon-button: $: mwc-icon-button: $: | .mdc-icon-button { animation: rotation 2s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } 'div:nth-child(2)': ha-icon-button: $: mwc-icon-button: $: | .mdc-icon-button { animation: rotation 0.5s linear infinite; } @keyframes rotation { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } }

一些动画：
五星级

类型：图片浏览表明：图片：/local/images/blue_low.jpg实体： - 实体：binary_sensor.iiyama_2_ping_availability_status  - 实体：sun.sun  - 实体：sun.sun  - 实体：sun.sun图标：'mdi：bell' - 实体：intern_boolean.test_boolean  - 实体：input_boolean.test_boolean  - 实体：input_boolean.test_boolean  - 实体：input_boolean.test_boolean样式：'.box div：nth-​​child（2）'：'div：nth-​​child（2）'：HA-ICON-BUTTON：$：mwc-icon-button：$：|.mdc-icon-button {动画：着色1s线性无限;@KeyFrames着色{0％{Color：Blue;100％{颜色：红色;}''div：nth-​​child（3）'：ha-icon-button：$：mwc-icon-button：$：| |.mdc-icon-button {动画：调整1s线性无限的大小大小;@KeyFrams调整大小{0％{--mdc-icon-size：10px;25％{--mdc-icon-size：15px;50％{--mdc-icon-size：20px;75％{ -   -   -  ic图标大小：26px; } 100% { --mdc-icon-size: 32px; } } 'div:nth-child(4)': ha-icon-button: $: mwc-icon-button: $: | .mdc-icon-button { animation: wobbling 1s linear infinite alternate; } @keyframes wobbling { 0% { transform: rotate(-45deg); } 100% { transform: rotate(+45deg); } 'div:nth-child(1)': ha-icon-button: $: mwc-icon-button: $: | .mdc-icon-button { animation: jumping 1s linear infinite alternate; } @keyframes jumping { 0% { padding-top: 0px; } 100% { padding-top: 12px; } '.box div:nth-child(3)': 'div:nth-child(1)': ha-icon-button: $: mwc-icon-button: $: | .mdc-icon-button { animation: stretching 1s linear infinite alternate; } @keyframes stretching { 0% { transform: scaleX(0.5); } 100% { transform: scaleX(2.0); } } 'div:nth-child(2)': ha-icon-button: $: mwc-icon-button: $: | .mdc-icon-button { animation: stretching 1s linear infinite alternate; } @keyframes stretching { 0% { transform: scaleY(0.5); } 100% { transform: scaleY(2.0); } } 'div:nth-child(3)': ha-icon-button: $: mwc-icon-button: $: | .mdc-icon-button { animation: flipping 1s linear infinite; } @keyframes flipping { 0% { transform: rotateX(0deg); } 100% { transform: rotateX(360deg); } } 'div:nth-child(4)': ha-icon-button: $: mwc-icon-button: $: | .mdc-icon-button { animation: disappearing 1s linear infinite alternate; } @keyframes disappearing { 0% { opacity: 0; } 100% { opacity: 1; } }

彩色的状态:
所有国家：
图像

类型：图片浏览标题：所有图片：/local/images/blue_low.jpg实体： - 实体：sun.sun  - 实体：sun.sun show_state：true  - 实体：sun.sun show_state：true  - 实体：sun.sunshow_state：true  - 实体：sun.sun  - 实体：input_boolean.test_boolean  - 实体：input_boolean.test_boolean style：.box .row：|.wrapper .state {颜色：橙色;}

一些州：
图像

类型：图片浏览标题：某些图片：/local/images/blue_low.jpg实体： - 实体：sun.sun  - 实体：sun.sun show_state：true  - 实体：sun.sun show_state：true  - 实体：sun.sunshow_state：true  - 实体：sun.sun  - 实体：input_boolean.test_boolean  - 实体：input_boolean.test_boolean style：|.box .row div：nth-​​child（3）.state {颜色：红色;} .box .row div：nth-​​child（4）.state {颜色：黑色;}

覆盖风格：
图像

类型：图片浏览标题：某些图片：/local/images/blue_low.jpg实体： - 实体：sun.sun  - 实体：sun.sun show_state：true  - 实体：sun.sun show_state：true  - 实体：sun.sunshow_state：true  - 实体：sun.sun  - 实体：input_boolean.test_boolean  - 实体：input_boolean.test_boolean style：.box .row：|.wrapper .state {颜色：橙色;} div：nth-​​child（3）.state {颜色：红色！重要;}

如何显示长期状态：
以下是默认情况下显示状态：
图像

使各国可见：

  • 增加物品的宽度;
  • 减少字体大小。

图像

类型：图片浏览标题：标题图片：/local/images/blue_low.jpg实体： - 实体：sun.sun  - 实体：sun.sun show_state：true  - 实体：sun.sun show_state：true  - 实体：sun.sunshow_state：true  - 实体：sun.sun风格：.box .row：|.wrapper {宽度：70px！重要;} .wrapper ha-icon-button {align-self：center;} .wrapper .state {font-size：9px;}

长状态可能显示为2行。为此启用文本的字包装。
请注意，整行自动增加。
图像

类型：图片浏览标题：标题图片：/local/images/blue_low.jpg实体： - 实体：sun.sun  - 实体：sun.sun show_state：true  - 实体：sun.sun show_state：true  - 实体：sun.sunshow_state：true  - 实体：sun.sun风格：.box .row：|.wrapper {宽度：50px！重要;} .wrapper ha-icon-button {align-self：center;} .wrapper .state {text-oderflow：未设置;白色空间：正常;字体大小：9px;}

如何更改某些项目的样式：
图像

类型：图片浏览标题：标题图片：/local/images/blue_low.jpg实体： - 实体：sun.sun  - 实体：sun.sun show_state：true  - 实体：sun.sun show_state：true  - 实体：sun.sunshow_state：true  - 实体：sun.sun风格：.box .row：|div：nth-​​child（3）{宽度：70px！重要;} .wrapper ha-icon-button {align-self：center;} div：nth-​​child（3）.state {font-size：9px;}

或这个：
图像

类型：图片浏览标题：标题图片：/local/images/blue_low.jpg实体： - 实体：sun.sun  - 实体：sun.sun show_state：true  - 实体：sun.sun show_state：true  - 实体：sun.sunshow_state：true  - 实体：sun.sun风格：.box .row：|DIV：Nth-Child（3）{宽度：50px！重要;} .wrapper ha-icon-button {align-self：center;} div：nth-​​child（3）.state {text-overflow：未设置;白色空间：正常;字体大小：9px;}

如何为调整大小的图标显示状态：
如果图标的大小被调整，那么状态可能会被放错位置:
图像

类型：图片浏览标题：标题图片：/local/images/blue_low.jpg实体： - 实体：sun.sun show_state：true  - 实体：sun.sun show_state：true  - 实体：sun.sun show_state：true  - 实体：Sun.sun风格：|HA卡{--mdc-icon-size：80px;}

如果物品的宽度增加，则清楚状态也未对准（不相对于图标对齐）：
图像

类型：图片浏览标题：标题图片：/local/images/blue_low.jpg实体： - 实体：sun.sun show_state：true  - 实体：sun.sun show_state：true  - 实体：sun.sun show_state：true  - 实体：Sun.sun风格：|HA卡{--mdc-icon-size：80px;} ha-card .box .row div{宽度:100px !important;}

如何解决它：
图像

类型：图片浏览标题：标题图片：/local/images/blue_low.jpg实体： - 实体：sun.sun show_state：true  - 实体：sun.sun show_state：true  - 实体：sun.sun show_state：true  - 实体：Sun.sun风格：|HA-CARD .BOX .ROW .WRAPPER HA-ICON-BUTTON {--mdc-icon-button-size：80px！重要;HA-CARD {--MDC-ICON-SIZE：80px;HA-Card .box .box .row .wrapper {align-item：center！重要;} ha-card .box .row div{宽度:100px !important;}

如何垂直对齐文本标题(+调整页脚大小):
如果显示状态，则标题可能不会垂直对齐：
图像
要垂直对齐，请设置“线高度”属性=页脚的高度（应通过检查器测量）：

类型：图片浏览标题：垂直对齐图像：/local/images/blue_low.jpg实体： - 实体：sun.sun  - 实体：sun.sun show_state：true  - 实体：sun.sun show_state：true  - 实体：太阳。Sun Show_State：True  - 实体：Sun.Sun风格：|。box .title { line-height: 52px; }

图像

此外，可以显式指定页脚的高度：
图像

类型：图片浏览标题：垂直对齐图像：/local/images/blue_low.jpg实体： - 实体：sun.sun  - 实体：sun.sun show_state：true  - 实体：sun.sun show_state：true  - 实体：太阳。Sun Show_State：True  - 实体：Sun.Sun风格：|哈卡。箱{高度：80px;HA-CARD .BOX .TITLE {line-height：80px;}

更改了底行的背景：
图像

类型：图片浏览标题：厨房图片：/local/images/blue_low_2.jpg实体： - 实体：sun.sun  - 实体：sun.sun  - 实体：input_boolean.test_boolean  - 实体：input_boolean.test_boolean style：|哈卡。箱{背景 - 颜色：RGBA（0,255,0.5）;}

样式的图片:
本节介绍如何使图像适合定义的卡尺寸。
默认情况下，卡片的大小取决于图像的大小:
图像

类型：图片浏览标题：厨房图片：/local/images/blue_low_2.jpg实体： - 实体：binary_sensor.iiyama_2_availability_status  - 实体：sun.sun  - 实体：sun.sun  - 实体：intern_boolean.test_boolean  - 实体：input_boolean.test_boolean- 实体：input_boolean.test_boolean  - 实体：input_boolean.test_boolean

如果已定义卡的大小，则图像的大小不会自动更改：
图像

类型：图片浏览标题：厨房图片：/local/images/blue_low_2.jpg实体： - 实体：binary_sensor.iiyama_2_availability_status  - 实体：sun.sun  - 实体：sun.sun  - 实体：intern_boolean.test_boolean  - 实体：input_boolean.test_boolean- 实体：input_boolean.test_boolean  - 实体：input_boolean.test_boolean style：|哈卡{高度：300px！重要;}

以下是如何解决它：
图像

类型：图片浏览标题：厨房图片：/local/images/blue_low_2.jpg实体： - 实体：binary_sensor.iiyama_2_availability_status  - 实体：sun.sun  - 实体：sun.sun  - 实体：intern_boolean.test_boolean  - 实体：input_boolean.test_boolean- 实体：input_boolean.test_boolean  - 实体：input_boolean.test_boolean style：hui-image：$：|div {height：继承;div img {height：继承;}。：| |Hui-Image {高度：100％;}。：| |哈卡{高度：300px！重要;}

没有底行：
图像
注意：如果底行的高度为40px（+ 8px用于填充），这将起作用;否则使用公式中的占用价值而不是“48px”。

类型：图片浏览标题：厨房图片：/local/images/blue_low_2.jpg实体： - 实体：binary_sensor.iiyama_2_availability_status  - 实体：sun.sun  - 实体：sun.sun  - 实体：intern_boolean.test_boolean  - 实体：input_boolean.test_boolean- 实体：input_boolean.test_boolean  - 实体：input_boolean.test_boolean style：hui-image：$：|div {height：继承;显示：内联;div img {height：继承;}。：| |Hui-Image {高度：Calc（100％ -  48px）;}。：| |哈卡{高度：300px！重要;}

下面将介绍伟德国际官方app下载苹果版更多的例子在这里。

2喜欢