XDM推荐一张新出的弹出卡片，简洁大方

Sparta

GitHub - Clooos/Bubble-Card: Bubble Card is a minimalist card collection for Home Assistant with a nice pop-up touch.这个卡片厉害的地方下面设置的房间入口你可以关联对应房间所有灯，实现一目了然知道哪个房间灯亮着并且可以按照有人移动的前后时间顺序排列房间顺序，这样设计感觉很棒很智能，mushroom也可以需要自己稍微研究下，这个卡片填入对应房间灯的集合实体跟人体传感器就行了很简单，我是从Mushroom作者youtube看到他推荐的这个新出的卡片，Everything Smart Home这位大牛youtube的频道，他会分享很多不错的主题以及每次homeassistant的更新内容还会教你怎么设置他的mushroom，另外这个卡片还没上架hacs商店需要自定义存储库添加，网络上可能需要点魔法才能添加成功

type: custom:bubble-card
card_type: horizontal-buttons-stack
auto_order: true
1_name: 卧室
1_icon: hue:room-bedroom
1_link: '#1'
1_entity: light.zhu_wo_deng_zu
1_pir_sensor: binary_sensor.0x00158d0002047938_motion
2_name: 书房
2_icon: hue:room-closet
2_link: '#2'
2_entity: light.shu_fang_deng_zu
2_pir_sensor: binary_sensor.50ec50ccd358_motion
3_name: 客厅
3_icon: hue:room-living
3_link: '#3'
3_entity: light.ke_ting_suo_you_deng
3_pir_sensor: binary_sensor.ccb5d1effc4e_occupancy
4_name: 儿童卧室
4_icon: hue:room-nursery
4_link: '#4'
4_entity: light.er_tong_wo_shi_deng
4_pir_sensor: binary_sensor.0x00158d0002375243_motion

复制代码

这是我房间入口的卡片，里面的灯组跟人体传感器你们改成自己的，里面的link是连接对应房间卡片的，link的房间在下面代码第二个子选项Hash里面设置，Hash里面的名称要对应link的名称

type: vertical-stack
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        picture: ''
        entity: binary_sensor.e4aaec6048d4_contact
        icon: |-
          {% if is_state(entity, 'off') %}
            mdi:door-sliding 
          {% elif is_state(entity, 'on') %}
            mdi:door-sliding-open
          {% endif %} 
        content: |-
          {% if is_state(entity, 'off') %}
            关闭 
          {% elif is_state(entity, 'on') %}
            打开
          {% endif %} 
        tap_action:
          action: more-info
        card_mod:
          style: |
            ha-card:active {
                transform: scale(0.975);
                transition: 0s;
            }
            ha-card {
              --chip-box-shadow: none;
              --chip-background: rgba(var(--rgb-primary-text-color), 0.06);
            }
      - type: conditional
        conditions:
          - entity: switch.0x00158d0003450e99_plug
            state: 'on'
        chip:
          type: template
          content: '{{ states(''sensor.0x00158d0003450e99_power'') | round(0) }} W'
          entity: sensor.0x00158d0003450e99_power
          icon: mdi:router-wireless
          icon_color: null
          double_tap_action:
            action: call-service
            service: switch.turn_off
            data: {}
            target:
              entity_id: switch.0x00158d0003450e99_plug
          tap_action:
            action: more-info
          card_mod:
            style: |
              ha-card:active {
                  transform: scale(0.975);
                  transition: 0s;
              }
              ha-card {
                --chip-box-shadow: none;
                --chip-background: rgba(var(--rgb-primary-text-color), 0.06);
              }
      - type: conditional
        conditions:
          - entity: switch.0x00158d0003450e0c_plug
            state: 'on'
        chip:
          type: template
          content: '{{ states(''sensor.0x00158d0003450e0c_power'') | round(0) }} W'
          entity: sensor.0x00158d0003450e0c_power
          icon: mdi:sony-playstation
          double_tap_action:
            action: call-service
            service: switch.turn_off
            data: {}
            target:
              entity_id: switch.0x00158d0003450e0c_plug
          tap_action:
            action: more-info
          card_mod:
            style: |
              ha-card:active {
                  transform: scale(0.975);
                  transition: 0s;
              }
              ha-card {
                --chip-box-shadow: none;
                --chip-background: rgba(var(--rgb-primary-text-color), 0.06);
      - type: conditional
        conditions:
          - entity: switch.0x00158d00028c9936_plug
            state: 'on'
        chip:
          type: template
          content: '{{ states(''sensor.0x00158d00028c9936_power'')  | round(0) }} W'
          entity: sensor.0x00158d00028c9936_power
          icon: cil:imac-alternative
          double_tap_action:
            action: call-service
            service: switch.turn_off
            data: {}
            target:
              entity_id: switch.0x00158d00028c9936_plug
          tap_action:
            action: more-info
          card_mod:
            style: |
              ha-card:active {
                  transform: scale(0.975);
                  transition: 0s;
              }
              ha-card {
                --chip-box-shadow: none;
                --chip-background: rgba(var(--rgb-primary-text-color), 0.06);
      - type: conditional
        conditions:
          - entity: switch.kong_diao
            state: 'on'
        chip:
          type: entity
          entity: sensor.lumi_v3_cf85_electric_power
          icon: mdi:thermostat
          card_mod:
            style: |
              ha-card:active {
                  transform: scale(0.975);
                  transition: 0s;
              }
              ha-card {
                --chip-box-shadow: none;
                --chip-background: rgba(var(--rgb-primary-text-color), 0.06);
      - type: conditional
        conditions:
          - entity: fan.kong_qi_jing_hua_qi
            state: 'on'
        chip:
          type: entity
          entity: sensor.kong_qi_jing_hua_qi_pm2_5
          double_tap_action:
            action: call-service
            service: fan.turn_off
            data: {}
            target:
              entity_id: fan.kong_qi_jing_hua_qi
          card_mod:
            style: |
              ha-card:active {
                  transform: scale(0.975);
                  transition: 0s;
              }
              ha-card {
                --chip-box-shadow: none;
                --chip-background: rgba(var(--rgb-primary-text-color), 0.06);
    alignment: start
  - type: custom:bubble-card
    card_type: pop-up
    entity: light.shu_fang_deng_zu
    icon: hue:room-closet
    name: 书房
    hash: '#2'
    state: sensor.kong_qi_jing_hua_qi_pm2_5
    state_unit: ' µg/m³'
    margin_top: 74px
    width_desktop: 600px
    margin_top_mobile: 18px
    margin_top_desktop: 74px
    styles: |
      #root {
        /* This is a fix for older Safari (for my wall mounted iPad) but it won't work on Firefox, this is optional */
        display: grid !important;
      }
  - type: grid
    square: false
    columns: 2
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.582d3411b3eb_temperature
        primary_info: state
        secondary_info: name
        name: 温度
        fill_container: false
        icon_color: green
        layout: horizontal
        card_mod:
          style: |
            ha-card:active {
                transform: scale(0.975);
                transition: 0s;
            }
            ha-card {
              box-shadow: none;
              background: rgba(var(--rgb-primary-text-color), 0.06);
            } 
      - type: custom:mushroom-entity-card
        entity: sensor.582d3411b3eb_humidity
        primary_info: state
        secondary_info: name
        name: 湿度
        icon_color: blue
        card_mod:
          style: |
            ha-card:active {
                transform: scale(0.975);
                transition: 0s;
            }
            ha-card {
              box-shadow: none;
              background: rgba(var(--rgb-primary-text-color), 0.06);
            } 
  - type: custom:bubble-card
    card_type: separator
    icon: mdi:lightbulb
    name: 灯
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        entity: light.yeelink_lamp2_e68f_light
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        entity: light.yeelink_bslamp2_7300_light
        name: 沙发灯
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        entity: light.shu_fang_deng
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        entity: light.zou_lang_deng
  - type: custom:bubble-card
    card_type: separator
    name: 设备
    icon: mdi:connection
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        entity: switch.0x00158d00028c9936_plug
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        entity: fan.xiaomi_smart_fan
        name: 风扇
        icon: mdi:fan
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        entity: switch.0x00158d0003450e0c_plug
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        entity: switch.qmi_v1_8be9_switch
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        entity: fan.kong_qi_jing_hua_qi
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        entity: climate.lumi_v3_cf85_air_conditioner
        icon: mdi:thermostat
        name: 空调
  - type: custom:bubble-card
    card_type: separator
    icon: mdi:playlist-music
    name: 音箱
  - square: false
    type: grid
    cards:
      - type: custom:mushroom-media-player-card
        entity: media_player.homepod_you
        use_media_info: true
        show_volume_level: true
        collapsible_controls: false
        media_controls:
          - play_pause_stop
          - next
          - on_off
          - previous
        volume_controls:
          - volume_buttons
          - volume_set
          - volume_mute
        fill_container: false
        icon_type: icon
        icon: ''
        secondary_info: state
        tap_action:
          action: more-info
        card_mod:
          style: |
            ha-card {
              box-shadow:
              background: rgba(var(--rgb-primary-text-color), 0.06);
            }
                card_mod:
              style: |
                ha-card:active {
                    transform: scale(0.975);
                    transition: 0s;
                }
                ha-card {
                  box-shadow: none;
                  background: rgba(var(--rgb-primary-text-color), 0.06);
                } 
    columns: 1
  - square: false
    type: grid
    cards:
      - type: custom:mushroom-media-player-card
        entity: media_player.denon_avr_x3000
        use_media_info: true
        show_volume_level: true
        collapsible_controls: false
        media_controls:
          - next
          - on_off
          - previous
        volume_controls:
          - volume_buttons
        fill_container: false
        icon_type: icon
        icon: ''
        secondary_info: state
        tap_action:
          action: more-info
        card_mod:
          style: |
            ha-card:active {
                transform: scale(0.975);
                transition: 0s;
            }
            ha-card {
              box-shadow: none;
              background: rgba(var(--rgb-primary-text-color), 0.06);
            }   
      - type: custom:mushroom-media-player-card
        fill_container: false
        media_controls:
          - next
          - previous
        volume_controls:
          - volume_buttons
        collapsible_controls: false
        show_volume_level: true
        use_media_info: true
        tap_action:
          action: more-info
        entity: media_player.xiaomini_lx04_36d2_play_control
        icon: cil:apple-homepod
        card_mod:
          style: |
            ha-card:active {
                transform: scale(0.975);
                transition: 0s;
            }
            ha-card {
              box-shadow: none;
              background: rgba(var(--rgb-primary-text-color), 0.06);
            }   
    columns: 2

复制代码

这是我的弹出卡片书房的代码，进去后就第一个子卡片是mushroom的chip卡片做的没有图形界面（不知道为什么没有可能是我用card_mod加了按键动画），其他的直接在图形界面里面修改成你们自己的实体，当然里面可以加各种卡片，可以发挥你们想象，感觉mushroom的风格比较契合，其他卡片融合进去会看起来杂乱，不排除作者会在后面加上各种自己审美的卡片那是最好的了，我把mushroom的风格跟Bubble Card的风格做了统一去除了卡片轮廓更改了卡片背景颜色具体可以在mushroom卡片下的card_mod里面更改，ha-card:active这个是设置按键按下的动作不需要的可以删除

dengdeng6688

老哥好，能出一个这个bubble  card ，详细的教程不，看着非常帅，但是一用就废。不修改代码的情况下，比如一级界面的资源按钮如何设置，二级界面弹开的界面如何添加，谢谢老哥了！！！

zxyny1989

Xxxxi 发表于 2023-10-11 12:03
我知道这个方法，这种方法选择灯组的话只能选择light类型，例如一个房间有light和switch两种类型的灯就没 ...

实体的类型可以修改了，修改下就好了

Ari

第一张图的房间卡片怎么弄的呢，求指导贴代码抄

jayh

你好，请教一下你的人员卡片怎么写的，方便给配置代码参考下吗，或者给一下您的mushroom页面的代码看看，看了您的贴子很好看，想学习学习

wkbhll

请教楼主 hue: 图标库 哪里可以下？

yuyuye

楼主，你的蘑菇卡片代码可以挑一个房间发一下吗？
感觉很对我的口味，感谢感谢~

eigload

大神，求配置

Xxxxi

Sparta 发表于 2023-10-12 22:46
设置-设备与服务-辅助元素更-改开关的设备类型，把开关改为light这样就都可以加入灯组了 ...

看到了，感谢。

Sparta

Xxxxi 发表于 2023-10-11 14:31
补充一下我现在的具体情况：

设置-设备与服务-辅助元素更-改开关的设备类型，把开关改为light这样就都可以加入灯组了