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" title: "Alarm Panel Card"
sidebar_label: Alarm Panel 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'> <p class='img'>
<img src='/images/lovelace/lovelace_alarm_panel_card.gif' alt='Screenshot of the alarm panel card'> <img src='/images/lovelace/lovelace_alarm_panel_card.gif' alt='Screenshot of the alarm panel card'>
Screenshot of the Alarm Panel card. Screenshot of the Alarm Panel card.
</p> </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: Alternatively, the card can be configured using YAML:
@ -23,22 +23,22 @@ entity: alarm_control_panel.alarm
{% configuration %} {% configuration %}
type: type:
required: true required: true
description: alarm-panel description: "`alarm-panel`"
type: string type: string
entity: entity:
required: true required: true
description: "Entity ID of `alarm_control_panel` domain" description: Entity ID of `alarm_control_panel` domain.
type: string type: string
name: name:
required: false required: false
description: Overwrites Friendly Name description: Overwrites friendly name.
type: string type: string
default: Current State of Alarm Entity default: Current state of the alarm entity.
states: states:
required: false required: false
description: Controls which states to have available description: Controls which states to have available.
type: list type: list
default: arm_home, arm_away default: "`arm_home, arm_away`"
keys: keys:
arm_home: arm_home:
description: Arm Home description: Arm Home
@ -50,13 +50,13 @@ states:
description: Arm Custom Bypass description: Arm Custom Bypass
theme: theme:
required: false 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 type: string
{% endconfiguration %} {% endconfiguration %}
## Examples ## Examples
Title Example: Title example:
```yaml ```yaml
- type: alarm-panel - type: alarm-panel
@ -69,7 +69,7 @@ Title Example:
Screenshot of the Alarm Panel card. Screenshot of the Alarm Panel card.
</p> </p>
Define the State List: Define the state list:
```yaml ```yaml
type: alarm-panel 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. Screenshot of three Button Cards.
</p> </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 ## Card Settings
@ -29,7 +29,7 @@ Show Icon:
Icon Height: Icon Height:
description: The height of the icon, in pixels. description: The height of the icon, in pixels.
Theme: 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: Tap Action:
description: The action taken on card tap. For more information, see the [action documentation](/lovelace/actions/#tap-action). description: The action taken on card tap. For more information, see the [action documentation](/lovelace/actions/#tap-action).
Hold 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 %} {% configuration %}
type: type:
required: true required: true
description: button description: "`button`"
type: string type: string
entity: entity:
required: false required: false
@ -58,7 +58,7 @@ icon:
required: false 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. 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 type: string
default: Entity Domain Icon default: Entity domain icon
show_name: show_name:
required: false required: false
description: If false, the button name is not shown on the card. description: If false, the button name is not shown on the card.
@ -98,7 +98,7 @@ double_tap_action:
type: map type: map
theme: theme:
required: false 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 type: string
{% endconfiguration %} {% 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. Screenshot of the Calendar card.
</p> </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 %} {% configuration_basic %}
Title: Title:
@ -23,7 +23,7 @@ Initial View:
Entities: Entities:
description: The calendar entities that will be displayed in the card. description: The calendar entities that will be displayed in the card.
Theme: 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 %} {% endconfiguration_basic %}
### YAML ### 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 %} {% configuration %}
type: type:
required: true required: true
description: calendar description: "`calendar`"
type: string type: string
title: title:
required: false required: false
@ -49,7 +49,7 @@ entities:
type: list type: list
theme: theme:
required: false 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 type: string
{% endconfiguration %} {% 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. 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 %} {% configuration %}
type: type:
@ -20,7 +20,7 @@ conditions:
keys: keys:
entity: entity:
required: true required: true
description: Home Assistant entity ID. description: Entity ID.
type: string type: string
state: state:
required: false required: false

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

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

18
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. Screenshot of the Entity card.
</p> </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 %} {% configuration %}
type: type:
required: true required: true
description: entity description: "`entity`"
type: string type: string
entity: entity:
required: true required: true
description: Home Assistant entity ID. description: Entity ID.
type: string type: string
name: name:
required: false required: false
description: Name of Entity description: Name of entity.
type: string type: string
default: Entity Name default: Entity name.
icon: icon:
required: false required: false
description: Overwrites icon. description: Overwrites icon.
type: string type: string
attribute: attribute:
required: false required: false
description: An attribute associated with the `entity` description: An attribute associated with the `entity`.
type: string type: string
unit: unit:
required: false required: false
description: Unit of Measurement given to data description: Unit of measurement given to data.
type: string type: string
default: "Unit Of Measurement given by entity" default: Unit of measurement given by entity.
theme: theme:
required: false 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 type: string
footer: footer:
required: false required: false

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. Screenshot of the Gauge card.
</p> </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: Alternatively, the card can be configured using YAML:
@ -23,58 +23,58 @@ entity: sensor.cpu_usage
{% configuration %} {% configuration %}
type: type:
required: true required: true
description: gauge description: "`gauge`"
type: string type: string
entity: entity:
required: true required: true
description: "Entity id to show" description: Entity ID to show.
type: string type: string
name: name:
required: false required: false
description: Name of Gauge Entity description: Name of gauge entity.
type: string type: string
default: Entity Name default: Entity name
unit: unit:
required: false required: false
description: Unit of Measurement given to data description: Unit of measurement given to data.
type: string type: string
default: "Unit Of Measurement given by entity" default: Unit of measurement given by entity.
theme: theme:
required: false 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 type: string
min: min:
required: false required: false
description: Minimum value for graph description: Minimum value for graph.
type: integer type: integer
default: 0 default: 0
max: max:
required: false required: false
description: Maximum value for graph description: Maximum value for graph.
type: integer type: integer
default: 100 default: 100
severity: severity:
required: false required: false
description: Allows setting of colors for different numbers description: Allows setting of colors for different numbers.
type: map type: map
keys: keys:
green: green:
required: true required: true
description: Value from which to start green color description: Value from which to start green color.
type: integer type: integer
yellow: yellow:
required: true required: true
description: Value from which to start yellow color description: Value from which to start yellow color.
type: integer type: integer
red: red:
required: true required: true
description: Value from which to start red color description: Value from which to start red color.
type: integer type: integer
{% endconfiguration %} {% endconfiguration %}
## Examples ## Examples
Title and Unit of Measurement Example: Title and unit of measurement:
```yaml ```yaml
type: gauge 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. Screenshot of the Glance card.
</p> </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 %} {% configuration %}
type: type:
required: true required: true
description: glance description: "`glance`"
type: string type: string
entities: entities:
required: true required: true
@ -24,7 +24,7 @@ entities:
type: list type: list
title: title:
required: false required: false
description: Card title description: Card title.
type: string type: string
show_name: show_name:
required: false required: false
@ -38,12 +38,12 @@ show_icon:
default: "true" default: "true"
show_state: show_state:
required: false required: false
description: Show entity state-text. description: Show entity state text.
type: boolean type: boolean
default: "true" default: "true"
theme: theme:
required: false 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 type: string
columns: columns:
required: false required: false
@ -51,7 +51,7 @@ columns:
type: integer type: integer
state_color: state_color:
required: false 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 type: boolean
default: true default: true
{% endconfiguration %} {% endconfiguration %}
@ -63,7 +63,7 @@ If you define entities as objects instead of strings, you can add more customiza
{% configuration %} {% configuration %}
entity: entity:
required: true required: true
description: Home Assistant entity ID. description: Entity ID.
type: string type: string
name: name:
required: false required: false
@ -84,7 +84,7 @@ show_last_changed:
default: false default: false
show_state: show_state:
required: false required: false
description: Show entity state-text. description: Show entity state text.
type: boolean type: boolean
default: true default: true
tap_action: tap_action:
@ -106,7 +106,7 @@ double_tap_action:
{% configuration badges %} {% configuration badges %}
user: user:
required: true required: true
description: User id that can see the view tab. description: User ID that can see the view tab.
type: string type: string
{% endconfiguration %} {% 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. Screenshot of the Grid card.
</p> </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 %} {% configuration %}
type: type:
required: true required: true
description: grid description: "`grid`"
type: string type: string
title: title:
required: false required: false
description: Title of Grid description: Title of grid.
type: string type: string
square: square:
required: false required: false
@ -38,7 +38,7 @@ cards:
type: list type: list
{% endconfiguration %} {% endconfiguration %}
### Examples ## Examples
Alternatively, the card can be configured using YAML: 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. Screenshot of the History Graph card, when the sensor has a `unit_of_measurement` defined.
</p> </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 %} {% configuration %}
type: type:
@ -50,7 +50,7 @@ If you define entities as objects instead of strings, you can add more customiza
{% configuration %} {% configuration %}
entity: entity:
required: true required: true
description: Home Assistant entity ID. description: Entity ID.
type: string type: string
name: name:
required: false 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. 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 %} {% configuration %}
type: type:
required: true required: true
description: horizontal-stack description: "`horizontal-stack`"
type: string type: string
title: title:
required: false required: false
description: Title of Stack description: Title of stack.
type: string type: string
cards: cards:
required: true 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. Screenshot of the humidifier card.
</p> </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 %} {% configuration %}
type: type:
required: true required: true
description: humidifier description: "`humidifier`"
type: string type: string
entity: entity:
required: true required: true
description: Entity id of `humidifier` domain description: Entity ID of `humidifier` domain.
type: string type: string
name: name:
required: false required: false
description: Name of Entity description: Name of entity.
type: string type: string
default: Entity Name default: Entity name
theme: theme:
required: false 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 type: string
{% endconfiguration %} {% 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. Windy weather radar as Webpage.
</p> </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 %} {% configuration %}
type: type:
required: true required: true
description: iframe description: "`iframe`"
type: string type: string
url: url:
required: true required: true
@ -28,7 +28,7 @@ url:
type: string type: string
aspect_ratio: aspect_ratio:
required: false required: false
description: Height-width-ratio. description: Height to width ratio.
type: string type: string
default: "50%" default: "50%"
title: title:
@ -37,7 +37,7 @@ title:
type: string type: string
{% endconfiguration %} {% endconfiguration %}
### Examples ## Examples
The card can also be configured using YAML, some examples below: 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. Screenshot of the Light card.
</p> </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: Alternatively, the card can be configured using YAML:
@ -23,25 +23,25 @@ entity: light.bedroom
{% configuration %} {% configuration %}
type: type:
required: true required: true
description: light description: "`light`"
type: string type: string
entity: entity:
required: true required: true
description: Home Assistant Light Domain entity ID. description: Entity ID of `light` domain.
type: string type: string
name: name:
required: false required: false
description: Overwrites friendly name. description: Overwrites friendly name.
type: string type: string
default: Name of Entity default: Name of entity
icon: icon:
required: false required: false
description: Overwrites icon. description: Overwrites icon.
type: string type: string
default: Entity Domain Icon default: Entity domain icon
theme: theme:
required: false 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 type: string
hold_action: hold_action:
required: false 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. Screenshot of the Logbook card.
</p> </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. 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
## Card Settings
{% configuration_basic %} {% configuration_basic %}
Entities: Entities:
@ -24,7 +23,7 @@ Title:
Hours to show: Hours to show:
description: The number of hours in the past that will be tracked in the card. description: The number of hours in the past that will be tracked in the card.
Theme: 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 %} {% endconfiguration_basic %}
### YAML ### 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 %} {% configuration %}
type: type:
required: true required: true
description: logbook description: "`logbook`"
type: string type: string
entities: entities:
required: true required: true
description: "The entities that will show in the card." description: The entities that will show in the card.
type: list type: list
title: title:
required: false required: false
@ -51,7 +50,7 @@ hours_to_show:
default: 24 default: 24
theme: theme:
required: false 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 type: string
{% endconfiguration %} {% 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. Screenshot of the map card.
</p> </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 %} {% configuration %}
type: type:
required: true required: true
description: map description: "`map`"
type: string type: string
entities: entities:
required: true 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. Screenshot of the Markdown card.
</p> </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 %} {% configuration %}
type: type:
required: true required: true
description: markdown description: "`markdown`"
type: string type: string
content: content:
required: true 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." 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: theme:
required: false 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 type: string
{% endconfiguration %} {% endconfiguration %}
@ -86,7 +86,6 @@ card:
{% endraw %} {% endraw %}
A special template variable - `user` is set up for the `content` of the card. It contains the currently logged in user. A special template variable - `user` is set up for the `content` of the card. It contains the currently logged in user.
For example: For example:
@ -103,7 +102,7 @@ content: |
## Icons ## 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: 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. Screenshot of the Media Control card.
</p> </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 %} {% configuration %}
type: type:
required: true required: true
description: media-control description: "`media-control`"
type: string type: string
entity: entity:
required: true required: true
description: "A media player `entity_id`." description: Entity ID of `media_player` domain.
type: string type: string
name: name:
required: false required: false
description: Overwrites friendly name. description: Overwrites friendly name.
type: string type: string
default: Name of Entity default: Name of entity
{% endconfiguration %} {% endconfiguration %}
## Example ## Example

68
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 %} {% configuration %}
type: type:
required: true required: true
description: picture-elements description: "`picture-elements`"
type: string type: string
image: image:
required: true required: true
@ -33,11 +33,11 @@ camera_view:
type: string type: string
elements: elements:
required: true required: true
description: List of elements description: List of elements.
type: list type: list
title: title:
required: false required: false
description: Card title description: Card title.
type: string type: string
state_filter: state_filter:
required: false required: false
@ -45,7 +45,7 @@ state_filter:
type: map type: map
theme: theme:
required: false 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 type: string
dark_mode_image: dark_mode_image:
required: false required: false
@ -79,11 +79,11 @@ This element creates a badge representing the state of an entity.
{% configuration %} {% configuration %}
type: type:
required: true required: true
description: state-badge description: "`state-badge`"
type: string type: string
entity: entity:
required: true required: true
description: Entity id description: Entity ID.
type: string type: string
style: style:
required: true required: true
@ -115,11 +115,11 @@ This element represents an entity state using an icon.
{% configuration %} {% configuration %}
type: type:
required: true required: true
description: state-icon description: "`state-icon`"
type: string type: string
entity: entity:
required: true required: true
description: The entity id to use. description: The entity ID to use.
type: string type: string
icon: icon:
required: false required: false
@ -131,42 +131,42 @@ title:
type: string type: string
state_color: state_color:
required: false 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 type: boolean
default: true default: true
tap_action: tap_action:
required: false required: false
description: Action to take on tap description: Action to take on tap.
type: map type: map
keys: keys:
action: action:
required: true 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 type: string
default: "`more-info`" default: "`more-info`"
navigation_path: navigation_path:
required: false 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 type: string
default: none default: none
url_path: url_path:
required: false 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 type: string
default: none default: none
service: service:
required: false 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 type: string
default: none default: none
service_data: service_data:
required: false 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 type: string
default: none default: none
confirmation: confirmation:
required: false 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] type: [boolean, map]
default: "false" default: "false"
tap_action: tap_action:
@ -195,16 +195,15 @@ This element represents an entity's state via text.
{% configuration %} {% configuration %}
type: type:
required: true required: true
description: state-label description: "`state-label`"
type: string type: string
entity: entity:
required: true required: true
description: Entity id description: Entity ID.
type: string type: string
attribute: attribute:
required: false required: false
description: If present, the corresponding attribute will be shown, description: If present, the corresponding attribute will be shown, instead of the entity's state.
instead of the entity's state
type: string type: string
prefix: prefix:
required: false required: false
@ -244,15 +243,15 @@ This entity creates a button (with arbitrary text) that can be used to call a se
{% configuration %} {% configuration %}
type: type:
required: true required: true
description: service-button description: "`service-button`"
type: string type: string
title: title:
required: true required: true
description: Button label description: Button label.
type: string type: string
service: service:
required: true required: true
description: light.turn_on description: "`light.turn_on`"
type: string type: string
service_data: service_data:
required: false required: false
@ -272,11 +271,11 @@ This element creates a static icon that is not linked to the state of an entity.
{% configuration %} {% configuration %}
type: type:
required: true required: true
description: icon description: "`icon`"
type: string type: string
icon: icon:
required: true required: true
description: "Icon to display (e.g., `mdi:home`)" description: "Icon to display (e.g., `mdi:home`)."
type: string type: string
title: title:
required: false required: false
@ -284,7 +283,7 @@ title:
type: string type: string
entity: entity:
required: false required: false
description: Entity to use for more-info/toggle description: Entity to use for more-info/toggle.
type: string type: string
tap_action: tap_action:
required: false required: false
@ -312,11 +311,11 @@ This creates an image element that overlays the background image.
{% configuration %} {% configuration %}
type: type:
required: true required: true
description: image description: "`image`"
type: string type: string
entity: entity:
required: false 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 type: string
title: title:
required: false required: false
@ -353,7 +352,7 @@ state_image:
type: map type: map
filter: filter:
required: false required: false
description: Default CSS filter description: Default CSS filter.
type: string type: string
state_filter: state_filter:
required: false required: false
@ -361,7 +360,7 @@ state_filter:
type: map type: map
aspect_ratio: aspect_ratio:
required: false required: false
description: Height-width-ratio. description: Height to width ratio.
type: string type: string
default: "50%" default: "50%"
style: style:
@ -378,7 +377,7 @@ Much like the Conditional card, this element will let you show its sub-elements
{% configuration %} {% configuration %}
type: type:
required: true required: true
description: conditional description: "`conditional`"
type: string type: string
conditions: conditions:
required: true required: true
@ -387,7 +386,7 @@ conditions:
keys: keys:
entity: entity:
required: true required: true
description: Home Assistant entity ID. description: Entity ID.
type: string type: string
state: state:
required: false required: false
@ -412,7 +411,7 @@ for more information.
{% configuration %} {% configuration %}
type: type:
required: true 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 type: string
style: style:
required: true required: true
@ -421,13 +420,12 @@ style:
default: "position: absolute, transform: translate(-50%, -50%)" default: "position: absolute, transform: translate(-50%, -50%)"
{% endconfiguration %} {% endconfiguration %}
## Options For Exemptions ## Options For Exemptions
{% configuration badges %} {% configuration badges %}
user: user:
required: true required: true
description: User id that can see the view tab. description: User ID that can see the view tab.
type: string type: string
{% endconfiguration %} {% 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 %} {% configuration %}
type: type:
required: true required: true
description: picture-entity description: "`picture-entity`"
type: string type: string
entity: entity:
required: true required: true
@ -61,7 +61,7 @@ show_state:
default: true default: true
theme: theme:
required: false 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 type: string
tap_action: tap_action:
required: false 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 %} {% configuration %}
type: type:
required: true required: true
description: picture-glance description: "`picture-glance`"
type: string type: string
entities: entities:
required: true required: true
@ -60,12 +60,12 @@ entity:
type: string type: string
show_state: show_state:
required: false required: false
description: Show entity state-text. description: Show entity state text.
type: boolean type: boolean
default: true default: true
theme: theme:
required: false 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 type: string
tap_action: tap_action:
required: false required: false
@ -88,19 +88,19 @@ If you define entities as objects instead of strings, you can add more customiza
{% configuration %} {% configuration %}
entity: entity:
required: true required: true
description: Home Assistant entity ID. description: Entity ID.
type: string type: string
attribute: attribute:
required: false 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 type: string
prefix: prefix:
required: false required: false
description: Prefix to display before the attribute's value description: Prefix to display before the attribute's value.
type: string type: string
suffix: suffix:
required: false required: false
description: Suffix to display after the attribute's value description: Suffix to display after the attribute's value.
type: string type: string
icon: icon:
required: false required: false
@ -108,7 +108,7 @@ icon:
type: string type: string
show_state: show_state:
required: false required: false
description: Show entity state-text. description: Show entity state text.
type: boolean type: boolean
default: true default: true
tap_action: tap_action:
@ -130,7 +130,7 @@ double_tap_action:
{% configuration badges %} {% configuration badges %}
user: user:
required: true required: true
description: User id that can see the view tab. description: User ID that can see the view tab.
type: string type: string
{% endconfiguration %} {% endconfiguration %}

8
source/_lovelace/picture.markdown
View File

@ -14,15 +14,15 @@ Screenshot of the picture card.
{% configuration %} {% configuration %}
type: type:
required: true required: true
description: picture description: "`picture`"
type: string type: string
image: image:
required: true 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 type: string
theme: theme:
required: false 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 type: string
tap_action: tap_action:
required: false required: false
@ -43,7 +43,7 @@ double_tap_action:
{% configuration badges %} {% configuration badges %}
user: user:
required: true required: true
description: User id that can see the view tab. description: User ID that can see the view tab.
type: string type: string
{% endconfiguration %} {% endconfiguration %}

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

@ -20,16 +20,16 @@ type:
type: string type: string
entity: entity:
required: true required: true
description: "Entity ID from `plant` domain" description: Entity ID of `plant` domain.
type: string type: string
name: name:
required: false required: false
description: Overwrites friendly name description: Overwrites friendly name.
type: string type: string
default: Entity Name default: Entity name
theme: theme:
required: false 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 type: string
{% endconfiguration %} {% 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. Screenshot of the sensor card.
</p> </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 %} {% configuration %}
type: type:
required: true required: true
description: sensor description: "`sensor`"
type: string type: string
entity: entity:
required: true required: true
description: Entity id of `sensor` domain description: Entity ID of `sensor` domain.
type: string type: string
icon: icon:
required: false required: false
description: The card icon description: The card icon.
type: string type: string
name: name:
required: false required: false
description: The card name description: The card name.
type: string type: string
graph: graph:
required: false required: false
description: Type of graph `none` or `line` description: Type of graph (`none` or `line`).
type: string type: string
unit: unit:
required: false required: false
description: The unit of measurement description: The unit of measurement.
type: string type: string
detail: detail:
required: false 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 type: integer
default: 1 default: 1
hours_to_show: hours_to_show:
required: false required: false
description: Hours to show in graph description: Hours to show in graph.
type: integer type: integer
default: 24 default: 24
theme: theme:
required: false 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 type: string
{% endconfiguration %} {% 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. Screenshot of the Shopping List card.
</p> </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 "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.
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.
Alternatively, the card can be configured using YAML: Alternatively, the card can be configured using YAML:
@ -25,15 +24,15 @@ type: shopping-list
{% configuration %} {% configuration %}
type: type:
required: true required: true
description: shopping-list description: "`shopping-list`"
type: string type: string
title: title:
required: false required: false
description: Title of Shopping List description: Title of shopping list.
type: string type: string
theme: theme:
required: false 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 type: string
{% endconfiguration %} {% 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. Screenshot of the Thermostat card.
</p> </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 %} {% configuration %}
type: type:
required: true required: true
description: thermostat description: "`thermostat`"
type: string type: string
entity: entity:
required: true required: true
description: Entity id of `climate` domain description: Entity ID of `climate` domain.
type: string type: string
name: name:
required: false required: false
description: Overwrites friendly name. description: Overwrites friendly name.
type: string type: string
default: Name of Entity. default: Name of entity.
theme: theme:
required: false 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 type: string
{% endconfiguration %} {% 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. 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 %} {% configuration %}
type: type:
required: true required: true
description: vertical-stack description: "`vertical-stack`"
type: string type: string
title: title:
required: false required: false
description: Title of Stack description: Title of stack.
type: string type: string
cards: cards:
required: true required: true
@ -23,7 +23,7 @@ cards:
type: list type: list
{% endconfiguration %} {% endconfiguration %}
### Examples ## Examples
Alternatively, the card can be configured using YAML: Alternatively, the card can be configured using YAML:

23
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. Screenshot of the Weather card.
</p> </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. 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
## Card Settings
{% configuration_basic %} {% configuration_basic %}
Entity: Entity:
@ -26,7 +25,7 @@ Show Forecast:
Secondary Info Attribute: 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. 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: 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 %} {% endconfiguration_basic %}
<div class="note"> <div class="note">
@ -37,25 +36,24 @@ Theme:
</div> </div>
### YAML ### 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 %} {% configuration %}
type: type:
required: true required: true
description: weather-forecast description: "`weather-forecast`"
type: string type: string
entity: entity:
required: true required: true
description: "The `entity_id` of the `weather` platform to use." description: Entity ID of `weather` domain.
type: string type: string
name: name:
required: false required: false
description: Overwrites the friendly name. description: Overwrites the friendly name.
type: string type: string
default: Entity Name default: Entity name
show_forecast: show_forecast:
required: false required: false
description: Show next hours/days forecast. 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`. default: Defaults to `extrema` if available, if not available then `precipitation` and if precipitation isn't available then `humidity`.
theme: theme:
required: false 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 type: string
{% endconfiguration %} {% endconfiguration %}
@ -79,10 +77,9 @@ type: weather-forecast
entity: weather.openweathermap entity: weather.openweathermap
``` ```
### Advanced ### 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:
@ -105,7 +102,7 @@ Example theme configuration:
&nbsp; &nbsp;
##### Personal Icons #### Personal Icons
Weather icons can be overwritten with your own personal images via a [theme](/integrations/frontend/#themes). Theme variables include: 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. 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/). 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 %} {% configuration state_label %}
type: type:
required: true required: true
description: state-label description: "`state-label`"
type: string type: string
entity: entity:
required: true required: true
description: Home Assistant entity ID. description: Entity ID.
type: string type: string
name: name:
required: false required: false
description: Overwrites friendly name. description: Overwrites friendly name.
type: string type: string
default: Name of Entity default: Name of entity
icon: icon:
required: false required: false
description: Overwrites icon or entity picture. description: Overwrites icon or entity picture.
type: string type: string
default: Entity Domain Icon default: Entity domain icon
image: image:
required: false required: false
description: The URL of an image. description: The URL of an image.
@ -49,14 +49,14 @@ show_icon:
default: "true" default: "true"
{% endconfiguration %} {% 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. 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 %} {% configuration filter_badge %}
type: type:
required: true required: true
description: entity-filter description: "`entity-filter`"
type: string type: string
entities: entities:
required: true required: true
@ -68,7 +68,7 @@ state_filter:
type: list type: list
{% endconfiguration %} {% 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: 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 type: string
entity: entity:
required: true required: true
description: Home Assistant entity ID. description: Entity ID.
type: string type: string
name: name:
required: false required: false
@ -99,7 +99,7 @@ state_filter:
type: list type: list
{% endconfiguration %} {% 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: 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 type: string
{% endconfiguration %} {% endconfiguration %}
#### Examples ### Examples
Show only active switches or lights in the house 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: You can also add YAML dashboards when your main dashboard is UI configured:
```yaml ```yaml
lovelace: lovelace:
mode: storage mode: storage
@ -329,7 +330,7 @@ If you define `visible` as objects instead of a boolean to specify conditions fo
{% configuration badges %} {% configuration badges %}
user: user:
required: true 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 type: string
{% endconfiguration %} {% endconfiguration %}

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

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