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-19 15:26:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Lovelace alignments for all cards (#16281)

Browse Source
This commit is contained in:
Philip Allgaier 2021-01-23 14:09:27 +01:00 committed by GitHub
parent 8f2b8f0b43
commit e9166f6c97
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
31 changed files with 210 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
source/_lovelace/alarm-panel.markdown
View File

@ -1,17 +1,17 @@
---
title: "Alarm Panel Card"
sidebar_label: Alarm Panel
description: "The Alarm Panel card allows you to Arm and Disarm your alarm control panel integrations."
description: "The Alarm Panel card allows you to arm and disarm your alarm control panel integrations."
---
The Alarm Panel card allows you to Arm and Disarm your [alarm control panel](/integrations/#alarm) integrations.
The Alarm Panel card allows you to arm and disarm your [alarm control panel](/integrations/#alarm) integrations.
<p class='img'>
<img src='/images/lovelace/lovelace_alarm_panel_card.gif' alt='Screenshot of the alarm panel card'>
Screenshot of the Alarm Panel card.
</p>
To add the Alarm Panel card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Alarm Panel** from the card picker. All options for this card can be configured via the user interface.
To add the Alarm Panel card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Alarm Panel** from the card picker. All options for this card can be configured via the user interface.
Alternatively, the card can be configured using YAML:
@ -23,22 +23,22 @@ entity: alarm_control_panel.alarm
{% configuration %}
type:
required: true
description: alarm-panel
description: "`alarm-panel`"
type: string
entity:
required: true
description: "Entity ID of `alarm_control_panel` domain"
description: Entity ID of `alarm_control_panel` domain.
type: string
name:
required: false
description: Overwrites Friendly Name
description: Overwrites friendly name.
type: string
default: Current State of Alarm Entity
default: Current state of the alarm entity.
states:
required: false
description: Controls which states to have available
description: Controls which states to have available.
type: list
default: arm_home, arm_away
default: "`arm_home, arm_away`"
keys:
arm_home:
description: Arm Home
@ -50,13 +50,13 @@ states:
description: Arm Custom Bypass
theme:
required: false
description: "Set to any theme within `themes.yaml`"
description: Override the used theme for this card with any loaded theme. For more information about themes, see the [frontend documentation](/integrations/frontend/).
type: string
{% endconfiguration %}
## Examples
Title Example:
Title example:
```yaml
- type: alarm-panel
@ -69,7 +69,7 @@ Title Example:
Screenshot of the Alarm Panel card.
</p>
Define the State List:
Define the state list:
```yaml
type: alarm-panel

10
source/_lovelace/button.markdown
View File

@ -11,7 +11,7 @@ The Button card allows you to add buttons to perform tasks.
Screenshot of three Button Cards.
</p>
To add the Button card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Button** from the card picker. All options for this card can be configured via the user interface.
To add the Button card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Button** from the card picker. All options for this card can be configured via the user interface.
## Card Settings
@ -29,7 +29,7 @@ Show Icon:
Icon Height:
description: The height of the icon, in pixels.
Theme:
description: The card theme, which may be set to any installed theme. For more information about themes, see the [frontend documentation](https://www.home-assistant.io/integrations/frontend/).
description: Name of any loaded theme to be used for this card. For more information about themes, see the [frontend documentation](/integrations/frontend/).
Tap Action:
description: The action taken on card tap. For more information, see the [action documentation](/lovelace/actions/#tap-action).
Hold Action:
@ -43,7 +43,7 @@ This is for if you use YAML mode or prefer to use YAML in the Code Editor in the
{% configuration %}
type:
required: true
description: button
description: "`button`"
type: string
entity:
required: false
@ -58,7 +58,7 @@ icon:
required: false
description: The icon that is displayed on the card. It defaults to the entity domain icon only if the card interacts with an entity. Otherwise, if not configured, no icon is displayed.
type: string
default: Entity Domain Icon
default: Entity domain icon
show_name:
required: false
description: If false, the button name is not shown on the card.
@ -98,7 +98,7 @@ double_tap_action:
type: map
theme:
required: false
description: The card theme, which may be set to any theme from the `themes.yaml` file. For more information about themes, see the [frontend documentation](https://www.home-assistant.io/integrations/frontend/).
description: Override the used theme for this card with any loaded theme. For more information about themes, see the [frontend documentation](/integrations/frontend/).
type: string
{% endconfiguration %}

10
source/_lovelace/calendar.markdown
View File

@ -11,9 +11,9 @@ The Calendar card displays your [calendar](/integrations/#calendar) entities in
Screenshot of the Calendar card.
</p>
To add the Calendar card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Calendar** from the card picker. All options for this card can be configured via the user interface.
To add the Calendar card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Calendar** from the card picker. All options for this card can be configured via the user interface.
### Card Settings
## Card Settings
{% configuration_basic %}
Title:
@ -23,7 +23,7 @@ Initial View:
Entities:
description: The calendar entities that will be displayed in the card.
Theme:
description: Theme your card using any installed theme in your HA environment.
description: Name of any loaded theme to be used for this card. For more information about themes, see the [frontend documentation](/integrations/frontend/).
{% endconfiguration_basic %}
### YAML
@ -33,7 +33,7 @@ This is for if you use YAML mode or just prefer to use YAML in the Code Editor i
{% configuration %}
type:
required: true
description: calendar
description: "`calendar`"
type: string
title:
required: false
@ -49,7 +49,7 @@ entities:
type: list
theme:
required: false
description: "Set to any theme within `themes.yaml`"
description: Override the used theme for this card with any loaded theme. For more information about themes, see the [frontend documentation](/integrations/frontend/).
type: string
{% endconfiguration %}

4
source/_lovelace/conditional.markdown
View File

@ -6,7 +6,7 @@ description: The Conditional card displays another card based on entity states.
The Conditional card displays another card based on entity states.
To add the Conditional card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Conditional** from the card picker. All options for this card can be configured via the user interface.
To add the Conditional card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Conditional** from the card picker. All options for this card can be configured via the user interface.
{% configuration %}
type:
@ -20,7 +20,7 @@ conditions:
keys:
entity:
required: true
description: Home Assistant entity ID.
description: Entity ID.
type: string
state:
required: false

8
source/_lovelace/entity-filter.markdown
View File

@ -16,7 +16,7 @@ Screenshot of the entity filter card.
{% configuration %}
type:
required: true
description: entity-filter
description: "`entity-filter`"
type: string
entities:
required: true
@ -45,11 +45,11 @@ If you define entities as objects instead of strings (by adding `entity:` before
{% configuration %}
entity:
required: true
description: Home Assistant entity ID.
description: Entity ID.
type: string
type:
required: false
description: "Sets a custom card type: `custom:my-custom-card`"
description: "Sets a custom card type: `custom:my-custom-card`."
type: string
name:
required: false
@ -92,7 +92,7 @@ attribute:
type: string
{% endconfiguration %}
### Examples
## Examples
Show only active switches or lights in the house.

20
source/_lovelace/entity.markdown
View File

@ -11,38 +11,38 @@ The Entity card gives you a quick overview of your entity's state.
Screenshot of the Entity card.
</p>
To add the Entity card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Entity** from the card picker.
To add the Entity card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Entity** from the card picker.
{% configuration %}
type:
required: true
description: entity
description: "`entity`"
type: string
entity:
required: true
description: Home Assistant entity ID.
description: Entity ID.
type: string
name:
required: false
description: Name of Entity
description: Name of entity.
type: string
default: Entity Name
default: Entity name.
icon:
required: false
description: Overwrites icon.
type: string
attribute:
required: false
description: An attribute associated with the `entity`
description: An attribute associated with the `entity`.
type: string
unit:
required: false
description: Unit of Measurement given to data
description: Unit of measurement given to data.
type: string
default: "Unit Of Measurement given by entity"
default: Unit of measurement given by entity.
theme:
required: false
description: Set to any theme within `themes.yaml`
description: Override the used theme for this card with any loaded theme. For more information about themes, see the [frontend documentation](/integrations/frontend/).
type: string
footer:
required: false
@ -67,4 +67,4 @@ Alternatively, the card can be configured using YAML:
icon: 'mdi:battery'
attribute: battery_level
unit: '%'
```
```

30
source/_lovelace/gauge.markdown
View File

@ -11,7 +11,7 @@ The Gauge card is a basic card that allows visually seeing sensor data.
Screenshot of the Gauge card.
</p>
To add the Gauge card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Gauge** from the card picker. All options for this card can be configured via the user interface.
To add the Gauge card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Gauge** from the card picker. All options for this card can be configured via the user interface.
Alternatively, the card can be configured using YAML:
@ -23,58 +23,58 @@ entity: sensor.cpu_usage
{% configuration %}
type:
required: true
description: gauge
description: "`gauge`"
type: string
entity:
required: true
description: "Entity id to show"
description: Entity ID to show.
type: string
name:
required: false
description: Name of Gauge Entity
description: Name of gauge entity.
type: string
default: Entity Name
default: Entity name
unit:
required: false
description: Unit of Measurement given to data
description: Unit of measurement given to data.
type: string
default: "Unit Of Measurement given by entity"
default: Unit of measurement given by entity.
theme:
required: false
description: Set to any theme within `themes.yaml`
description: Override the used theme for this card with any loaded theme. For more information about themes, see the [frontend documentation](/integrations/frontend/).
type: string
min:
required: false
description: Minimum value for graph
description: Minimum value for graph.
type: integer
default: 0
max:
required: false
description: Maximum value for graph
description: Maximum value for graph.
type: integer
default: 100
severity:
required: false
description: Allows setting of colors for different numbers
description: Allows setting of colors for different numbers.
type: map
keys:
green:
required: true
description: Value from which to start green color
description: Value from which to start green color.
type: integer
yellow:
required: true
description: Value from which to start yellow color
description: Value from which to start yellow color.
type: integer
red:
required: true
description: Value from which to start red color
description: Value from which to start red color.
type: integer
{% endconfiguration %}
## Examples
Title and Unit of Measurement Example:
Title and unit of measurement:
```yaml
type: gauge

18
source/_lovelace/glance.markdown
View File

@ -11,12 +11,12 @@ The Glance card is useful to group multiple sensors in a compact overview. Keep
Screenshot of the Glance card.
</p>
To add the Glance card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Glance** from the card picker.
To add the Glance card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Glance** from the card picker.
{% configuration %}
type:
required: true
description: glance
description: "`glance`"
type: string
entities:
required: true
@ -24,7 +24,7 @@ entities:
type: list
title:
required: false
description: Card title
description: Card title.
type: string
show_name:
required: false
@ -38,12 +38,12 @@ show_icon:
default: "true"
show_state:
required: false
description: Show entity state-text.
description: Show entity state text.
type: boolean
default: "true"
theme:
required: false
description: "Set to any theme within `themes.yaml`"
description: Override the used theme for this card with any loaded theme. For more information about themes, see the [frontend documentation](/integrations/frontend/).
type: string
columns:
required: false
@ -51,7 +51,7 @@ columns:
type: integer
state_color:
required: false
description: Set to `true` to have icons colored when entity is active
description: Set to `true` to have icons colored when entity is active.
type: boolean
default: true
{% endconfiguration %}
@ -63,7 +63,7 @@ If you define entities as objects instead of strings, you can add more customiza
{% configuration %}
entity:
required: true
description: Home Assistant entity ID.
description: Entity ID.
type: string
name:
required: false
@ -84,7 +84,7 @@ show_last_changed:
default: false
show_state:
required: false
description: Show entity state-text.
description: Show entity state text.
type: boolean
default: true
tap_action:
@ -106,7 +106,7 @@ double_tap_action:
{% configuration badges %}
user:
required: true
description: User id that can see the view tab.
description: User ID that can see the view tab.
type: string
{% endconfiguration %}

8
source/_lovelace/grid.markdown
View File

@ -11,16 +11,16 @@ The Grid card allows you to show multiple cards in a grid. It will first fill th
Screenshot of the Grid card.
</p>
To add the Grid card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Grid Card** from the card picker.
To add the Grid card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Grid Card** from the card picker.
{% configuration %}
type:
required: true
description: grid
description: "`grid`"
type: string
title:
required: false
description: Title of Grid
description: Title of grid.
type: string
square:
required: false
@ -38,7 +38,7 @@ cards:
type: list
{% endconfiguration %}
### Examples
## Examples
Alternatively, the card can be configured using YAML:

4
source/_lovelace/history-graph.markdown
View File

@ -16,7 +16,7 @@ Screenshot of the History Graph card, when the sensor has no `unit_of_measuremen
Screenshot of the History Graph card, when the sensor has a `unit_of_measurement` defined.
</p>
To add the History Graph card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **History Graph** from the card picker. All options for this card can be configured via the user interface.
To add the History Graph card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **History Graph** from the card picker. All options for this card can be configured via the user interface.
{% configuration %}
type:
@ -50,7 +50,7 @@ If you define entities as objects instead of strings, you can add more customiza
{% configuration %}
entity:
required: true
description: Home Assistant entity ID.
description: Entity ID.
type: string
name:
required: false

6
source/_lovelace/horizontal-stack.markdown
View File

@ -6,16 +6,16 @@ description: "The Horizontal Stack card allows you to stack together multiple ca
The Horizontal Stack card allows you to stack together multiple cards, so they always sit next to each other in the space of one column.
To add the Horizontal Stack card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Horizontal Stack** from the card picker. All options for this card can be configured via the user interface.
To add the Horizontal Stack card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Horizontal Stack** from the card picker. All options for this card can be configured via the user interface.
{% configuration %}
type:
required: true
description: horizontal-stack
description: "`horizontal-stack`"
type: string
title:
required: false
description: Title of Stack
description: Title of stack.
type: string
cards:
required: true

12
source/_lovelace/humidifier.markdown
View File

@ -11,25 +11,25 @@ The Humidifier card lets you control and monitor humidifiers, dehumidifiers, and
Screenshot of the humidifier card.
</p>
To add the Humidifier card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Humidifier** from the card picker. All options for this card can be configured via the user interface.
To add the Humidifier card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Humidifier** from the card picker. All options for this card can be configured via the user interface.
{% configuration %}
type:
required: true
description: humidifier
description: "`humidifier`"
type: string
entity:
required: true
description: Entity id of `humidifier` domain
description: Entity ID of `humidifier` domain.
type: string
name:
required: false
description: Name of Entity
description: Name of entity.
type: string
default: Entity Name
default: Entity name
theme:
required: false
description: Set to any theme within `themes.yaml`
description: Override the used theme for this card with any loaded theme. For more information about themes, see the [frontend documentation](/integrations/frontend/).
type: string
{% endconfiguration %}

8
source/_lovelace/iframe.markdown
View File

@ -15,12 +15,12 @@ You can't embed sites using HTTP if you are using HTTPS for your Home Assistant.
Windy weather radar as Webpage.
</p>
To add the Webpage card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Webpage** from the card picker. All options for this card can be configured via the user interface.
To add the Webpage card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Webpage** from the card picker. All options for this card can be configured via the user interface.
{% configuration %}
type:
required: true
description: iframe
description: "`iframe`"
type: string
url:
required: true
@ -28,7 +28,7 @@ url:
type: string
aspect_ratio:
required: false
description: Height-width-ratio.
description: Height to width ratio.
type: string
default: "50%"
title:
@ -37,7 +37,7 @@ title:
type: string
{% endconfiguration %}
### Examples
## Examples
The card can also be configured using YAML, some examples below:

12
source/_lovelace/light.markdown
View File

@ -11,7 +11,7 @@ The Light card allows you to change the brightness of the light.
Screenshot of the Light card.
</p>
To add the Light card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Light** from the card picker. All options for this card can be configured via the user interface.
To add the Light card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Light** from the card picker. All options for this card can be configured via the user interface.
Alternatively, the card can be configured using YAML:
@ -23,25 +23,25 @@ entity: light.bedroom
{% configuration %}
type:
required: true
description: light
description: "`light`"
type: string
entity:
required: true
description: Home Assistant Light Domain entity ID.
description: Entity ID of `light` domain.
type: string
name:
required: false
description: Overwrites friendly name.
type: string
default: Name of Entity
default: Name of entity
icon:
required: false
description: Overwrites icon.
type: string
default: Entity Domain Icon
default: Entity domain icon
theme:
required: false
description: Set to any theme within `themes.yaml`.
description: Override the used theme for this card with any loaded theme. For more information about themes, see the [frontend documentation](/integrations/frontend/).
type: string
hold_action:
required: false

13
source/_lovelace/logbook.markdown
View File

@ -11,10 +11,9 @@ The Logbook card displays entries from the logbook for specific entities.
Screenshot of the Logbook card.
</p>
To add the Logbook card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Logbook** from the card picker.
### Card Settings
To add the Logbook card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Logbook** from the card picker.
## Card Settings
{% configuration_basic %}
Entities:
@ -24,7 +23,7 @@ Title:
Hours to show:
description: The number of hours in the past that will be tracked in the card.
Theme:
description: Theme your card using any installed theme in your HA environment.
description: Name of any loaded theme to be used for this card. For more information about themes, see the [frontend documentation](/integrations/frontend/).
{% endconfiguration_basic %}
### YAML
@ -34,11 +33,11 @@ This is for if you use YAML mode or prefer to use YAML in the Code Editor in the
{% configuration %}
type:
required: true
description: logbook
description: "`logbook`"
type: string
entities:
required: true
description: "The entities that will show in the card."
description: The entities that will show in the card.
type: list
title:
required: false
@ -51,7 +50,7 @@ hours_to_show:
default: 24
theme:
required: false
description: "Set to any theme within `themes.yaml`."
description: Override the used theme for this card with any loaded theme. For more information about themes, see the [frontend documentation](/integrations/frontend/).
type: string
{% endconfiguration %}

4
source/_lovelace/map.markdown
View File

@ -11,12 +11,12 @@ The Map card that allows you to display entities on a map
Screenshot of the map card.
</p>
To add the Map card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Map** from the card picker. All options for this card can be configured via the user interface.
To add the Map card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Map** from the card picker. All options for this card can be configured via the user interface.
{% configuration %}
type:
required: true
description: map
description: "`map`"
type: string
entities:
required: true

9
source/_lovelace/markdown.markdown
View File

@ -13,12 +13,12 @@ The renderer uses [Marked.js](https://marked.js.org), which supports [several sp
Screenshot of the Markdown card.
</p>
To add the Markdown card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Markdown** from the card picker.
To add the Markdown card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Markdown** from the card picker.
{% configuration %}
type:
required: true
description: markdown
description: "`markdown`"
type: string
content:
required: true
@ -41,7 +41,7 @@ entity_id:
description: "A list of entity IDs so a template in `content:` only reacts to the state changes of these entities. This can be used if the automatic analysis fails to find all relevant entities."
theme:
required: false
description: "Set to any theme within `themes.yaml`"
description: Override the used theme for this card with any loaded theme. For more information about themes, see the [frontend documentation](/integrations/frontend/).
type: string
{% endconfiguration %}
@ -86,7 +86,6 @@ card:
{% endraw %}
A special template variable - `user` is set up for the `content` of the card. It contains the currently logged in user.
For example:
@ -103,7 +102,7 @@ content: |
## Icons
You can also use [materialdesignicons.com]() icons in the `content` of the card.
You can also use [materialdesignicons.com](https://materialdesignicons.com/) icons in the `content` of the card.
For example:

8
source/_lovelace/media-control.markdown
View File

@ -11,22 +11,22 @@ The Media Control card is used to display [Media Player](/integrations/#media-pl
Screenshot of the Media Control card.
</p>
To add the Media Control card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Media Control** from the card picker.
To add the Media Control card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Media Control** from the card picker.
{% configuration %}
type:
required: true
description: media-control
description: "`media-control`"
type: string
entity:
required: true
description: "A media player `entity_id`."
description: Entity ID of `media_player` domain.
type: string
name:
required: false
description: Overwrites friendly name.
type: string
default: Name of Entity
default: Name of entity
{% endconfiguration %}
## Example

70
source/_lovelace/picture-elements.markdown
View File

@ -16,7 +16,7 @@ The cards allow you to position icons or text and even services on an image base
{% configuration %}
type:
required: true
description: picture-elements
description: "`picture-elements`"
type: string
image:
required: true
@ -33,11 +33,11 @@ camera_view:
type: string
elements:
required: true
description: List of elements
description: List of elements.
type: list
title:
required: false
description: Card title
description: Card title.
type: string
state_filter:
required: false
@ -45,7 +45,7 @@ state_filter:
type: map
theme:
required: false
description: "Set to any theme within `themes.yaml`"
description: Override the used theme for this card with any loaded theme. For more information about themes, see the [frontend documentation](/integrations/frontend/).
type: string
dark_mode_image:
required: false
@ -79,11 +79,11 @@ This element creates a badge representing the state of an entity.
{% configuration %}
type:
required: true
description: state-badge
description: "`state-badge`"
type: string
entity:
required: true
description: Entity id
description: Entity ID.
type: string
style:
required: true
@ -115,11 +115,11 @@ This element represents an entity state using an icon.
{% configuration %}
type:
required: true
description: state-icon
description: "`state-icon`"
type: string
entity:
required: true
description: The entity id to use.
description: The entity ID to use.
type: string
icon:
required: false
@ -131,42 +131,42 @@ title:
type: string
state_color:
required: false
description: Set to `true` to have icons colored when entity is active
description: Set to `true` to have icons colored when entity is active.
type: boolean
default: true
tap_action:
required: false
description: Action to take on tap
description: Action to take on tap.
type: map
keys:
action:
required: true
description: "Action to perform (`more-info`, `toggle`, `call-service`, `navigate`, `url`, `none`)"
description: "Action to perform (`more-info`, `toggle`, `call-service`, `navigate`, `url`, `none`)."
type: string
default: "`more-info`"
navigation_path:
required: false
description: "Path to navigate to (e.g., `/lovelace/0/`) when `action` defined as `navigate`"
description: "Path to navigate to (e.g., `/lovelace/0/`) when `action` defined as `navigate`."
type: string
default: none
url_path:
required: false
description: "Path to navigate to (e.g., `https://www.home-assistant.io`) when `action` defined as `url`"
description: "Path to navigate to (e.g., `https://www.home-assistant.io`) when `action` defined as `url`."
type: string
default: none
service:
required: false
description: "Service to call (e.g., `media_player.media_play_pause`) when `action` defined as `call-service`"
description: "Service to call (e.g., `media_player.media_play_pause`) when `action` defined as `call-service`."
type: string
default: none
service_data:
required: false
description: "Service data to include (e.g., `entity_id: media_player.bedroom`) when `action` defined as `call-service`"
description: "Service data to include (e.g., `entity_id: media_player.bedroom`) when `action` defined as `call-service`."
type: string
default: none
confirmation:
required: false
description: "Present a confirmation dialog to confirm the action. See `confirmation` object below"
description: "Present a confirmation dialog to confirm the action. See `confirmation` object below."
type: [boolean, map]
default: "false"
tap_action:
@ -195,16 +195,15 @@ This element represents an entity's state via text.
{% configuration %}
type:
required: true
description: state-label
description: "`state-label`"
type: string
entity:
required: true
description: Entity id
description: Entity ID.
type: string
attribute:
required: false
description: If present, the corresponding attribute will be shown,
instead of the entity's state
description: If present, the corresponding attribute will be shown, instead of the entity's state.
type: string
prefix:
required: false
@ -244,15 +243,15 @@ This entity creates a button (with arbitrary text) that can be used to call a se
{% configuration %}
type:
required: true
description: service-button
description: "`service-button`"
type: string
title:
required: true
description: Button label
description: Button label.
type: string
service:
required: true
description: light.turn_on
description: "`light.turn_on`"
type: string
service_data:
required: false
@ -267,16 +266,16 @@ style:
### Icon Element
This element creates a static icon that is not linked to the state of an entity.
This element creates a static icon that is not linked to the state of an entity.
{% configuration %}
type:
required: true
description: icon
description: "`icon`"
type: string
icon:
required: true
description: "Icon to display (e.g., `mdi:home`)"
description: "Icon to display (e.g., `mdi:home`)."
type: string
title:
required: false
@ -284,7 +283,7 @@ title:
type: string
entity:
required: false
description: Entity to use for more-info/toggle
description: Entity to use for more-info/toggle.
type: string
tap_action:
required: false
@ -312,11 +311,11 @@ This creates an image element that overlays the background image.
{% configuration %}
type:
required: true
description: image
description: "`image`"
type: string
entity:
required: false
description: Entity to use for state_image and state_filter and also target for actions.
description: "Entity to use for `state_image` and `state_filter` and also target for actions."
type: string
title:
required: false
@ -353,7 +352,7 @@ state_image:
type: map
filter:
required: false
description: Default CSS filter
description: Default CSS filter.
type: string
state_filter:
required: false
@ -361,7 +360,7 @@ state_filter:
type: map
aspect_ratio:
required: false
description: Height-width-ratio.
description: Height to width ratio.
type: string
default: "50%"
style:
@ -378,7 +377,7 @@ Much like the Conditional card, this element will let you show its sub-elements
{% configuration %}
type:
required: true
description: conditional
description: "`conditional`"
type: string
conditions:
required: true
@ -387,7 +386,7 @@ conditions:
keys:
entity:
required: true
description: Home Assistant entity ID.
description: Entity ID.
type: string
state:
required: false
@ -412,7 +411,7 @@ for more information.
{% configuration %}
type:
required: true
description: 'Card name with `custom:` prefix (e.g., `custom:my-custom-card`)'
description: 'Card name with `custom:` prefix (e.g., `custom:my-custom-card`).'
type: string
style:
required: true
@ -421,13 +420,12 @@ style:
default: "position: absolute, transform: translate(-50%, -50%)"
{% endconfiguration %}
## Options For Exemptions
{% configuration badges %}
user:
required: true
description: User id that can see the view tab.
description: User ID that can see the view tab.
type: string
{% endconfiguration %}

4
source/_lovelace/picture-entity.markdown
View File

@ -14,7 +14,7 @@ The Picture Entity card displays an entity in the form of an image. Instead of i
{% configuration %}
type:
required: true
description: picture-entity
description: "`picture-entity`"
type: string
entity:
required: true
@ -61,7 +61,7 @@ show_state:
default: true
theme:
required: false
description: "Set to any theme within `themes.yaml`"
description: Override the used theme for this card with any loaded theme. For more information about themes, see the [frontend documentation](/integrations/frontend/).
type: string
tap_action:
required: false

18
source/_lovelace/picture-glance.markdown
View File

@ -14,7 +14,7 @@ The Picture Glance card shows an image and corresponding entity states as an ico
{% configuration %}
type:
required: true
description: picture-glance
description: "`picture-glance`"
type: string
entities:
required: true
@ -60,12 +60,12 @@ entity:
type: string
show_state:
required: false
description: Show entity state-text.
description: Show entity state text.
type: boolean
default: true
theme:
required: false
description: "Set to any theme within `themes.yaml`"
description: Override the used theme for this card with any loaded theme. For more information about themes, see the [frontend documentation](/integrations/frontend/).
type: string
tap_action:
required: false
@ -88,19 +88,19 @@ If you define entities as objects instead of strings, you can add more customiza
{% configuration %}
entity:
required: true
description: Home Assistant entity ID.
description: Entity ID.
type: string
attribute:
required: false
description: Attribute of the entity to display instead of the state
description: Attribute of the entity to display instead of the state.
type: string
prefix:
required: false
description: Prefix to display before the attribute's value
description: Prefix to display before the attribute's value.
type: string
suffix:
required: false
description: Suffix to display after the attribute's value
description: Suffix to display after the attribute's value.
type: string
icon:
required: false
@ -108,7 +108,7 @@ icon:
type: string
show_state:
required: false
description: Show entity state-text.
description: Show entity state text.
type: boolean
default: true
tap_action:
@ -130,7 +130,7 @@ double_tap_action:
{% configuration badges %}
user:
required: true
description: User id that can see the view tab.
description: User ID that can see the view tab.
type: string
{% endconfiguration %}

8
source/_lovelace/picture.markdown
View File

@ -14,15 +14,15 @@ Screenshot of the picture card.
{% configuration %}
type:
required: true
description: picture
description: "`picture`"
type: string
image:
required: true
description: The URL of an image. When you want to store images in your Home Assistant installation use the [hosting files documentation](/integrations/http/#hosting-files). After storing your files, use the /local path, for example /local/filename.jpg .
description: "The URL of an image. When you want to store images in your Home Assistant installation use the [hosting files documentation](/integrations/http/#hosting-files). After storing your files, use the `/local` path, for example, `/local/filename.jpg`."
type: string
theme:
required: false
description: "Set to any theme within `themes.yaml`"
description: Override the used theme for this card with any loaded theme. For more information about themes, see the [frontend documentation](/integrations/frontend/).
type: string
tap_action:
required: false
@ -43,7 +43,7 @@ double_tap_action:
{% configuration badges %}
user:
required: true
description: User id that can see the view tab.
description: User ID that can see the view tab.
type: string
{% endconfiguration %}

8
source/_lovelace/plant-status.markdown
View File

@ -20,16 +20,16 @@ type:
type: string
entity:
required: true
description: "Entity ID from `plant` domain"
description: Entity ID of `plant` domain.
type: string
name:
required: false
description: Overwrites friendly name
description: Overwrites friendly name.
type: string
default: Entity Name
default: Entity name
theme:
required: false
description: "Set to any theme within `themes.yaml`"
description: Override the used theme for this card with any loaded theme. For more information about themes, see the [frontend documentation](/integrations/frontend/).
type: string
{% endconfiguration %}

20
source/_lovelace/sensor.markdown
View File

@ -11,46 +11,46 @@ The Sensor card gives you a quick overview of your sensors state with an optiona
Screenshot of the sensor card.
</p>
To add the Sensor card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Sensor** from the card picker. All options for this card can be configured via the user interface.
To add the Sensor card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Sensor** from the card picker. All options for this card can be configured via the user interface.
{% configuration %}
type:
required: true
description: sensor
description: "`sensor`"
type: string
entity:
required: true
description: Entity id of `sensor` domain
description: Entity ID of `sensor` domain.
type: string
icon:
required: false
description: The card icon
description: The card icon.
type: string
name:
required: false
description: The card name
description: The card name.
type: string
graph:
required: false
description: Type of graph `none` or `line`
description: Type of graph (`none` or `line`).
type: string
unit:
required: false
description: The unit of measurement
description: The unit of measurement.
type: string
detail:
required: false
description: Detail of the graph `1` or `2`, `1` equals one point/hour, `2` equals six points/hour
description: Detail of the graph `1` or `2` (`1` = one point/hour, `2` = six points/hour).
type: integer
default: 1
hours_to_show:
required: false
description: Hours to show in graph
description: Hours to show in graph.
type: integer
default: 24
theme:
required: false
description: Set to any theme within `themes.yaml`
description: Override the used theme for this card with any loaded theme. For more information about themes, see the [frontend documentation](/integrations/frontend/).
type: string
{% endconfiguration %}

9
source/_lovelace/shopping-list.markdown
View File

@ -13,8 +13,7 @@ Setup of the [Shopping List integration](/integrations/shopping_list/) is requir
Screenshot of the Shopping List card.
</p>
To add the Shopping List card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Shopping List** from the card picker. All options for this card can be configured via the user interface.
To add the Shopping List card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Shopping List** from the card picker. All options for this card can be configured via the user interface.
Alternatively, the card can be configured using YAML:
@ -25,15 +24,15 @@ type: shopping-list
{% configuration %}
type:
required: true
description: shopping-list
description: "`shopping-list`"
type: string
title:
required: false
description: Title of Shopping List
description: Title of shopping list.
type: string
theme:
required: false
description: "Set to any theme within `themes.yaml`"
description: Override the used theme for this card with any loaded theme. For more information about themes, see the [frontend documentation](/integrations/frontend/).
type: string
{% endconfiguration %}

10
source/_lovelace/thermostat.markdown
View File

@ -11,25 +11,25 @@ The Thermostat card gives control of your [climate](/integrations/#climate) enti
Screenshot of the Thermostat card.
</p>
To add the Thermostat card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Thermostat** from the card picker. All options for this card can be configured via the user interface.
To add the Thermostat card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Thermostat** from the card picker. All options for this card can be configured via the user interface.
{% configuration %}
type:
required: true
description: thermostat
description: "`thermostat`"
type: string
entity:
required: true
description: Entity id of `climate` domain
description: Entity ID of `climate` domain.
type: string
name:
required: false
description: Overwrites friendly name.
type: string
default: Name of Entity.
default: Name of entity.
theme:
required: false
description: Set to any theme within `themes.yaml`
description: Override the used theme for this card with any loaded theme. For more information about themes, see the [frontend documentation](/integrations/frontend/).
type: string
{% endconfiguration %}

8
source/_lovelace/vertical-stack.markdown
View File

@ -6,16 +6,16 @@ description: "The Vertical Stack card allows you to group multiple cards so they
The Vertical Stack card allows you to group multiple cards so they always sit in the same column.
To add the Vertical Stack card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Vertical Stack** from the card picker. All options for this card can be configured via the user interface.
To add the Vertical Stack card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Vertical Stack** from the card picker. All options for this card can be configured via the user interface.
{% configuration %}
type:
required: true
description: vertical-stack
description: "`vertical-stack`"
type: string
title:
required: false
description: Title of Stack
description: Title of stack.
type: string
cards:
required: true
@ -23,7 +23,7 @@ cards:
type: list
{% endconfiguration %}
### Examples
## Examples
Alternatively, the card can be configured using YAML:

25
source/_lovelace/weather-forecast.markdown
View File

@ -11,10 +11,9 @@ The Weather Forecast card displays the weather. Very useful to include on interf
Screenshot of the Weather card.
</p>
To add the Weather card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Weather** from the card picker.
### Card Settings
To add the Weather card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Weather** from the card picker.
## Card Settings
{% configuration_basic %}
Entity:
@ -26,7 +25,7 @@ Show Forecast:
Secondary Info Attribute:
description: Here you can specify a secondary attribute to show under the current temperature. Ex. Extrema, Precipitation, Humidity. If not set, it will default to Extrema (High/Low) if available, if not available then Precipitation and if precipitation isn't available then Humidity.
Theme:
description: Theme your card using any installed theme in your HA environment.
description: Name of any loaded theme to be used for this card. For more information about themes, see the [frontend documentation](/integrations/frontend/).
{% endconfiguration_basic %}
<div class="note">
@ -37,25 +36,24 @@ Theme:
</div>
### YAML
This is for if you use YAML mode or just prefer to use YAML in the Code Editor in the UI
This is for if you use YAML mode or just prefer to use YAML in the Code Editor in the UI.
{% configuration %}
type:
required: true
description: weather-forecast
description: "`weather-forecast`"
type: string
entity:
required: true
description: "The `entity_id` of the `weather` platform to use."
description: Entity ID of `weather` domain.
type: string
name:
required: false
description: Overwrites the friendly name.
type: string
default: Entity Name
default: Entity name
show_forecast:
required: false
description: Show next hours/days forecast.
@ -68,7 +66,7 @@ secondary_info_attribute:
default: Defaults to `extrema` if available, if not available then `precipitation` and if precipitation isn't available then `humidity`.
theme:
required: false
description: "Set to any theme within `themes.yaml`"
description: Override the used theme for this card with any loaded theme. For more information about themes, see the [frontend documentation](/integrations/frontend/).
type: string
{% endconfiguration %}
@ -79,12 +77,11 @@ type: weather-forecast
entity: weather.openweathermap
```
### Advanced
##### Themeable Icons
#### Themeable Icons
The default weather icons are themable via a [theme](/integrations/frontend/#themes). Theme variables include:
The default weather icons are themable via a [theme](/integrations/frontend/#themes). Theme variables include:
```yaml
--weather-icon-cloud-front-color
@ -105,7 +102,7 @@ Example theme configuration:
&nbsp;
##### Personal Icons
#### Personal Icons
Weather icons can be overwritten with your own personal images via a [theme](/integrations/frontend/#themes). Theme variables include:

22
source/lovelace/badges.markdown
View File

@ -5,7 +5,7 @@ description: "Description of the various badges that are available."
Badges are widgets that sit at the top of a Lovelace panel, above all the cards.
### State Label Badge
## State Label Badge
The State Label badge allows you to display a state badge. This badge supports [actions](/lovelace/actions/).
@ -17,22 +17,22 @@ entity: light.living_room
{% configuration state_label %}
type:
required: true
description: state-label
description: "`state-label`"
type: string
entity:
required: true
description: Home Assistant entity ID.
description: Entity ID.
type: string
name:
required: false
description: Overwrites friendly name.
type: string
default: Name of Entity
default: Name of entity
icon:
required: false
description: Overwrites icon or entity picture.
type: string
default: Entity Domain Icon
default: Entity domain icon
image:
required: false
description: The URL of an image.
@ -49,14 +49,14 @@ show_icon:
default: "true"
{% endconfiguration %}
### Entity Filter Badge
## Entity Filter Badge
This badge allows you to define a list of entities that you want to track only when in a certain state. Very useful for showing lights that you forgot to turn off or show a list of people only when they're at home.
{% configuration filter_badge %}
type:
required: true
description: entity-filter
description: "`entity-filter`"
type: string
entities:
required: true
@ -68,7 +68,7 @@ state_filter:
type: list
{% endconfiguration %}
#### Options For Entities
### Options For Entities
If you define entities as objects instead of strings (by adding `entity:` before entity ID), you can add more customization and configurations:
@ -79,7 +79,7 @@ type:
type: string
entity:
required: true
description: Home Assistant entity ID.
description: Entity ID.
type: string
name:
required: false
@ -99,7 +99,7 @@ state_filter:
type: list
{% endconfiguration %}
#### Options For state_filter
### Options For state_filter
If you define state_filter as objects instead of strings (by adding `value:` before your state value), you can add more customization to your filter:
@ -118,7 +118,7 @@ attribute:
type: string
{% endconfiguration %}
#### Examples
### Examples
Show only active switches or lights in the house

3
source/lovelace/dashboards-and-views.markdown
View File

@ -59,6 +59,7 @@ lovelace:
```
You can also add YAML dashboards when your main dashboard is UI configured:
```yaml
lovelace:
mode: storage
@ -329,7 +330,7 @@ If you define `visible` as objects instead of a boolean to specify conditions fo
{% configuration badges %}
user:
required: true
description: User id that can see the view tab (unique hex value found on the Users configuration page).
description: User ID that can see the view tab (unique hex value found on the Users configuration page).
type: string
{% endconfiguration %}

14
source/lovelace/header-footer.markdown
View File

@ -22,11 +22,11 @@ header:
{% configuration header-footer %}
type:
required: true
description: picture
description: "`picture`"
type: string
image:
required: true
description: The URL of an image
description: The URL of an image.
type: string
tap_action:
required: false
@ -65,19 +65,19 @@ entities:
keys:
entity:
required: true
description: The entity to render
description: The entity ID to render.
type: string
icon:
required: false
description: Override the entity icon
description: Override the entity icon.
type: string
image:
required: false
description: Override the entity image
description: Override the entity image.
type: string
name:
required: false
description: Label for the button
description: Label for the button.
type: string
{% endconfiguration %}
@ -100,7 +100,7 @@ footer:
{% configuration header-footer %}
entity:
required: true
description: Entity ID of `sensor` domain
description: Entity ID of `sensor` domain.
type: string
detail:
required: false