add show/hide button card (and make that templatable too..)

Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I’m always frustrated when […]

I need some of my buttons to show/hide depending on a templated value, in this case view:

      [[[ return window.location.pathname.split('lovelace/')[1]; ]]]

The above is used in various config templates, but I couldn’t find a way to show/hide a full button based in this. Not can I use state-switch, or conditional core card for that matter.

Describe the solution you’d like A clear and concise description of what you want to happen.

Id wager a new config variable show: could be added, either being boolean hard coded, or using a template like the above

Describe alternatives you’ve considered A clear and concise description of any alternative solutions or features you’ve considered.

conditional core card state-switch custom card Additional context Add any other context or screenshots about the feature request here.

is an experimental short cut menu bar. I which I would like to have the current view button be hidden (now highlighted)

if at ll possible, it would also need to auto slide in, and not leave a gap in de middle of the button-bar… This is where my hopes are set on stack-in-card 😉

first couple of menu buttons of the above:

type: vertical-stack
cards:

  - type: custom:stack-in-card
    mode: horizontal
    keep:
      background: true
    cards:

      - type: custom:button-card
        template: button_shortcut_menu
        icon: mdi:home
        tap_action:
          action: navigate
          navigation_path: home
        variables:
           path: home
        styles:
          icon:
            - color: >
                [[[
                  return (states['sensor.count_alerts_notifying'].state > 0)
                  ? 'red': 'green';
                ]]]
        state:
          - operator: template
            value: >
              [[[ return (states['sensor.count_alerts_notifying'].state > 0) ]]]
            spin: true
#        spin: >
#            [[[ return (states['sensor.count_alerts_notifying'].state > 0)
#                ? true : false; ]]]

      - type: custom:button-card
        template: button_shortcut_menu
        icon: mdi:light-switch
        tap_action:
          action: navigate
          navigation_path: lights
        variables:
          path: lights
        styles:
          icon:
            - color: >
                [[[
                  return (states['group.all_inside_lights'].state == 'on')
                  ? 'gold': 'grey';
                ]]]

      - type: custom:button-card
        template: button_shortcut_menu
        icon: mdi:home-outline
        tap_action:
          action: navigate
          navigation_path: home_summary
        variables:
          path: home_summary
        styles:
          icon:
            - color: >
                [[[
                  if (states['sensor.hubs_badge'].state > 0 ||
                          states['sensor.status_badge'].state > 0)
                  return 'red'; return 'var(--text-primary-color)';
                ]]]
          card:
            - animation: >
                [[[ return (states['sensor.hubs_badge'].state > 0 ||
                          states['sensor.status_badge'].state > 0)
                    ? 'blink 2s ease infinite' :'none';
                ]]]

[emufan]

I came here, because I searched for a display/hide filter as well. Would be great to have it out of the box.

Until then, I will stay with this apporach

        styles:
          card:
            - display: |
                [[[
                  return `none`
                ]]]
            - width: |
                [[[
                  return `0`
                ]]]

With some JS if around of course.

[michalk-k]

Incidentally, recently I’m trying to resolve the same issue as Marius. I found that styles: card: affects the card’s ha-card element. But it’s wrapped by `button-card which still allocates the space in a layout.

Thank you for @emufan for the workaround!