mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-21 08:16:53 +00:00
Add card: add steps on customizing features, remove steps from tile card page (#37836)
This commit is contained in:
parent
19ff28337d
commit
b3e74466dd
@ -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 you’d
|
|
||||||
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>
|
|
||||||
|
@ -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.
|
||||||
|
@ -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**.
|
||||||
|
|
||||||

|

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