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:
Paul Bottein 2025-03-05 15:06:07 +01:00 committed by Franck Nijhof
parent 18315d94dd
commit a9214e66d2
No known key found for this signature in database
GPG Key ID: D62583BA8AB11CA3
3 changed files with 35 additions and 1 deletions

View File

@ -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.
![Edit view heading section button](/images/dashboards/sections_view_header_editor.png)
## 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 %}

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB