226 lines
5.4 KiB
YAML

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