mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-10 02:46:53 +00:00
Add view header (#37813)
* Add view header documentation * Update source/_dashboards/sections.markdown * Update source/_dashboards/sections.markdown * Tiny tweaks --------- Co-authored-by: c0ffeeca7 <38767475+c0ffeeca7@users.noreply.github.com>
This commit is contained in:
parent
18315d94dd
commit
a9214e66d2
@ -40,9 +40,24 @@ You can group cards without using horizontal or vertical stack cards.
|
||||
- You are now presented with a new, empty view.
|
||||
- If you chose a background image, the page is filled with that image.
|
||||
|
||||
Once you have created a sections view, you can populate it sections and cards. You can also add a header with a title and badges.
|
||||
|
||||
## Editing the header
|
||||
|
||||
<p class='img'>
|
||||
<img src="/images/dashboards/sections_view_header_edit.png" alt="Editing the header"/>
|
||||
Editing the header
|
||||
</p>
|
||||
|
||||
1. To add a title, select the **Add title** button. The title supports [Markdown](https://commonmark.org/help/) and [templating](/docs/configuration/templating/).
|
||||
2. To add badges, elect the **Add badge** button. Follow [steps on adding badges](/dashboards/badges) to see the different possible options.
|
||||
3. To change the title and badges disposition, select the edit {% icon "mdi:edit" %} button to access header settings.
|
||||
|
||||

|
||||
|
||||
## 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.
|
||||
The view 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).
|
||||
@ -109,3 +124,22 @@ type:
|
||||
description: "`sections`"
|
||||
type: string
|
||||
{% endconfiguration %}
|
||||
|
||||
## Header YAML configuration
|
||||
|
||||
{% configuration %}
|
||||
layout:
|
||||
required: false
|
||||
description: Layout of the different elements. Can be `start`, `center`, or `responsive`. `responsive` is the same as `start` on mobile devices. It places badges and title side by side on desktop.
|
||||
type: string
|
||||
default: center
|
||||
badges_position:
|
||||
required: false
|
||||
description: Badges position. Can be `bottom` or `top`.
|
||||
type: string
|
||||
default: bottom
|
||||
card:
|
||||
required: true
|
||||
description: Card to be used as title. If you are configuring the view using the visual editor, the configuration of the [Markdown card](/dashboards/markdown) is used.
|
||||
type: map
|
||||
{% endconfiguration %}
|
||||
|
BIN
source/images/dashboards/sections_view_header_edit.png
Normal file
BIN
source/images/dashboards/sections_view_header_edit.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 8.8 KiB |
BIN
source/images/dashboards/sections_view_header_editor.png
Normal file
BIN
source/images/dashboards/sections_view_header_editor.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 39 KiB |
Loading…
x
Reference in New Issue
Block a user