x-anchors: default: &default type: button icon: mdi:star desc: &desc type: markdown style: | code { font-size: 8pt; line-height: normal; white-space: pre-wrap; } title: Popup cards: - <<: *desc content: | ## Service: `browser_mod.popup` - type: vertical-stack cards: - <<: *desc content: | ``` title: Default card: type: markdown content: Popup! ``` - <<: *default name: Default tap_action: action: fire-dom-event browser_mod: command: popup title: Default card: type: markdown content: Popup! - type: vertical-stack cards: - <<: *desc content: | ``` title: Large large: true card: type: markdown content: Popup! ``` - <<: *default name: Large tap_action: action: fire-dom-event browser_mod: command: popup title: Large large: true card: type: markdown content: Popup! - type: vertical-stack cards: - <<: *desc content: | ``` title: Hide Header hide_header: true card: type: markdown content: Popup! ``` - <<: *default name: Hide header tap_action: action: fire-dom-event browser_mod: command: popup title: Hide Header hide_header: true card: type: markdown content: Popup! - type: vertical-stack cards: - <<: *desc content: | ``` title: Auto close auto_close: true card: type: markdown content: Popup! ``` - <<: *default name: Auto close tap_action: action: fire-dom-event browser_mod: command: popup title: Auto close auto_close: true card: type: markdown content: Popup! - type: vertical-stack cards: - <<: *desc content: | ``` title: Popup 1 card: <<: *default tap_action: action: fire-dom-event browser_mod: command: popup title: Popup 2 card: type: markdown content: Popup! ``` - <<: *default name: Nested popup tap_action: action: fire-dom-event browser_mod: command: popup title: Popup 1 card: <<: *default tap_action: action: fire-dom-event browser_mod: command: popup title: Popup 2 card: type: markdown content: Popup! - type: vertical-stack cards: - <<: *desc content: | More info in popup. May have different behavior depending on whether a more-info dialog has ever been opened before a popup. - type: entities entities: [light.bed_light] - <<: *default name: More info in popup tap_action: action: fire-dom-event browser_mod: command: popup title: More info in popup card: type: entities entities: [light.bed_light] - type: vertical-stack cards: - <<: *desc content: | ``` style: $: | .mdc-dialog { backdrop-filter: blur(17px); -webkit-backdrop-filter: blur(17px); } .mdc-dialog .mdc-dialog__container .mdc-dialog__surface { border-radius: 25px; } .: | :host { --mdc-theme-surface: rgba(0,0,0,0); --secondary-background-color: rgba(0,0,0,0.5); --ha-card-background: rgba(0,0,0,0.5); } :host .content { width: 90vw; height: 90vh; } ``` - <<: *default name: Styled tap_action: action: fire-dom-event browser_mod: command: popup title: Styled popup card: type: markdown content: Popup! style: $: | .mdc-dialog { backdrop-filter: blur(17px); -webkit-backdrop-filter: blur(17px); } .mdc-dialog .mdc-dialog__container .mdc-dialog__surface { border-radius: 25px; } .: | :host { --mdc-theme-surface: rgba(0,0,0,0); --secondary-background-color: rgba(0,0,0,0.5); --ha-card-background: rgba(0,0,0,0.5); } :host .content { width: 90vw; height: 90vh; } - <<: *default name: Close popup tap_action: action: call-service service: browser_mod.close_popup