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-21 16:27:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Lovelace: pic elements add default style (#5876)

Browse Source
This commit is contained in:
c727 2018-07-24 22:42:26 +02:00 committed by Fabian Affolter
parent 15492647ed
commit d66f85e6ba
1 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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%