本帖最后由 qiaofei828 于 2023-8-23 18:15 编辑
此贴只是搬运官方论坛的分享,经实测后发出。一般只需要替换代码中的实体即可使用。建议在使用前先安装应用“Mushroom Themes”主题。
由于本人水平有限,不能回答大家在使用中的问题。请大家自行交流。
达到效果需要以下卡片:
1、Mushroom
2、mini-graph-card
3、Vertical Stack In Card
4、card-mod
5、Stack In Card
《欢迎卡片》
作者:@rhysb
效果图:
欢迎卡
代码:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: custom:mushroom-chips-card
chips:
- type: menu
- type: conditional
conditions:
- entity: light.suo_you_deng
state: 'on'
chip:
type: template
icon: mdi:lightbulb
content: >-
{{ expand(states.light.suo_you_deng) | selectattr( 'state',
'eq', 'on') | list | count }}
tap_action:
action: more-info
entity: light.suo_you_deng
icon_color: orange
- type: conditional
conditions:
- entity: group.all_windows
state: 'on'
chip:
type: template
icon_color: grey
icon: mdi:window-open
content: >-
{{ expand(states.group.all_windows) | selectattr( 'state', 'eq',
'on') | list | count }}
tap_action:
action: more-info
entity: group.all_windows
- type: conditional
conditions:
- entity: binary_sensor.men_chuang_chuan_gan_qi_zu
state: 'on'
chip:
type: template
icon_color: grey
icon: mdi:door-open
content: >-
{{ expand(states.binary_sensor.men_chuang_chuan_gan_qi_zu) |
selectattr( 'state', 'eq', 'on') | list | count }}
tap_action:
action: more-info
entity: binary_sensor.men_chuang_chuan_gan_qi_zu
card_mod:
style: |
:host {
--ha-card-background: var(--card-background-color);
}
- square: false
columns: 2
type: grid
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: person.fei_fei
state: home
chip:
type: entity
entity: person.fei_fei
content_info: nam
use_entity_picture: true
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-state-person-home), 0.4);
margin-top: 5px;
margin-bottom: 10px;
}
- type: conditional
conditions:
- entity: person.fei_fei
state: home
chip:
type: entity
entity: person.fei_fei
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-state-person-home), 0.4);
margin-top: 5px;
margin-bottom: 10px;
}
- type: conditional
conditions:
- entity: person.fei_fei
state: home
chip:
type: entity
entity: person.fei_fei
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-state-person-home), 0.4);
margin-top: 5px;
margin-bottom: 10px;
}
- type: conditional
conditions:
- entity: person.fei_fei
state: home
chip:
type: entity
entity: person.fei_fei
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-state-person-home), 0.4);
margin-top: 5px;
margin-bottom: 10px;
}
alignment: start
card_mod:
style: |
ha-card {
margin-left: 8px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: person.fei_fei
state_not: home
chip:
type: entity
entity: person.fei_fei
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
{% if is_state('person.fei_fei', 'not_home') %}
--chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
{% elif is_state('person.fei_fei', 'unknown') %}
--chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
{% else %}
--chip-background: rgba(var(--rgb-state-person-zone), 0.4);
{% endif %}
margin-top: 5px;
margin-bottom: 10px;
}
- type: conditional
conditions:
- entity: person.fei_fei
state_not: home
chip:
type: entity
entity: person.fei_fei
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
{% if is_state('person.fei_fei', 'not_home') %}
--chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
{% elif is_state('person.fei_fei', 'unknown') %}
--chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
{% else %}
--chip-background: rgba(var(--rgb-state-person-zone), 0.4);
{% endif %}
margin-top: 5px;
margin-bottom: 10px;
}
- type: conditional
conditions:
- entity: person.fei_fei
state_not: home
chip:
type: entity
entity: person.fei_fei
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
{% if is_state('person.fei_fei', 'not_home') %}
--chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
{% elif is_state('person.fei_fei', 'unknown') %}
--chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
{% else %}
--chip-background: rgba(var(--rgb-state-person-zone), 0.4);
{% endif %}
margin-top: 5px;
margin-bottom: 10px;
}
- type: conditional
conditions:
- entity: person.fei_fei
state_not: home
chip:
type: entity
entity: person.fei_fei
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
{% if is_state('person.fei_fei', 'not_home') %}
--chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
{% elif is_state('person.fei_fei', 'unknown') %}
--chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
{% else %}
--chip-background: rgba(var(--rgb-state-person-zone), 0.4);
{% endif %}
margin-top: 5px;
margin-bottom: 10px;
}
alignment: end
card_mod:
style: |
ha-card {
margin-right: 8px;
}
- type: custom:mushroom-title-card
title: |-
{% set time = now().hour %}
{% if (time >= 18) %}
上午好, {{user}}!
{% elif (time >= 12) %}
下午好, {{user}}!
{% elif (time >= 5) %}
晚上好, {{user}}!
{% else %}
Hello, {{user}}
{% endif %}
subtitle: ''
- type: custom:simple-weather-card
entity: weather.wo_de_jia
name: 我的家
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: 房间
icon: mdi:home
layout: vertical
icon_color: blue
tap_action:
action: navigate
navigation_path: house
card_mod:
style: |
ha-card {
background: var(--card-background-color);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: 灯光
icon: mdi:lightbulb
icon_color: amber
layout: vertical
tap_action:
action: navigate
navigation_path: lights
card_mod:
style: |
ha-card {
background: var(--card-background-color);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: 安防
icon: mdi:shield
icon_color: green
layout: vertical
tap_action:
action: navigate
navigation_path: security
card_mod:
style: |
ha-card {
background: var(--card-background-color);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: 媒体
icon: mdi:speaker
layout: vertical
icon_color: red
tap_action:
action: navigate
navigation_path: media
card_mod:
style: |
ha-card {
background: var(--card-background-color);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: 网络
icon: mdi:lan
layout: vertical
icon_color: cyan
tap_action:
action: navigate
navigation_path: media
card_mod:
style: |
ha-card {
background: var(--card-background-color);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
}
card_mod:
style: |
ha-card {
padding: 2px;
background: rgba(var(--rgb-primary-text-color), 0.01);
}
|