mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-06-01 07:46:49 +00:00
131 lines
3.1 KiB
Markdown
131 lines
3.1 KiB
Markdown
---
|
|
layout: page
|
|
title: "Views"
|
|
description: "The Lovelace UI is a powerful and configurable interface for Home Assistant."
|
|
date: 2018-07-01 10:28 +00:00
|
|
sidebar: true
|
|
comments: false
|
|
sharing: true
|
|
footer: true
|
|
---
|
|
|
|
To display cards on the UI you have to define them in views. Views sort cards in columns based on their `card size`. If you want to group some cards you have to use `stack` cards.
|
|
|
|
<p class="img">
|
|
<img src="/images/lovelace/lovelace_views.png" alt="Views toolbar">
|
|
Use titles and icons to describe the content of views.
|
|
</p>
|
|
|
|
{% configuration views %}
|
|
views:
|
|
required: true
|
|
description: A list of view configurations.
|
|
type: list
|
|
keys:
|
|
title:
|
|
required: true
|
|
description: The title or name.
|
|
type: string
|
|
badges:
|
|
required: false
|
|
description: List of entities IDs to display as badge.
|
|
type: list
|
|
cards:
|
|
required: false
|
|
description: Cards to display in this view.
|
|
type: list
|
|
id:
|
|
required: false
|
|
description: IDs are used in the URL, more info below.
|
|
type: string
|
|
default: view index
|
|
icon:
|
|
required: false
|
|
description: Icon-name from Material Design Icons.
|
|
type: string
|
|
panel:
|
|
required: false
|
|
description: Renders the view in panel mode, more info below.
|
|
type: boolean
|
|
default: "false"
|
|
background:
|
|
required: false
|
|
description: Style the background using CSS, more info below.
|
|
type: string
|
|
theme:
|
|
required: false
|
|
description: Themes view and cards, more info below.
|
|
type: string
|
|
{% endconfiguration %}
|
|
|
|
## {% linkable_title IDs %}
|
|
|
|
You can link to one view from another view by its ID. For this use cards that support navigation (`navigation_path`). Do not use special characters in IDs.
|
|
|
|
### {% linkable_title Example %}
|
|
|
|
View config:
|
|
|
|
```yaml
|
|
- title: Living room
|
|
# the final path is /lovelace/living_room
|
|
id: living_room
|
|
```
|
|
|
|
Picture card config:
|
|
|
|
```yaml
|
|
- type: picture
|
|
image: /local/living_room.png
|
|
navigation_path: /lovelace/living_room
|
|
```
|
|
|
|
## {% linkable_title Icons %}
|
|
|
|
If you define an icon the title will be used as a tooltip.
|
|
|
|
### {% linkable_title Example %}
|
|
|
|
```yaml
|
|
- title: Garden
|
|
icon: mdi:flower
|
|
```
|
|
|
|
## {% linkable_title 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`.
|
|
|
|
### {% linkable_title Example %}
|
|
|
|
```yaml
|
|
- title: Map
|
|
panel: true
|
|
cards:
|
|
- type: map
|
|
entities:
|
|
- device_tracker.demo_paulus
|
|
- zone.home
|
|
```
|
|
|
|
## {% linkable_title Background %}
|
|
|
|
Style the background of views using [CSS](https://en.wikipedia.org/wiki/Cascading_Style_Sheets). 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).
|
|
|
|
### {% linkable_title Example %}
|
|
|
|
```yaml
|
|
- title: Living room
|
|
background: center / cover no-repeat url("/local/background.png") fixed
|
|
```
|
|
|
|
## {% linkable_title Themes %}
|
|
|
|
Set a separate [theme](/components/frontend/#themes) for the view and its cards.
|
|
|
|
### {% linkable_title Example %}
|
|
|
|
```yaml
|
|
- title: Home
|
|
theme: happy
|
|
```
|