mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-21 08:16:53 +00:00
✏️ Lovelace index and views spelling fixes
This commit is contained in:
parent
fc01fd4609
commit
4afb924778
@ -17,10 +17,10 @@ Starting with Home Assistant 0.72, we're experimenting with a new way of definin
|
||||
|
||||
The Lovelace UI is:
|
||||
|
||||
- **Extremely fast**. We create the user interface when the UI configuration changes. When a state changes, we just make the UI represent the current state.
|
||||
- **Extremely customizable**. We have a new file for just configuration. In the past, we declined UI specific options because they did not fit in the state machine. They will fit in a configuration file for a user interface.
|
||||
- **Extremely extensible**. It's based on the web standard [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements). Don't like the built-in cards? Make your own! Custom cards are treated the same as built-in cards and are configured the same way. [Check the docs.](https://developers.home-assistant.io/docs/en/lovelace_custom_card.html)
|
||||
- **Making the backend faster**. With Lovelace, the backend will no longer need to maintain entities like groups for the sole purpose of showing them on the frontend.
|
||||
- **Extremely fast**. We create the user interface when the UI configuration changes. When a state changes, we just make the UI represent the current state.
|
||||
- **Extremely customizable**. We have a new file for just configuration. In the past, we declined UI specific options because they did not fit in the state machine. They will fit in a configuration file for a user interface.
|
||||
- **Extremely extensible**. It's based on the web standard [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements). Don't like the built-in cards? Make your own! Custom cards are treated the same as built-in cards and are configured the same way. [Check the docs.](https://developers.home-assistant.io/docs/en/lovelace_custom_card.html)
|
||||
- **Making the backend faster**. With Lovelace, the backend will no longer need to maintain entities like groups for the sole purpose of showing them on the frontend.
|
||||
|
||||
<div class='videoWrapper'>
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/6FX9_leiikw" frameborder="0" allowfullscreen></iframe>
|
||||
@ -28,7 +28,7 @@ The Lovelace UI is:
|
||||
|
||||
## {% linkable_title How it works %}
|
||||
|
||||
The old user interface relied solely on the state machine. This caused trouble as it meant that the state machine was now not only the source for device states, but also for user interface configuration. With Lovelace, we're taking a completely different approach. All user interface configuration will live in a seperate file, controlled by the user.
|
||||
The old user interface relied solely on the state machine. This caused trouble as it meant that the state machine was now not only the source for device states, but also for user interface configuration. With Lovelace, we're taking a completely different approach. All user interface configuration will live in a separate file, controlled by the user.
|
||||
|
||||
<p class='img'>
|
||||
<img
|
||||
@ -78,12 +78,12 @@ views:
|
||||
# Title of the view. Will be used as the tooltip for tab icon
|
||||
title: Second view
|
||||
cards:
|
||||
# Entities card will take list of entities and show their state.
|
||||
# Entities card will take a list of entities and show their state.
|
||||
- type: entities
|
||||
# Title of the entities card
|
||||
title: Example
|
||||
# The entities here will be shown in the same order as specified.
|
||||
# Each entriy is an entity ID or a map with extra options.
|
||||
# Each entry is an entity ID or a map with extra options.
|
||||
entities:
|
||||
- light.kitchen
|
||||
- switch.ac
|
||||
|
@ -11,17 +11,17 @@ footer: true
|
||||
|
||||
These are exactly as before, tab views with icons or text that help you manage large dashboards with many entities. The views have now deep links like `/lovelace/0`. You can also assign your own [custom ids](/lovelace/views/#custom-id).
|
||||
|
||||
- Using custom id in view, for [nicer navigation paths](/lovelace/views/#custom-id) in URLs
|
||||
- Using [icons](/lovelace/views/#icons) instead of text
|
||||
- Using a card to [fill a complete view](/lovelace/views/#panel-view), just like panels
|
||||
- Using [themes](/lovelace/views/#themes) in views
|
||||
- Using custom id in view, for [nicer navigation paths](/lovelace/views/#custom-id) in URLs.
|
||||
- Using [icons](/lovelace/views/#icons) instead of text.
|
||||
- Using a card to [fill a complete view](/lovelace/views/#panel-view), just like panels.
|
||||
- Using [themes](/lovelace/views/#themes) in views.
|
||||
|
||||
| Name | Type | Default | Description
|
||||
| ---- | ---- | ------- | -----------
|
||||
| title | string | Optional | Text title of the view
|
||||
| id | string | number | The id to use in URL path of this view
|
||||
| icon | string | Optional | The material design icon for the view, uses this instead of title
|
||||
| panel | boolean | false | Marks view as a panel reusing the first card in list
|
||||
| panel | boolean | false | Marks view as a panel reusing the first card in the list
|
||||
|
||||
<p class='img'>
|
||||
<img src='/images/lovelace/lovelace_views.gif' alt='Screenshot of views'>
|
||||
@ -30,7 +30,7 @@ Screenshot of views.
|
||||
|
||||
## {% linkable_title Icons %}
|
||||
|
||||
You can use icons instead of text for your view tabs. The title in the example will be used as tooltip.
|
||||
You can use icons instead of text for your view tabs. The title in the example will be used as a tooltip.
|
||||
|
||||
### {% linkable_title Example %}
|
||||
|
||||
@ -42,7 +42,7 @@ views:
|
||||
|
||||
## {% linkable_title Panel view %}
|
||||
|
||||
This type of view uses the first card in the `cards` array to expand it to ocuppy the complete view space, similar to panels. One very good practical use will be for floor plan type of cards.
|
||||
This type of view uses the first card in the `cards` array to expand it to occupy the complete view space, similar to panels. One very good practical use will be for floor plan type of cards.
|
||||
|
||||
### {% linkable_title Example %}
|
||||
|
||||
@ -66,7 +66,7 @@ views:
|
||||
|
||||
## {% linkable_title Themes %}
|
||||
|
||||
You can also set a [theme](/frontend/#themes) per view.
|
||||
You can also set a [theme](/frontend/#themes) per view.
|
||||
|
||||
> Theme is currently only partially usable (font color works)
|
||||
|
||||
@ -80,7 +80,7 @@ views:
|
||||
|
||||
## {% linkable_title Custom ID %}
|
||||
|
||||
You can now assign a custom id to a view, for nicer navigation paths in URLs. This id allows you to deep-link navigation to this view from cards that allow `navigation_path`.
|
||||
You can now assign a custom id to a view, for nicer navigation paths in URLs. This id allows you to deep-link navigation to this view from cards that allow `navigation_path`.
|
||||
|
||||
### {% linkable_title Example %}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user