Add card: add steps on customizing features, remove steps from tile card page (#37836)

This commit is contained in:
c0ffeeca7 2025-03-06 15:53:29 +01:00 committed by GitHub
parent 19ff28337d
commit b3e74466dd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 11 additions and 15 deletions

View File

@ -16,7 +16,7 @@ The tile card gives you a quick overview of your {% term entity %}. The card all
<p class='img'> <p class='img'>
<img src='/images/dashboards/tile_card_tap_action.webp' alt='Screenshot of tile cards'> <img src='/images/dashboards/tile_card_tap_action.webp' alt='Screenshot of tile cards'>
The circular background behind an icon indicates that there is a tap action. The circular background behind an icon indicates that there is a tap action.
The "Downstairs" and "Upstairs" climate entities have a badge and a feature that is bottom-aligned. The "Downstairs" and "Upstairs" climate entities have a badge and a feature that is bottom-aligned.
</p> </p>
@ -152,15 +152,4 @@ features:
You want to colorize the tile card? Choose one of the following colors: `primary`, `accent`, `disabled`, `red`, `pink`, `purple`, `deep-purple`, `indigo`, `blue`, `light-blue`, `cyan`, `teal`, `green`, `light-green`, `lime`, `yellow`, `amber`, `orange`, `deep-orange`, `brown`, `grey`, `blue-grey`, `black` and `white`. You want to colorize the tile card? Choose one of the following colors: `primary`, `accent`, `disabled`, `red`, `pink`, `purple`, `deep-purple`, `indigo`, `blue`, `light-blue`, `cyan`, `teal`, `green`, `light-green`, `lime`, `yellow`, `amber`, `orange`, `deep-orange`, `brown`, `grey`, `blue-grey`, `black` and `white`.
## Reordering features
Some features of the tile card, such as the presets or the HVAC modes of a
thermostat, can show many buttons. While you can limit the buttons youd
like to see, they may not be in the desired order.
For your thermostat, that means you can reorder the HVAC modes or presets.
<p class='img'>
<img src="/images/blog/2024-05/tile-card-reorder-features.gif" alt=" Screen recording showing how you can now reorder the HVAC modes on the thermostat shown in a tile card."/>
You can now reorder the features of the tile card.
</p>

View File

@ -10,4 +10,4 @@ To add the {{ title | downcase }} to your user interface:
- This means that it is no longer automatically updated when new dashboard elements become available. - This means that it is no longer automatically updated when new dashboard elements become available.
- Once you've taken control, you can't get this specific dashboard back to update automatically. However, you can create a new default dashboard. - Once you've taken control, you can't get this specific dashboard back to update automatically. However, you can create a new default dashboard.
- To continue, in the dialog, select the three dots {% icon "mdi:dots-vertical" %} menu, then select **Take control**. - To continue, in the dialog, select the three dots {% icon "mdi:dots-vertical" %} menu, then select **Take control**.
2. [Add a card](/dashboards/cards/#adding-cards-to-your-dashboard) to your dashboard. 2. [Add a card and customize actions and features](/dashboards/cards/#adding-cards-to-your-dashboard) to your dashboard.

View File

@ -55,9 +55,13 @@ A card can be added to a dashboard directly [from the view](#to-add-a-card-from-
3. If you want this card to be visible only to specific users or under a certain condition, you can [define those conditions](#showing-or-hiding-a-card-or-badge-conditionally). 3. If you want this card to be visible only to specific users or under a certain condition, you can [define those conditions](#showing-or-hiding-a-card-or-badge-conditionally).
4. If you are adding this card to a [sections view](/dashboards/sections/), on the **Layout** tab, you can [resize the card](#resizing-a-card). 4. If you are adding this card to a [sections view](/dashboards/sections/), on the **Layout** tab, you can [resize the card](#resizing-a-card).
5. If you like, define [card actions, features, header and footer widgets](#card-actions-features-header-and-footer-widgets). 5. Customize your card:
- [define card actions](/dashboards/actions/).
- [define header and footer](/dashboards/header-footer/)
- [customize features](/dashboards/features/#customizing-features).
- Not all cards support these elements. Refer to the documentation of the specific card type. - Not all cards support these elements. Refer to the documentation of the specific card type.
6. Select **Add to dashboard**. 6. Select **Add to dashboard**.
![Screenshot card suggestions](/images/dashboards/dashboard_add-by-entity_04.png) ![Screenshot card suggestions](/images/dashboards/dashboard_add-by-entity_04.png)
### To add a card from the device page ### To add a card from the device page
@ -81,7 +85,10 @@ This method is useful if you are on the **Device** page and want to create a car
6. If you want this card to be visible only to specific users or under a certain condition, you can [define those conditions](#showing-or-hiding-a-card-or-badge-conditionally). 6. If you want this card to be visible only to specific users or under a certain condition, you can [define those conditions](#showing-or-hiding-a-card-or-badge-conditionally).
7. If you are adding this card to a [sections view](/dashboards/sections/), on the **Layout** tab, you can [resize the card](#resizing-a-card). 7. If you are adding this card to a [sections view](/dashboards/sections/), on the **Layout** tab, you can [resize the card](#resizing-a-card).
8. If you like, define [card actions, features, header and footer widgets](#card-actions-features-header-and-footer-widgets). 8. Customize your card:
- [define card actions or header and footer widgets](#card-actions-features-header-and-footer-widgets).
- [define header and footer](/dashboards/header-footer/)
- [customize features](/dashboards/features/#customizing-features).
- Not all cards support these elements. Refer to the documentation of the specific card type. - Not all cards support these elements. Refer to the documentation of the specific card type.
## Showing or hiding a card or badge conditionally ## Showing or hiding a card or badge conditionally