mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-22 00:36:49 +00:00
Fix titles, typos and style
This commit is contained in:
Fabian Affolter
parent
009a62a490
commit
d07bf0e11b
@ -12,7 +12,7 @@ footer: true
|
||||
|
||||
Entities will be the most common type of card that will also be the most familiar to people using the standard interface. It groups items together very close to how groups used to do.
|
||||
|
||||
{% linkable_title Options %}
|
||||
## {% linkable_title Options %}
|
||||
|
||||
{% configuration %}
|
||||
type:
|
||||
@ -47,7 +47,7 @@ name:
|
||||
type: string
|
||||
{% endconfiguration %}
|
||||
|
||||
{% linkable_title Example %}
|
||||
## {% linkable_title Example %}
|
||||
|
||||
```yaml
|
||||
- type: entities
|
||||
|
||||
@ -19,7 +19,7 @@ This type of card can also be used together with rest of cards that allow multip
|
||||
Screenshot of the entity filter card.
|
||||
</p>
|
||||
|
||||
{% linkable_title Options %}
|
||||
## {% linkable_title Options %}
|
||||
|
||||
{% configuration %}
|
||||
type:
|
||||
@ -46,7 +46,7 @@ show_empty:
|
||||
default: true
|
||||
{% endconfiguration %}
|
||||
|
||||
{% linkable_title Examples %}
|
||||
## {% linkable_title Examples %}
|
||||
|
||||
Show only active switches or lights in the house
|
||||
```yaml
|
||||
|
||||
@ -17,7 +17,7 @@ Glance cards are a very compact. Very useful to group together multiple sensors
|
||||
Screenshot of the glance card.
|
||||
</p>
|
||||
|
||||
{% linkable_title Options %}
|
||||
## {% linkable_title Options %}
|
||||
|
||||
{% configuration %}
|
||||
type:
|
||||
@ -48,7 +48,7 @@ name:
|
||||
type: string
|
||||
{% endconfiguration %}
|
||||
|
||||
{% linkable_title Examples %}
|
||||
## {% linkable_title Examples %}
|
||||
|
||||
Basic example
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@ History graph is a basic card, allowing you to display a graph for each of the e
|
||||
Screenshot of the history graph card.
|
||||
</p>
|
||||
|
||||
{% linkable_title Options %}
|
||||
## {% linkable_title Options %}
|
||||
|
||||
{% configuration %}
|
||||
type:
|
||||
@ -45,7 +45,7 @@ title:
|
||||
default: none
|
||||
{% endconfiguration %}
|
||||
|
||||
{% linkable_title Example %}
|
||||
## {% linkable_title Example %}
|
||||
|
||||
```yaml
|
||||
- type: history-graph
|
||||
|
||||
@ -12,7 +12,7 @@ footer: true
|
||||
|
||||
Horizontal stack card will allow you to stack together multiple cards so they always sit next to each other in the space of one column.
|
||||
|
||||
{% linkable_title Options %}
|
||||
## {% linkable_title Options %}
|
||||
|
||||
{% configuration %}
|
||||
type:
|
||||
@ -25,9 +25,7 @@ cards:
|
||||
type: list
|
||||
{% endconfiguration %}
|
||||
|
||||
{% linkable_title Example %}
|
||||
|
||||
Basic example
|
||||
## {% linkable_title Example %}
|
||||
|
||||
```yaml
|
||||
- type: horizontal-stack
|
||||
|
||||
@ -10,16 +10,16 @@ sharing: true
|
||||
footer: true
|
||||
---
|
||||
|
||||
Iframe cards are useful to embed outside websites in your dashboard with little effort. One such example is a grafana view. You can also embed files stored in your `config/www` folder and reference them using `/local/<file>`.
|
||||
Iframe cards are useful to embed outside websites in your dashboard with little effort. One such example is a Grafana view. You can also embed files stored in your `config/www` folder and reference them using `/local/<file>`.
|
||||
|
||||
<p class='img'>
|
||||
<img width="500" src='/images/lovelace/lovelace_iframe.png' alt='Screenshot of the iframe card'>
|
||||
Screenshot of the iframe card.
|
||||
</p>
|
||||
|
||||
> Make sure the URL you're embedding has the right protocol and allows to be embedded in an iframe on a different domain. For example if your Home Assistant setup uses https you won't be able to embed http URLs
|
||||
Make sure the URL you're embedding has the right protocol and allows to be embedded in an iframe on a different domain. For example if your Home Assistant setup uses HTTPS you won't be able to embed HTTP URLs.
|
||||
|
||||
{% linkable_title Options %}
|
||||
## {% linkable_title Options %}
|
||||
|
||||
{% configuration %}
|
||||
type:
|
||||
@ -42,7 +42,7 @@ title:
|
||||
default: none
|
||||
{% endconfiguration %}
|
||||
|
||||
{% linkable_title Examples %}
|
||||
## {% linkable_title Examples %}
|
||||
|
||||
```yaml
|
||||
- type: iframe
|
||||
@ -51,6 +51,7 @@ title:
|
||||
```
|
||||
|
||||
Local html for custom content. Place `example.html` in your `config/www` folder and reference it as below:
|
||||
|
||||
```yaml
|
||||
- type: iframe
|
||||
url: /local/example.html
|
||||
|
||||
@ -17,7 +17,7 @@ A card that allows you to display entities on a map
|
||||
Screenshot of the map card.
|
||||
</p>
|
||||
|
||||
### {% linkable_title Options %}
|
||||
## {% linkable_title Options %}
|
||||
|
||||
{% configuration %}
|
||||
type:
|
||||
@ -53,9 +53,7 @@ entity:
|
||||
</p>
|
||||
|
||||
|
||||
### {% linkable_title Examples %}
|
||||
|
||||
Basic map example:
|
||||
## {% linkable_title Examples %}
|
||||
|
||||
```yaml
|
||||
- type: map
|
||||
|
||||
@ -17,7 +17,7 @@ Markdown card is used to render [markdown](http://commonmark.org/help/)
|
||||
Screenshot of the markdown card.
|
||||
</p>
|
||||
|
||||
{% linkable_title Options %}
|
||||
## {% linkable_title Options %}
|
||||
|
||||
{% configuration %}
|
||||
type:
|
||||
@ -35,7 +35,7 @@ title:
|
||||
default: none
|
||||
{% endconfiguration %}
|
||||
|
||||
{% linkable_title Example %}
|
||||
## {% linkable_title Example %}
|
||||
|
||||
```yaml
|
||||
- type: markdown
|
||||
|
||||
@ -17,7 +17,7 @@ The media control card is used to display [Media Player](/components/#search/med
|
||||
Screenshot of the media player control card.
|
||||
</p>
|
||||
|
||||
{% linkable_title Options %}
|
||||
## {% linkable_title Options %}
|
||||
|
||||
{% configuration %}
|
||||
type:
|
||||
@ -30,7 +30,7 @@ entity:
|
||||
type: string
|
||||
{% endconfiguration %}
|
||||
|
||||
{% linkable_title Example %}
|
||||
## {% linkable_title Example %}
|
||||
|
||||
```yaml
|
||||
- type: media-control
|
||||
|
||||
@ -21,7 +21,7 @@ You can customize tap action and even icon color.
|
||||
Screenshot of the picture elements card.
|
||||
</p>
|
||||
|
||||
{% linkable_title Options %}
|
||||
## {% linkable_title Options %}
|
||||
|
||||
{% configuration %}
|
||||
type:
|
||||
@ -168,7 +168,7 @@ top:
|
||||
default: none
|
||||
{% endconfiguration %}
|
||||
|
||||
{% linkable_title Example %}
|
||||
## {% linkable_title Example %}
|
||||
|
||||
```yaml
|
||||
- type: picture-elements
|
||||
|
||||
@ -10,22 +10,20 @@ sharing: true
|
||||
footer: true
|
||||
---
|
||||
|
||||
### Picture glance
|
||||
|
||||
A very useful type of card that can display sensors, switches, lights and other entities grouped on top of a custom image. Use this card for easy visual recognition inside a large dashboard. You also can add `navigation_path` to take the user to a specific view and use these cards in an overview dashboard.
|
||||
|
||||
What really sets this card apart is the ability to **control** entities directly from the card without the need to open the details of that entity.
|
||||
|
||||
You can also use `camera` domain entities to use that as image. You can also use `state_image` just like in [picture-entity](/lovelace/picture-entity/) together with an `entity` entry to change the image in a dynamic way.
|
||||
|
||||
> Picture glance supports a display of maximum 10 items.
|
||||
Picture glance supports a display of maximum 10 items.
|
||||
|
||||
<p class='img'>
|
||||
<img src='/images/lovelace/lovelace_picture_glance.gif' alt='Screenshot of the picture glance card'>
|
||||
Screenshot of the picture glance card.
|
||||
</p>
|
||||
|
||||
**Options**
|
||||
## {% linkable_title Options %}
|
||||
|
||||
| Name | Type | Default | Description
|
||||
| ---- | ---- | ------- | -----------
|
||||
@ -48,7 +46,7 @@ Screenshot of the picture glance card.
|
||||
| not_home | string | Optional | URL of an image used for not_home state.
|
||||
| ... | string | Optional | Any state that is supported by the entity works
|
||||
|
||||
**Examples**
|
||||
## {% linkable_title Examples %}
|
||||
|
||||
```yaml
|
||||
- type: picture-glance
|
||||
@ -62,7 +60,8 @@ Screenshot of the picture glance card.
|
||||
- binary_sensor.basement_floor_wet
|
||||
```
|
||||
|
||||
Picture glance used together with 'camera_image'
|
||||
Picture glance used together with 'camera_image'.
|
||||
|
||||
```yaml
|
||||
- type: picture-glance
|
||||
image:
|
||||
@ -76,7 +75,8 @@ Picture glance used together with 'camera_image'
|
||||
- binary_sensor.basement_floor_wet
|
||||
```
|
||||
|
||||
Picture glance used together with 'entity-filter'
|
||||
Picture glance used together with 'entity-filter'.
|
||||
|
||||
```yaml
|
||||
- type: entity-filter
|
||||
entities:
|
||||
|
||||
@ -17,7 +17,7 @@ A very simple card that allows you to set an image to use for navigation to vari
|
||||
Screenshot of the picture card.
|
||||
</p>
|
||||
|
||||
{% linkable_title Options %}
|
||||
## {% linkable_title Options %}
|
||||
|
||||
{% configuration %}
|
||||
type:
|
||||
@ -55,7 +55,7 @@ entity_id:
|
||||
{% endconfiguration %}
|
||||
|
||||
|
||||
{% linkable_title Examples %}
|
||||
## {% linkable_title Examples %}
|
||||
|
||||
Basic navigation example:
|
||||
|
||||
@ -65,7 +65,7 @@ Basic navigation example:
|
||||
navigation_path: /lovelace/arsaboo
|
||||
```
|
||||
|
||||
> Check the [views](/lovelace/views/) setup on how to setup custom ids
|
||||
Check the [views](/lovelace/views/) setup on how to setup custom IDs.
|
||||
|
||||
Basic navigation example:
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@ A card for all the lovely botanists out there.
|
||||
Screenshot of the plant status card.
|
||||
</p>
|
||||
|
||||
{% linkable_title Options %}
|
||||
## {% linkable_title Options %}
|
||||
|
||||
{% configuration %}
|
||||
type:
|
||||
@ -30,7 +30,7 @@ entity:
|
||||
type: string
|
||||
{% endconfiguration %}
|
||||
|
||||
{% linkable_title Example %}
|
||||
## {% linkable_title Example %}
|
||||
|
||||
```yaml
|
||||
- type: plant-status
|
||||
|
||||
@ -10,9 +10,9 @@ sharing: true
|
||||
footer: true
|
||||
---
|
||||
|
||||
Stack card will allow you to stack together multiple cards so they always sit together in the same column one on top of the other. Keep in mind this can be used with any cards, and even used alongside a [horizontal-stack](/lovelace/horizontal-stack/).
|
||||
Stack card will allow you to stack together multiple cards so they always sit together in the same column one on top of the other. Keep in mind this can be used with any cards and even used alongside a [horizontal-stack](/lovelace/horizontal-stack/).
|
||||
|
||||
{% linkable_title Options %}
|
||||
## {% linkable_title Options %}
|
||||
|
||||
{% configuration %}
|
||||
type:
|
||||
@ -25,9 +25,10 @@ cards:
|
||||
type: list
|
||||
{% endconfiguration %}
|
||||
|
||||
{% linkable_title Example %}
|
||||
## {% linkable_title Example %}
|
||||
|
||||
Basic example
|
||||
|
||||
```yaml
|
||||
- type: vertical-stack
|
||||
cards:
|
||||
@ -44,7 +45,7 @@ Basic example
|
||||
Screenshot of the vertical stack card.
|
||||
</p>
|
||||
|
||||
Example using both a Vertical and Horizontal Stack Card
|
||||
Example using both a vertical and horizontal stack card.
|
||||
|
||||
```yaml
|
||||
- type: vertical-stack
|
||||
|
||||
@ -9,7 +9,7 @@ sharing: true
|
||||
footer: true
|
||||
---
|
||||
|
||||
## Changes in 0.73.1
|
||||
## {% linkable_title Changes in 0.73.1 %}
|
||||
- Setting Lovelace as default now updates `Overview` button to point to `/lovelace`
|
||||
- Allow setting background styles (global and per view)
|
||||
|
||||
@ -17,15 +17,15 @@ footer: true
|
||||
- 📣 New card: `map` that allows showing `device_tracker` entities on a map card
|
||||
- 📣 `entities` card now support `type: custom:state-card-custom` for the entities list
|
||||
|
||||
## Changes in 0.73.0
|
||||
## {% linkable_title Changes in 0.73.0 %}
|
||||
|
||||
### Views
|
||||
- 📣 New button to show unused entities in Lovelace
|
||||
|
||||
## Changes in 0.73.0b5
|
||||
## Changes in 0.73.0b5 %}
|
||||
- 🏁 Only minor fixes in this release
|
||||
|
||||
## Changes in 0.73.0b4
|
||||
## {% linkable_title Changes in 0.73.0b4 %}
|
||||
|
||||
### Cards
|
||||
- 📣 `picture-entity` allow hiding of infobar using `show_info: false`
|
||||
@ -35,7 +35,7 @@ footer: true
|
||||
- `picture-elements` renamed `path` to `navigation_path`
|
||||
- ‼️ `camera-preview` card removed, features added to `picture-entity` and `picture-glance`
|
||||
|
||||
## Changes in 0.73.0b3
|
||||
## {% linkable_title Changes in 0.73.0b3 %}
|
||||
|
||||
### Views
|
||||
- 📣 Added panel mode for a view to use 1st card to fill whole screen
|
||||
@ -53,10 +53,10 @@ footer: true
|
||||
- 🔧 Fix wrapping and padding for `service-button` in `picture-elements`
|
||||
- ‼️ `entity-filter` no longer allows to show all entities or a full domain
|
||||
|
||||
## Changes in 0.73.0b2
|
||||
## {% linkable_title Changes in 0.73.0b2 %}
|
||||
- :zap: Went by too fast :zap:
|
||||
|
||||
## Changes in 0.73.0b1
|
||||
## {% linkable_title Changes in 0.73.0b1 %}
|
||||
|
||||
### Cards
|
||||
- `column` renamed to `vertical-stack`
|
||||
@ -70,7 +70,7 @@ footer: true
|
||||
- 📣 `entity-filter` allow auto-hide if empty using `show_empty: false`
|
||||
- 🔧 Fix card size calculation `horizontal-stack`/`vertical-stack`
|
||||
|
||||
## Changes in 0.73.0b0
|
||||
## {% linkable_title Changes in 0.73.0b0 %}
|
||||
- 📣 New feature to allow Lovelace to be default for `/`
|
||||
|
||||
### Views
|
||||
@ -89,12 +89,12 @@ footer: true
|
||||
- 🔧 Fix use of groups in `picture-entity`
|
||||
- 🔧 Fix title in `glance` to avoid overlapping
|
||||
|
||||
## Changes in 0.72.1
|
||||
## {% linkable_title Changes in 0.72.1 %}
|
||||
|
||||
### Cards
|
||||
- 🐞 Bug introduced in `glance` card - titles now overlap
|
||||
- 📣 New card: `iframe`
|
||||
|
||||
## Changes in 0.72
|
||||
## {% linkable_title Changes in 0.72 %}
|
||||
- Initial release of the Lovelace UI
|
||||
|
||||
|
||||
@ -26,7 +26,7 @@ The Lovelace UI is:
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/6FX9_leiikw" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
## How it works
|
||||
## {% 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.
|
||||
|
||||
@ -39,7 +39,7 @@ Visual comparison of old configuration versus new configuration
|
||||
|
||||
<!-- source: https://docs.google.com/drawings/d/1O1o7-wRlnsU1lLgfdtn3s46P5StJjSL5to5RU9SV8zs/edit?usp=sharing -->
|
||||
|
||||
## Trying it out
|
||||
## {% linkable_title Trying it out %}
|
||||
|
||||
Create a new file `<config>/ui-lovelace.yaml` and add the following content. Adjust the entity names to entities that exist in your Home Assistant installation.
|
||||
|
||||
@ -100,10 +100,10 @@ views:
|
||||
|
||||
Now restart Home Assistant, navigate to `<YOUR HASS URL>/lovelace`. When you make changes to `ui-lovelace.yaml`, you don't have to restart Home Assistant or refresh the page. Just hit the refresh button at the top of the UI.
|
||||
|
||||
## Custom Cards
|
||||
## {% linkable_title Custom Cards %}
|
||||
|
||||
It is possible to add your own custom cards to show up in the Lovelace UI. For more information, check [the developer docs](https://developers.home-assistant.io/docs/en/lovelace_custom_card.html).
|
||||
|
||||
## Current limitations
|
||||
## {% linkable_title Current limitations %}
|
||||
|
||||
This is the very very early version aimed at gathering feedback. Discussion and suggestions are welcome in the [ui-schema repository](https://github.com/home-assistant/ui-schema) and in the [chat](/join-chat/) in #lovelace.
|
||||
|
||||
@ -28,11 +28,11 @@ These are exactly as before, tab views with icons or text that help you manage l
|
||||
Screenshot of views.
|
||||
</p>
|
||||
|
||||
{% linkable_title Icons %}
|
||||
## {% linkable_title Icons %}
|
||||
|
||||
You can use icons instead of text for your view tabs. The title in the example will be used as tooltip.
|
||||
|
||||
**Example**
|
||||
### {% linkable_title Example %}
|
||||
|
||||
```yaml
|
||||
views:
|
||||
@ -40,11 +40,11 @@ views:
|
||||
title: Debugging
|
||||
```
|
||||
|
||||
{% linkable_title Panel view %}
|
||||
## {% 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.
|
||||
|
||||
**Example**
|
||||
### {% linkable_title Example %}
|
||||
|
||||
```yaml
|
||||
views:
|
||||
@ -64,7 +64,7 @@ views:
|
||||
left: 42%
|
||||
```
|
||||
|
||||
{% linkable_title Themes %}
|
||||
## {% linkable_title Themes %}
|
||||
|
||||
You can also set a [theme](/frontend/#themes) per view.
|
||||
|
||||
@ -77,11 +77,12 @@ views:
|
||||
title: Home
|
||||
theme: dark-mode
|
||||
```
|
||||
{% linkable_title Custom id %}
|
||||
|
||||
## {% 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`.
|
||||
|
||||
**Example**
|
||||
### {% linkable_title Example %}
|
||||
|
||||
View:
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user