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 %}
|
||||
user:
|
||||
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
|
||||
{% 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
|
||||
|
||||
### State Label Badge
|
||||
@ -242,21 +357,6 @@ user:
|
||||
type: string
|
||||
{% 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
|
||||
|
||||
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
|
||||
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