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

[Mariusthvdb]

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';
                ]]]

[RomRider]

I can understand the purpose, however why can't you use state-switch-card?

[Mariusthvdb]

Managed after all:

      - type: custom:state-switch
        entity: group
        states:
          admin:
            type: custom:button-card
            template: button_shortcut_menu
            icon: mdi:tune
            tap_action:
              action: navigate
              navigation_path: /ui-settings/settings
            variables:
              path: settings

          user:
            type: custom:button-card
            template: button_shortcut_menu
            icon: mdi:help
            tap_action:
              action: navigate
              navigation_path: /lovelace/help
            variables:
              path: help

still would be very nice not to need an extra card for this.

ive also changed the template in the button card template to:

button_shortcut_menu:
  variables:
    view: >
      [[[ return window.location.pathname.split('/').slice(-1) ]]]
  size: 25px
  styles:
    icon:
      - color: var(--secondary-text-color)
    card:
      - background: >
          [[[ return variables.view == variables.path
              ? 'var(--secondary-background-color)' : 'var(--card-background-color)';
          ]]]

so I can keep using the variable path, independent of the various dashboards path's

[amitkeret]

@RomRider

I can understand the purpose, however why can't you use state-switch-card?

I completely agree with @Mariusthvdb on this

still would be very nice not to need an extra card for this.

Using state-switch indeed works as an alternative, but it creates card duplication and room for errors. This workaround could also work for #543 but again, creates duplicate cards.

A single card, which supports state-based show/hide would be a better solution.

[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!