Hi everyone.
I am looking for a way to recreate Xiaomi Home cards with contextual buttons inside the card. What I want to achieve is open more info dialog with a card tap and do another action with the embedded button.
Thanks In advance
Take a look at Mushroom cards. It’s more than capable of doing what you need, although there’s a learning curve. Mushroom Cards - Build a beautiful dashboard easily 🍄
custom:button-card has a limitless opportunities for designing buttons.
Check docs in GitHub and a dedicated thread in “share your projects” section.
I achieve some similar with cardmod and mushrom.
This is the code:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Electrodomésticos
- square: false
columns: 2
type: grid
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-climate-card
entity: climate.aire_acond_habitacion
fill_container: true
show_temperature_control: false
collapsible_controls: true
tap_action:
action: more-info
hold_action:
action: toggle
double_tap_action:
action: none
layout: vertical
style: |-
ha-card
{
border: none
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: |-
{% set state=states('climate.aire_acond_habitacion') %}
{% if state=='off' %}
mdi:weather-windy
{% else %}
mdi:stop
{% endif %}
icon_color: |-
{% set state=states('climate.aire_acond_habitacion') %}
{% if state=='off' %}
teal
{% else %}
#B00020
{% endif %}
entity: climate.aire_acond_habitacion
card_mod:
style:
mushroom-shape-icon$: ''
.: |
ha-card {
width: 0px;
margin-left: 74%;
top: -124px;
background: none;
border: none;
box-shadow: 0px 0px;
}
:host {
--mush-icon-size: 32px;
}
card_mod:
style: |
ha-card {
height: 119px !important;
bborder: none;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: vacuum.zhimi_w2_7e81_robot_cleaner_2
name: Lydsto W2
double_tap_action:
action: none
use_light_color: true
tap_action:
action: more-info
hold_action:
action: toggle
layout: vertical
style: |-
ha-card
{
border: none
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: |-
{% set state=states('vacuum.zhimi_w2_7e81_robot_cleaner_2') %}
{% if state=='docked' %}
mdi:broom
{% else %}
mdi:home
{% endif %}
icon_color: |-
{% set state=states('vacuum.zhimi_w2_7e81_robot_cleaner_2') %}
{% if state=='on' %}
#B00020
{% else %}
teal
{% endif %}
entity: vacuum.zhimi_w2_7e81_robot_cleaner_2
card_mod:
style:
mushroom-shape-icon$: ''
.: |
ha-card {
width: 0px;
margin-left: 74%;
top: -124px;
background: none;
border: none;
box-shadow: 0px 0px;
}
:host {
--mush-icon-size: 32px;
}
card_mod:
style: |
ha-card {
height: 119px !important;
bborder: none;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: fan.dmaker_p15_a266_fan_3
name: Mi Standing Fan pro
double_tap_action:
action: none
use_light_color: true
tap_action:
action: more-info
hold_action:
action: toggle
layout: vertical
style: |-
ha-card
{
border: none
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: |-
{% set state=states('fan.dmaker_p15_a266_fan_3') %}
{% if state=='on' %}
mdi:stop
{% else %}
mdi:weather-windy
{% endif %}
icon_color: |-
{% set state=states('fan.dmaker_p15_a266_fan_3') %}
{% if state=='on' %}
#B00020
{% else %}
teal
{% endif %}
entity: fan.dmaker_p15_a266_fan_3
card_mod:
style:
mushroom-shape-icon$: ''
.: |
ha-card {
width: 0px;
margin-left: 74%;
top: -124px;
background: none;
border: none;
box-shadow: 0px 0px;
}
:host {
--mush-icon-size: 32px;
}
card_mod:
style: |
ha-card {
height: 119px !important;
bborder: none;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: fan.zhimi_mb3_30aa_air_purifier
name: Mi Air Purifier 3H
double_tap_action:
action: none
use_light_color: true
tap_action:
action: more-info
hold_action:
action: toggle
layout: vertical
icon: mdi:turbine
style: |-
ha-card
{
border: none
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: |-
{% set state=states('fan.zhimi_mb3_30aa_air_purifier') %}
{% if state=='on' %}
mdi:stop
{% else %}
mdi:air-filter
{% endif %}
icon_color: |-
{% set state=states('fan.zhimi_mb3_30aa_air_purifier') %}
{% if state=='on' %}
#B00020
{% else %}
teal
{% endif %}
entity: fan.zhimi_mb3_30aa_air_purifier
card_mod:
style:
mushroom-shape-icon$: ''
.: |
ha-card {
width: 0px;
margin-left: 74%;
top: -124px;
background: none;
border: none;
box-shadow: 0px 0px;
}
:host {
--mush-icon-size: 32px;
}
card_mod:
style: |
ha-card {
height: 119px !important;
bborder: none;
}
card_mod:
style: |
ha-card {
border: none;
}