mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-15 21:36:52 +00:00
Views and sections view: update to reflect current software (#33079)
This commit is contained in:
parent
ba83a7955a
commit
ed33ba9a9f
@ -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).
|
||||
|
||||

|
||||
|
||||
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
|
||||
|
||||
|
@ -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.
|
||||
|
||||

|
||||
|
||||
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.
|
||||
|
||||

|
||||
|
||||
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 |
Loading…
x
Reference in New Issue
Block a user