mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-19 15:26:59 +00:00
Lovelace: add visible example for views (#11061)
* add visible example * Update views.markdown * Update views.markdown
This commit is contained in:
Ian Richardson
Franck Nijhof
parent
a47fe6bf92
commit
4467de4c34
@ -64,10 +64,125 @@ If you define `visible` as objects instead of a boolean to specify conditions fo
|
|||||||
{% configuration badges %}
|
{% configuration badges %}
|
||||||
user:
|
user:
|
||||||
required: true
|
required: true
|
||||||
description: User id that can see the view tab.
|
description: User id that can see the view tab (unique hex value found on the Users configuration page).
|
||||||
type: string
|
type: string
|
||||||
{% endconfiguration %}
|
{% endconfiguration %}
|
||||||
|
|
||||||
|
#### Example
|
||||||
|
|
||||||
|
View config:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
- title: Living room
|
||||||
|
badges:
|
||||||
|
- device_tracker.demo_paulus
|
||||||
|
- entity: light.ceiling_lights
|
||||||
|
name: Ceiling Lights
|
||||||
|
icon: mdi:bulb
|
||||||
|
- entity: switch.decorative_lights
|
||||||
|
image: /local/lights.png
|
||||||
|
```
|
||||||
|
|
||||||
|
## Paths
|
||||||
|
|
||||||
|
You can link to one view from another view by its path. For this use cards that support navigation (`navigation_path`). Do not use special characters in paths.
|
||||||
|
|
||||||
|
### Example
|
||||||
|
|
||||||
|
View config:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
- title: Living room
|
||||||
|
# the final path is /lovelace/living_room
|
||||||
|
path: living_room
|
||||||
|
```
|
||||||
|
|
||||||
|
Picture card config:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
- type: picture
|
||||||
|
image: /local/living_room.png
|
||||||
|
tap_action:
|
||||||
|
action: navigate
|
||||||
|
navigation_path: /lovelace/living_room
|
||||||
|
```
|
||||||
|
|
||||||
|
## Icons
|
||||||
|
|
||||||
|
If you define an icon the title will be used as a tool-tip.
|
||||||
|
|
||||||
|
### Example
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
- title: Garden
|
||||||
|
icon: mdi:flower
|
||||||
|
```
|
||||||
|
|
||||||
|
## Visible
|
||||||
|
|
||||||
|
You can specify the visibility of views as a whole or per-user. (Note: This is only for the display of the tabs. The url path is still accessible)
|
||||||
|
|
||||||
|
### Example
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
views:
|
||||||
|
- title: Ian
|
||||||
|
visible:
|
||||||
|
- user: 581fca7fdc014b8b894519cc531f9a04
|
||||||
|
cards:
|
||||||
|
...
|
||||||
|
- title: Chelsea
|
||||||
|
visible:
|
||||||
|
- user: 6e690cc4e40242d2ab14cf38f1882ee6
|
||||||
|
cards:
|
||||||
|
...
|
||||||
|
- title: Admin
|
||||||
|
visible: db34e025e5c84b70968f6530823b117f
|
||||||
|
cards:
|
||||||
|
...
|
||||||
|
```
|
||||||
|
|
||||||
|
## Panel mode
|
||||||
|
|
||||||
|
This renders the first card on full width, other cards in this view will not be rendered. Good for cards like `map`, `stack` or `picture-elements`.
|
||||||
|
|
||||||
|
### Example
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
- title: Map
|
||||||
|
panel: true
|
||||||
|
cards:
|
||||||
|
- type: map
|
||||||
|
entities:
|
||||||
|
- device_tracker.demo_paulus
|
||||||
|
- zone.home
|
||||||
|
```
|
||||||
|
|
||||||
|
## Themes
|
||||||
|
|
||||||
|
Set a separate [theme](/integrations/frontend/#themes) for the view and its cards.
|
||||||
|
|
||||||
|
### Example
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
- title: Home
|
||||||
|
theme: happy
|
||||||
|
```
|
||||||
|
|
||||||
|
### Background
|
||||||
|
|
||||||
|
You can style the background of your views with a [theme](/integrations/frontend/#themes). You can use the CSS variable `lovelace-background`. For wallpapers you probably want to use the example below, more options can be found [here](https://developer.mozilla.org/en-US/docs/Web/CSS/background).
|
||||||
|
|
||||||
|
#### Example
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
# Example configuration.yaml entry
|
||||||
|
frontend:
|
||||||
|
themes:
|
||||||
|
example:
|
||||||
|
lovelace-background: center / cover no-repeat url("/local/background.png") fixed
|
||||||
|
```
|
||||||
|
|
||||||
## Badges
|
## Badges
|
||||||
|
|
||||||
### State Label Badge
|
### State Label Badge
|
||||||
@ -242,21 +357,6 @@ user:
|
|||||||
type: string
|
type: string
|
||||||
{% endconfiguration %}
|
{% endconfiguration %}
|
||||||
|
|
||||||
#### Example
|
|
||||||
|
|
||||||
View config:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
- title: Living room
|
|
||||||
badges:
|
|
||||||
- device_tracker.demo_paulus
|
|
||||||
- entity: light.ceiling_lights
|
|
||||||
name: Ceiling Lights
|
|
||||||
icon: mdi:bulb
|
|
||||||
- entity: switch.decorative_lights
|
|
||||||
image: /local/lights.png
|
|
||||||
```
|
|
||||||
|
|
||||||
### Entity Filter Badge
|
### Entity Filter Badge
|
||||||
|
|
||||||
This badge allows you to define a list of entities that you want to track only when in a certain state. Very useful for showing lights that you forgot to turn off or show a list of people only when they're at home.
|
This badge allows you to define a list of entities that you want to track only when in a certain state. Very useful for showing lights that you forgot to turn off or show a list of people only when they're at home.
|
||||||
@ -358,79 +458,3 @@ entities:
|
|||||||
value: 50
|
value: 50
|
||||||
attribute: humidity
|
attribute: humidity
|
||||||
```
|
```
|
||||||
|
|
||||||
## Paths
|
|
||||||
|
|
||||||
You can link to one view from another view by its path. For this use cards that support navigation (`navigation_path`). Do not use special characters in paths.
|
|
||||||
|
|
||||||
### Example
|
|
||||||
|
|
||||||
View config:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
- title: Living room
|
|
||||||
# the final path is /lovelace/living_room
|
|
||||||
path: living_room
|
|
||||||
```
|
|
||||||
|
|
||||||
Picture card config:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
- type: picture
|
|
||||||
image: /local/living_room.png
|
|
||||||
tap_action:
|
|
||||||
action: navigate
|
|
||||||
navigation_path: /lovelace/living_room
|
|
||||||
```
|
|
||||||
|
|
||||||
## Icons
|
|
||||||
|
|
||||||
If you define an icon the title will be used as a tool-tip.
|
|
||||||
|
|
||||||
### Example
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
- title: Garden
|
|
||||||
icon: mdi:flower
|
|
||||||
```
|
|
||||||
|
|
||||||
## Panel mode
|
|
||||||
|
|
||||||
This renders the first card on full width, other cards in this view will not be rendered. Good for cards like `map`, `stack` or `picture-elements`.
|
|
||||||
|
|
||||||
### Example
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
- title: Map
|
|
||||||
panel: true
|
|
||||||
cards:
|
|
||||||
- type: map
|
|
||||||
entities:
|
|
||||||
- device_tracker.demo_paulus
|
|
||||||
- zone.home
|
|
||||||
```
|
|
||||||
|
|
||||||
## Themes
|
|
||||||
|
|
||||||
Set a separate [theme](/integrations/frontend/#themes) for the view and its cards.
|
|
||||||
|
|
||||||
### Example
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
- title: Home
|
|
||||||
theme: happy
|
|
||||||
```
|
|
||||||
|
|
||||||
### Background
|
|
||||||
|
|
||||||
You can style the background of your views with a [theme](/integrations/frontend/#themes). You can use the CSS variable `lovelace-background`. For wallpapers you probably want to use the example below, more options can be found [here](https://developer.mozilla.org/en-US/docs/Web/CSS/background).
|
|
||||||
|
|
||||||
#### Example
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
# Example configuration.yaml entry
|
|
||||||
frontend:
|
|
||||||
themes:
|
|
||||||
example:
|
|
||||||
lovelace-background: center / cover no-repeat url("/local/background.png") fixed
|
|
||||||
```
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user