From bae2feb9ad17ea17f00cfb9f757ddbf2757c8f76 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Mon, 30 Sep 2024 15:57:28 +0200 Subject: [PATCH] Add heading card (#34978) * Add heading card * Add colors * arrow => chevron * Update heading badges * Update source/_dashboards/sections.markdown Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Apply suggestions from code review * Update source/_dashboards/heading.markdown --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: c0ffeeca7 <38767475+c0ffeeca7@users.noreply.github.com> --- source/_dashboards/heading.markdown | 111 ++++++++++++++++++++++ source/_dashboards/sections.markdown | 6 +- source/images/dashboards/heading_card.png | Bin 0 -> 5862 bytes 3 files changed, 115 insertions(+), 2 deletions(-) create mode 100644 source/_dashboards/heading.markdown create mode 100644 source/images/dashboards/heading_card.png diff --git a/source/_dashboards/heading.markdown b/source/_dashboards/heading.markdown new file mode 100644 index 000000000000..91c04deecdce --- /dev/null +++ b/source/_dashboards/heading.markdown @@ -0,0 +1,111 @@ +--- +type: card +title: "Heading card" +sidebar_label: Heading +description: "The Heading card structures your dashboard by providing title, icon, navigation and badges." +related: + - docs: /dashboards/actions/ + title: Card actions + - docs: /dashboards/cards/ + title: Dashboard cards +--- + +The Heading card structures your dashboard by providing title, icon and navigation. This card supports [actions](/dashboards/actions/). + +

+ Screenshot of heading cards + Screenshot of a heading card with a title, badges, and a subtitle. +

+ +```yaml +type: heading +heading: Living room +icon: mdi:sofa +badges: + - type: entity + entity_id: sensor.living_room_sensor_temperature + color: red + - type: entity + entity_id: sensor.living_room_sensor_humidity + color: deep-purple +``` + +{% configuration entity %} +type: + required: true + description: "`heading`" + type: string +heading: + required: false + description: Heading text + type: string +heading_style: + required: false + description: Style of the heading. Can be either `title` or `subtitle`. + type: string + default: title +icon: + required: false + description: Icon displayed before the heading text. + type: string +tap_action: + required: false + description: Action taken on card tap. See [action documentation](/dashboards/actions/#tap-action). By default, it will do nothing. If an action is configured, a chevron will appear next to the heading text. + type: map +badges: + required: false + description: Additional small badges to display entity information. See [heading badges](/dashboards/heading/#heading-badges). + type: list +{% endconfiguration %} + +## Heading badges + +In addition to the heading text, each heading card can show small badges. They are smaller than regular [badges](/dashboards/badges/) and don't have a background. The heading badges can display sensor information in a compact and minimal style. + +```yaml +type: entity +entity: light.living_room +``` + +{% configuration entity %} +type: + required: true + description: "`entity`" + type: string +entity: + required: true + description: Entity ID. + type: string +name: + required: false + description: Overwrites the entity name. The name will be only displayed if `state_content` includes `name` token. + type: string +icon: + required: false + description: Overwrites the entity icon. + type: string +color: + required: false + description: Set the color when the entity is active. By default, it will not be colored. It can be set to the `state` special token to dynamically color the icon based on `state`, `domain`, and `device_class` of your entity. It also accepts [color token](/dashboards/tile/#available-colors) or hex color code. + type: string + default: none +show_icon: + required: false + description: Show the icon + type: boolean + default: "true" +show_state: + required: false + description: Show the state. + type: boolean + default: "false" +state_content: + required: false + description: > + Content to display for the state. Can be `state`, `name`, `last_changed`, `last_updated`, or any attribute of the entity. Can be either a string with a single item, or a list of string items. Default depends on the entity domain. + type: [string, list] +tap_action: + required: false + description: Action taken on card tap. See [action documentation](/dashboards/actions/#tap-action). By default, it will do nothing. + type: map +{% endconfiguration %} diff --git a/source/_dashboards/sections.markdown b/source/_dashboards/sections.markdown index a96f998d8495..ef3146faebb5 100644 --- a/source/_dashboards/sections.markdown +++ b/source/_dashboards/sections.markdown @@ -52,8 +52,10 @@ Once you have created a sections view, you can populate it with sections and car ![Add Section button](/images/dashboards/sections_view_add-card-or-section.png) 2. To add a new section, select the **Create section** button. -3. To edit the section title, select the edit {% icon "mdi:edit" %} button. - - If you leave the section title empty, this line will be hidden. +3. A [heading card](/dashboards/heading) will be automatically added to the top of the section. + - To edit it, select the card. + - If you don't want a heading title at the top of the section, delete this card. + - The title can be added again later, like any other card. 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. diff --git a/source/images/dashboards/heading_card.png b/source/images/dashboards/heading_card.png new file mode 100644 index 0000000000000000000000000000000000000000..196195223a090abf107843621cc439962771cc31 GIT binary patch literal 5862 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