174 lines
4.2 KiB
Markdown
174 lines
4.2 KiB
Markdown
# Stock Elements
|
||
|
||
## `conditional`
|
||
|
||
This element will let you show its sub-elements based on entity states. See [Home Assistant elements documentation](https://www.home-assistant.io/dashboards/picture-elements/#conditional-element).
|
||
|
||
```yaml
|
||
elements:
|
||
- type: conditional
|
||
# [...]
|
||
```
|
||
|
||
## `custom`
|
||
|
||
Custom elements provided by a card. See [Home Assistant elements documentation](https://www.home-assistant.io/dashboards/picture-elements/#custom-elements).
|
||
|
||
```yaml
|
||
elements:
|
||
- type: custom
|
||
# [...]
|
||
```
|
||
|
||
?> See [Frigate Card custom elements](../custom//README.md) for the custom elements offered by _this_ card.
|
||
|
||
## `icon`
|
||
|
||
This element creates a static icon that is not linked to the state of an entity. See [Home Assistant elements documentation](https://www.home-assistant.io/dashboards/picture-elements/#icon-element).
|
||
|
||
```yaml
|
||
elements:
|
||
- type: icon
|
||
# [...]
|
||
```
|
||
|
||
## `image`
|
||
|
||
This creates an image element that overlays the background image. See [Home Assistant elements documentation](https://www.home-assistant.io/dashboards/picture-elements/#image-element).
|
||
|
||
```yaml
|
||
elements:
|
||
- type: image
|
||
# [...]
|
||
```
|
||
|
||
## `service-button`
|
||
|
||
This entity creates a button (with arbitrary text) that can be used to call a service. See [Home Assistant elements documentation](https://www.home-assistant.io/dashboards/picture-elements/#service-call-button).
|
||
|
||
```yaml
|
||
elements:
|
||
- type: service-button
|
||
# [...]
|
||
```
|
||
|
||
## `state-badge`
|
||
|
||
This element creates a badge representing the state of an entity. See [Home Assistant elements documentation](https://www.home-assistant.io/dashboards/picture-elements/#state-badge).
|
||
|
||
```yaml
|
||
elements:
|
||
- type: state-badge
|
||
# [...]
|
||
```
|
||
|
||
## `state-icon`
|
||
|
||
This element represents an entity state using an icon. See [Home Assistant elements documentation](https://www.home-assistant.io/dashboards/picture-elements/#state-icon).
|
||
|
||
```yaml
|
||
elements:
|
||
- type: state-icon
|
||
# [...]
|
||
```
|
||
|
||
## `state-label`
|
||
|
||
This element represents an entity’s state via text. See [Home Assistant elements documentation](https://www.home-assistant.io/dashboards/picture-elements/#state-label).
|
||
|
||
```yaml
|
||
elements:
|
||
- type: state-label
|
||
# [...]
|
||
```
|
||
|
||
## Fully expanded reference
|
||
|
||
> [Actions](../../actions/README.md) are omitted for simplicity.
|
||
|
||
[](../../common/expanded-warning.md ':include')
|
||
|
||
Reference: [Home Assistant Picture Elements](https://www.home-assistant.io/dashboards/picture-elements/)
|
||
|
||
```yaml
|
||
elements:
|
||
- type: state-badge
|
||
entity: sensor.kitchen_dining_multisensor_air_temperature
|
||
style:
|
||
left: 100px
|
||
top: 50px
|
||
title: 'Temperature'
|
||
- type: state-icon
|
||
entity: light.office_main_lights
|
||
icon: mdi:lamp
|
||
state_color: true
|
||
style:
|
||
left: 100px
|
||
top: 100px
|
||
- type: state-label
|
||
entity: sensor.kitchen_motion_sensor_battery
|
||
attribute: battery_voltage
|
||
prefix: Volts
|
||
title: Battery Voltage
|
||
style:
|
||
left: 100px
|
||
top: 150px
|
||
- type: state-label
|
||
entity: sensor.kitchen_motion_sensor_battery
|
||
attribute: battery_voltage
|
||
prefix: 'Volts: '
|
||
title: Battery Voltage
|
||
style:
|
||
background-color: black
|
||
left: 100px
|
||
top: 200px
|
||
- type: service-button
|
||
title: Light on
|
||
service: homeassistant.turn_on
|
||
service_data:
|
||
entity: light.office_main_lights
|
||
style:
|
||
left: 100px
|
||
top: 250px
|
||
- type: icon
|
||
icon: mdi:cow
|
||
title: Moo
|
||
style:
|
||
left: 100px
|
||
top: 300px
|
||
- type: image
|
||
entity: light.office_main_lights
|
||
title: Image
|
||
state_image:
|
||
on: 'https://picsum.photos/id/1003/1181/1772'
|
||
off: 'https://picsum.photos/id/102/4320/3240'
|
||
state_filter:
|
||
'on': brightness(110%) saturate(1.2)
|
||
'off': brightness(50%) hue-rotate(45deg)
|
||
style:
|
||
left: 100px
|
||
top: 350px
|
||
height: 50px
|
||
width: 100px
|
||
- type: conditional
|
||
conditions:
|
||
- condition: state
|
||
entity: light.office_main_lights
|
||
state: on
|
||
state_not: off
|
||
- condition: numeric_state
|
||
entity: sensor.light_level
|
||
above: 20
|
||
below: 100
|
||
- condition: user
|
||
users:
|
||
- 581fca7fdc014b8b894519cc531f9a04
|
||
elements:
|
||
- type: icon
|
||
icon: mdi:dog
|
||
title: Woof
|
||
style:
|
||
left: 100px
|
||
top: 400px
|
||
```
|