#Simulate pop up menu

1 messages · Page 1 of 1 (latest)

steep blade
steep blade
#

I got the dock ready

steep blade
#

want to use this bottom right button like in the video

tawny frost
# steep blade

Put an input_boolean into the button as entity. For the button and the pop-up card I am using button-card here:

# Button
- type: custom:button-card
  entity: input_boolean.show_slide_card

... and this goes into the pop-up / slide-in card:

# Slide-in card 
- type: custom:button-card
  custom_fields:
    plugin1:
      name: Plugin Slot 1
      card:
        type: custom:button-card
        ...
    plugin2:
      name: Plugin Slot 2
      card:
        type: custom:button-card
        ... 
    plugin3:
      name: Plugin Slot 3
      card:
        type: custom:button-card
        ...
  extra_styles: |
    @keyframes slide-in {
      0% {transform: translateX(-250px);}
      100% {transform: translateX(0);}
    }
    @keyframes opacity {
      0% {opacity:0;}
      20% {opacity:1;}
    }
  styles:
    grid:
      - grid-template-areas: |
          "plugin1"
          "plugin2"
          "plugin3"
      - grid-template-columns: 1fr
      - grid-template-rows: auto       
    card:
      - height: 400px
      - width: 250px
      - position: absolute
      - opacity: 0.98
      - z-index: 2
      - display: >
          [[[
            if (states['input_boolean.show_slide_card'].state == "on"){
             return 'block';
           } else {
             return 'none';
           }
          ]]]
      - animation:
          - slide-in .5s ease-out
          - opacity .5s ease-in

The magic happens in extra_styles. You just need to amend the parameters to your needs. Just play with translateX / translateY and some numbers.

steep blade
#

cool ill have a try with this

steep blade