Views and sections view: update to reflect current software (#33079)

This commit is contained in:
c0ffeeca7 2024-06-05 10:49:17 +02:00 committed by GitHub
parent ba83a7955a
commit ed33ba9a9f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 44 additions and 15 deletions

View File

@ -34,17 +34,36 @@ You can group cards without using horizontal or vertical stack cards.
## Creating a sections view
1. If you have multiple dashboards, in the left sidebar, select the dashboard to which you want to add the sections view.
2. [Add a new view](/dashboards/views/#adding-a-view-to-a-dashboard) and under **View type**, select **Sections**.
3. Select the number of columns you want to see in the new view. Select **Save**.
4. To add a card, select the **Add card** button.
2. Follow the steps on [adding a new view](/dashboards/views/#adding-a-view-to-a-dashboard).
- Under **View type**, select **Sections (experimental)**.
3. Select the maximum number of columns you want to see in the new sections view.
4. When you are done, select **Save**.
- You are now presented with a new, empty view.
- If you chose a background image, the page is filled with that image.
## Adding sections and cards to a sections view
Once you have created a sections view, you can populate it with sections and cards. The new section comes with one section to which you can directly add a card.
1. To add a card, select the **Add card** button.
- Follow the [steps on adding cards](/dashboards/cards/#adding-cards-to-your-dashboard).
![Add Section button](/images/dashboards/sections_view_add-card-or-section.png)
5. To add a section, select the **Create section** button.
6. To edit the section title, select the <img height="28px" src="/images/blog/2024-03-dashboard-chapter-1/mdi-edit.png" alt="Edit icon"/> button.
2. To add a new section, select the **Create section** button.
3. To edit the section title, select the <img height="28px" src="/images/blog/2024-03-dashboard-chapter-1/mdi-edit.png" alt="Edit icon"/> button.
- If you leave the section title empty, this line will be hidden.
7. To delete a section, select the <img height="28px" src="/images/blog/2024-03-dashboard-chapter-1/mdi-trash.png" alt="Delete icon"/> button.
4. If you want this section to be visible only to specific users or under a certain condition, you can define those conditions:
- On the **Visibility** tab, select **Add condition**.
- Select the type of condition, and enter the parameters.
- If you define multiple conditions, the section is only shown when all conditions are met.
- If you did not define any conditions, the section is always shown, to all users.
## Deleting a section
1. To delete a section, go to the dashboard and in the top right corner, select the pencil icon.
2. Open the view with the section you want to delete.
3. Select the <img height="28px" src="/images/blog/2024-03-dashboard-chapter-1/mdi-trash.png" alt="Delete icon"/> button.
## Rearranging sections and cards

View File

@ -14,6 +14,8 @@ related:
title: About dashboards
- docs: /dashboards/cards/#adding-cards-to-your-dashboard
title: Adding cards to a view
- docs: /common-tasks/os/#configuring-access-to-files
title: Configure access to files
---
A view is a tab inside a dashboard. For example, the screenshot below shows a separate view for lights on the Overview dashboard.
@ -41,25 +43,33 @@ It is currently not possible to migrate your dashboard from one view type into a
## Adding a view to a dashboard
1. To add a view to your user interface, in the top right corner, select the pencil icon.
1. To add a view to your dashboard, in the top right corner, select the pencil icon.
2. Select the `+` button in the top menu bar.
![Views toolbar](/images/dashboards/views.png)
3. Define the view settings:
- If you want a view title, enter the **Title**.
- If you want to see an icon, select the icon.
- Note: If an icon is defined, the title text only shows as a tooltip.
- If you want to see an icon, select the [view icon](#view-icon).
- If an icon is defined, only the icon is shown. The text only shows as a tooltip.
- We use [Material icons](https://pictogrammers.com/library/mdi/).
- Select the view type.
- If you want to link to another view, define the [URL](#url-of-a-view).
- If you want to use a previously defined theme, select the [theme](/integrations/frontend/#themes).
- Select the [view type](#view-type).
- If this view is meant to be used as a [subview](#subview) only, enable the **Subview** toggle.
![The create new view configuration dialog](/images/dashboards/dashboard_view_configuration_01.png)
4. On the **Badges** tab, add badges, if any.
- Note that the sidebar and panel views do not support badges.
5. If this view should not be visible for some users, on the **Visibility** tab, disable the view for those users.
4. To use a background image, on the **Background** tab, select an image.
- **Upload picture** lets you pick an image from the system used to show your Home Assistant UI.
- **Local path** lets you pick an image stored on Home Assistant. For example: `/homeassistant/images/lights_view_background_image.jpg`.
- To store an image on Home Assistant, you need to [configure access to files](/common-tasks/os/#configuring-access-to-files), for example via [Samba](/common-tasks/os/#installing-and-using-the-samba-add-on) or the [Studio Code Server](/common-tasks/os/#installing-and-using-the-visual-studio-code-vsc-add-on) add-on.
- **web URL** let you pick an image from the web. For example `https://www.home-assistant.io/images/frontpage/assist_wake_word.png`.
5. On the **Badges** tab, select the entities you want to be represented by a badge.
- Sidebar and panel views do not support badges.
6. By default, the new section is visible to all users. On the **Visibility** tab, you can disable the view for users.
## Path
## URL of a view
You can link to one view from a card in another view when using cards that support navigation (`navigation_path`). The string supplied here will be appended to the string `/lovelace/` to create the path to the view. Do not use special characters in paths. Do not begin a path with a number. This will cause the parser to read your path as a view index.
@ -129,7 +139,7 @@ user:
type: string
{% endconfiguration %}
## Type
## View type
You can change the layout of a view by using a different view type. The default is [`masonry`](/dashboards/masonry).

Binary file not shown.

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 56 KiB