mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-16 13:56:53 +00:00
Lovelace: pic elements add default style (#5876)
This commit is contained in:
parent
15492647ed
commit
d66f85e6ba
@ -55,6 +55,7 @@ style:
|
||||
required: true
|
||||
description: Position and style the element using CSS.
|
||||
type: object
|
||||
default: "position: absolute, transform: translate(-50%, -50%)"
|
||||
{% endconfiguration %}
|
||||
|
||||
### {% linkable_title Icon representing an entity state %}
|
||||
@ -89,6 +90,7 @@ style:
|
||||
required: true
|
||||
description: Position and style the element using CSS.
|
||||
type: object
|
||||
default: "position: absolute, transform: translate(-50%, -50%)"
|
||||
{% endconfiguration %}
|
||||
|
||||
### {% linkable_title Label with state text %}
|
||||
@ -123,6 +125,7 @@ style:
|
||||
required: true
|
||||
description: Position and style the element using CSS.
|
||||
type: object
|
||||
default: "position: absolute, transform: translate(-50%, -50%)"
|
||||
{% endconfiguration %}
|
||||
|
||||
### {% linkable_title Service Call Button %}
|
||||
@ -148,6 +151,7 @@ style:
|
||||
required: true
|
||||
description: Position and style the element using CSS.
|
||||
type: object
|
||||
default: "position: absolute, transform: translate(-50%, -50%)"
|
||||
{% endconfiguration %}
|
||||
|
||||
### {% linkable_title Icon Element %}
|
||||
@ -190,6 +194,7 @@ style:
|
||||
required: true
|
||||
description: Position and style the element using CSS.
|
||||
type: object
|
||||
default: "position: absolute, transform: translate(-50%, -50%)"
|
||||
{% endconfiguration %}
|
||||
|
||||
### {% linkable_title Image Element %}
|
||||
@ -201,7 +206,7 @@ type:
|
||||
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
|
||||
tap_action:
|
||||
required: false
|
||||
@ -232,7 +237,7 @@ state_image:
|
||||
required: false
|
||||
description: '[State-based images](#how-to-use-state_image)'
|
||||
type: object
|
||||
filter:
|
||||
filter:
|
||||
required: false
|
||||
description: Default CSS filter
|
||||
type: string
|
||||
@ -244,6 +249,7 @@ style:
|
||||
required: true
|
||||
description: Position and style the element using CSS.
|
||||
type: object
|
||||
default: "position: absolute, transform: translate(-50%, -50%)"
|
||||
{% endconfiguration %}
|
||||
|
||||
### {% linkable_title Custom Elements %}
|
||||
@ -257,10 +263,11 @@ style:
|
||||
required: true
|
||||
description: Position and style the element using CSS.
|
||||
type: object
|
||||
{% endconfiguration %}
|
||||
default: "position: absolute, transform: translate(-50%, -50%)"
|
||||
{% endconfiguration %}
|
||||
|
||||
The process for creating and referencing custom elements is the same as for custom cards.
|
||||
Please see the [developer docs on creating custom cards](https://developers.home-assistant.io/docs/en/lovelace_custom_card.html)
|
||||
The process for creating and referencing custom elements is the same as for custom cards.
|
||||
Please see the [developer docs on creating custom cards](https://developers.home-assistant.io/docs/en/lovelace_custom_card.html)
|
||||
for more information.
|
||||
|
||||
## {% linkable_title How to use the style object %}
|
||||
@ -291,7 +298,7 @@ state_image:
|
||||
Specify different [CSS filters](https://developer.mozilla.org/en-US/docs/Web/CSS/filter)
|
||||
|
||||
```yaml
|
||||
state_filter:
|
||||
state_filter:
|
||||
"on": brightness(110%) saturate(1.2)
|
||||
"off": brightness(50%) hue-rotate(45deg)
|
||||
```
|
||||
@ -333,7 +340,7 @@ state_filter:
|
||||
navigation_path: /lovelace/0
|
||||
style:
|
||||
top: 10%
|
||||
left: 10%
|
||||
left: 10%
|
||||
```
|
||||
|
||||
## {% linkable_title Images Example %}
|
||||
@ -347,12 +354,12 @@ state_filter:
|
||||
entity: light.living_room
|
||||
tap_action: toggle
|
||||
image: /local/living_room.png
|
||||
state_image:
|
||||
state_image:
|
||||
"off": /local/living_room_off.png
|
||||
filter: saturate(.8)
|
||||
state_filter:
|
||||
"on": brightness(120%) saturate(1.2)
|
||||
style:
|
||||
style:
|
||||
top: 25%
|
||||
left: 75%
|
||||
width: 15%
|
||||
@ -360,7 +367,7 @@ state_filter:
|
||||
- type: image
|
||||
entity: camera.driveway_camera
|
||||
camera_image: camera.driveway_camera
|
||||
style:
|
||||
style:
|
||||
top: 5%
|
||||
left: 10%
|
||||
width: 10%
|
||||
|
Loading…
x
Reference in New Issue
Block a user