jeans/home-assistant.io
jeans/home-assistant.io
1
0
Fork 0
mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-07-27 19:26:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Cards: add visibility (#33093)

Browse Source
This commit is contained in:
c0ffeeca7 2024-06-05 15:35:29 +02:00 committed by Franck Nijhof
parent affcc0c72e
commit e8df5c48c7
No known key found for this signature in database
GPG Key ID: D62583BA8AB11CA3
1 changed files with 60 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
source/dashboards/cards.markdown
View File

@ -27,12 +27,66 @@ Screenshot of the masonry view with different types of cards.
There are several different card types, each with their own configuration options. They can be categorized in terms of their function:
- **Specific to a device type or service**: alarm, light, humidifier, thermostat, plant status, media control, weather forecast, shopping list, map, logbook, and calendar card
- **Grouping other cards**: vertical stack, horizontal stack, and grid card
- **Logic function**: conditional and entity filter card
- **Display generic data**: sensor, history graph, statistic, statistics graph, energy, gauge, and webpage card
- **Control devices and entities**: button and entity card
- **Display data and control entities**: area, picture elements, and picture glance card
- **Specific to a device type or service**: [alarm](/dashboards/alarm-panel/), [light](/dashboards/light/), [humidifier](/dashboards/humidifier/), [thermostat](/dashboards/thermostat/), [plant status](/dashboards/plant-status/), [media control](/dashboards/media-control/), [weather forecast](/dashboards/weather-forecast/), [todo list](/dashboards/todo-list/), [map](/dashboards/map/), [logbook](/dashboards/logbook/), [calendar](/dashboards/calendar/)
- **Grouping other cards**: [vertical stack](/dashboards/vertical-stack/), [horizontal stack](/dashboards/horizontal-stack/), [grid](/dashboards/grid/)
- **Logic function**: [conditional](/dashboards/conditional/), [entity filter](/dashboards/entity-filter/)
- **Display generic data**: [sensor](/dashboards/sensor/), [history graph](/dashboards/history-graph/), [statistic](/dashboards/statistic/), [statistics graph](/dashboards/statistics-graph/), [energy](/dashboards/energy/), [gauge](/dashboards/gauge/), [webpage](/dashboards/webpage/)
- **Control devices and entities**: [button](/dashboards/button/), [entity](/dashboards/entity/)
- **Display data and control entities**: [area](/dashboards/area/), [picture elements](/dashboards/picture-elements/), [picture glance](/dashboards/picture-glance/)
## Adding cards to your dashboard
A card can be added to a dashboard directly [from the view](#to-add-a-card-from-a-view) where you want to add it, or from the [device page](#to-add-a-card-from-the-device-page).
### To add a card from a view
1. In the bottom right of the view, select **Add card**.
2. There are two methods to add a card:
- If you have an idea of what card type you want to use for an entity, add **By card** type:
- Browse the list of available cards.
- If you are using the **Sections** view, try the **Tile** card in the **Suggested cards** section.
![Add card by Card type dialog](/images/blog/2024-03-dashboard-chapter-1/sections-add-card-by-card.png)
- If you want to add cards for multiple entities at once, select **By entity**.
- Select the entities from the list.
- Then, select **Continue**.
![Screenshot add cards by entity](/images/dashboards/dashboard_add-by-entity_02.png)
3. If you want this card 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.
- If you define multiple conditions, the section is only shown when all conditions are met.
- If you did not define any conditions, the section is always shown, to all users.
4. If you like, define [card actions, features, header and footer widgets](#card-actions-features-header-and-footer-widgets).
- Not all cards support these elements. Refer to the documentation of the specific card type.
5. Select **Add to dashboard**.
![Screenshot card suggestions](/images/dashboards/dashboard_add-by-entity_04.png)
### To add a card from the device page
This method is useful if you are on the **Device** page and want to create card directly from there.
1. Go to **{% my integrations title="Settings > Devices & services" %}**.
2. On the integration card of interest, select **Devices**.
- If there are multiple devices, select the device from the list.
3. If you want this card 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.
- If you define multiple conditions, the section is only shown when all conditions are met.
- If you did not define any conditions, the section is always shown, to all users.
4. If you like, define [card actions, features, header and footer widgets](#card-actions-features-header-and-footer-widgets).
- Not all cards support these elements. Refer to the documentation of the specific card type.
5. In the **Controls** section, select **Add to Dashboard**.
![Add to Dashboard button on the device page](/images/blog/2024-03-dashboard-chapter-1/sections-add-from-device-page.jpg)
## Show or hide a card conditionally
You can choose to show or hide certain cards based on different conditions. The [available conditions](/dashboards/conditional/#card-conditions) are the same as the ones for the conditional card.
To edit the card visibility conditions, open the card editor, select the **Visibility** tab and add your conditions.
## Card actions, features, header and footer widgets
@ -49,48 +103,3 @@ Some cards have support for [header and footer widgets](/dashboards/header-foote
<p class='img'><img src='/images/dashboards/header-footer/screenshot-picture-buttons.png' alt="Screenshot of an entities card with a picture header.">
Screenshot of an entities card with a picture header and buttons footer.
</p>
## Show or hide card conditionally
You can choose to show or hide certain cards based on different conditions. The [available conditions](/dashboards/conditional/#card-conditions) are the same as that for the conditional card.
To edit the card visibility conditions, open the card editor and then click on the visibility tab.
## Adding cards to your dashboard
1. If this is your first time editing a dashboard, [take control of the default dashboard](/dashboards/#get-started-with-your-own-dashboard).
2. Choose one of the two methods to add cards to a dashboard:
{% details "Using the Add card button" %}
1. In the bottom right, select **Add card**.
2. There are two methods to add a card: **By card** type and **By entity**:
- **By card** type:
- If you have an idea of what card type you want to use for an entity, browse the list of available cards.
- If you are using the **Sections** view, try the **Tile** card in the **Suggested cards** section.
![Add card by Card type dialog](/images/blog/2024-03-dashboard-chapter-1/sections-add-card-by-card.png)
- **By entity**:
- If you want to add multiple entities at once, select them from the list.
- Then, select **Continue**.
![Screenshot add cards by entity](/images/dashboards/dashboard_add-by-entity_02.png)
3. Select **Add to dashboard**.
![Screenshot card suggestions](/images/dashboards/dashboard_add-by-entity_04.png)
{% enddetails %}
{% details "Using the Add to dashboard button on device page" %}
Another way to add entities to a dashboard is to use the **Device** page.
1. Go to **{% my integrations title="Settings > Devices & services" %}**.
2. On the integration card of interest, select **Devices**.
- If there are multiple devices, select the device from the list.
3. In the **Controls** section, select **Add to Dashboard**.
![Add to Dashboard button on the device page](/images/blog/2024-03-dashboard-chapter-1/sections-add-from-device-page.jpg)
{% enddetails %}