Views: update descriptions, add screenshots (#31661)

* Views: update descriptions, add screenshots

* Add related topics
This commit is contained in:
c0ffeeca7 2024-02-28 17:48:20 +01:00 committed by GitHub
parent fa76d897b8
commit a9e01cc6e5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 40 additions and 7 deletions

View File

@ -6,7 +6,13 @@ description: "The default panel layout uses a masonry algorithme."
---
The masonry view is the default view type.
It sorts cards in columns based on their `card size`. If you want to group some cards you have to use `stack` or `grid` cards.
<p class='img'>
<img src='/images/getting-started/lovelace.png' alt='Screenshot of the masonry view'>
Screenshot of the masonry view.
</p>
It sorts cards in columns based on their `card size`. If you want to group some cards you have to use [horizontal stack](/dashboards/horizontal-stack/), [vertical stack](/dashboards/vertical-stack/), or [grid](/dashboards/grid/) cards.
{% configuration %}
type:
@ -14,3 +20,8 @@ type:
description: "`masonry`"
type: string
{% endconfiguration %}
## Related topics
- [Panel view](/dashboards/panel/)
- [Sidebar view](/dashboards/sidebar/)

View File

@ -5,11 +5,16 @@ sidebar_label: Panel
description: "The panel view shows a single card in the full width of the screen."
---
The view must have exactly one card. This card is rendered full-width.
The panel view must have exactly one card. This card is rendered full-width.
<p class='img'>
<img src='/images/dashboards/panel_view.png' alt='Screenshot of the panel view'>
Screenshot of the panel view.
</p>
This view doesn't have support for badges.
This view is good when using cards like `map`, `stack` or `picture-elements`.
This view is good when using cards like [map](/dashboards/map/), [horizontal stack](/dashboards/horizontal-stack/), [vertical stack](/dashboards/vertical-stack/), [picture elements](/dashboards/picture-elements/), or [picture glance](/dashboards/picture-glance/).
{% configuration %}
type:
@ -17,3 +22,8 @@ type:
description: "`panel`"
type: string
{% endconfiguration %}
## Related topics
- [Masonry view](/dashboards/masonry/)
- [Sidebar view](/dashboards/sidebar/)

View File

@ -7,14 +7,21 @@ description: "The sidebar view has 2 columns, a wide one and a smaller one on th
The sidebar view has 2 columns, a wide one and a smaller one on the right.
<p class='img'>
<img src='/images/dashboards/sidebar_view.png' alt='Screenshot of the sidebar view'>
Screenshot of the sidebar view used for the energy dashboard.
</p>
This view doesn't have support for badges.
To change a view to edit mode, or to change the location of a card, enable edit mode:
Click the menu (three dots at the top right of the screen) and then **Edit Dashboard**.
You can set if a card should be placed in the main (left) column of the sidebar column (right), by selecting the arrow right or left arrow in the bar underneath the card.
You can set if a card should be placed in the main (left) column of the sidebar column (right), by pressing the arrow right or left arrow in the bar underneath the card.
<p class='img'>
<img src='/images/dashboards/sidebar_view_move_card.png' alt='Screenshot showing how to move a card between sidebar and main view'>
Screenshot showing how to move a card between sidebar and main view.
</p>
On mobile all cards are rendered in 1 column and kept in the order of the cards in the config.
On mobile, all cards are rendered in 1 column and kept in the order of the cards in the config.
## View config:
@ -47,3 +54,8 @@ cards:
view_layout:
position: sidebar
```
## Related topics
- [Panel view](/dashboards/panel/)
- [Masonry view](/dashboards/masonry/)

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 119 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 91 KiB