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-17 22:36:51 +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 required: true
description: Position and style the element using CSS. description: Position and style the element using CSS.
type: object type: object
default: "position: absolute, transform: translate(-50%, -50%)"
{% endconfiguration %} {% endconfiguration %}
### {% linkable_title Icon representing an entity state %} ### {% linkable_title Icon representing an entity state %}
@ -89,6 +90,7 @@ style:
required: true required: true
description: Position and style the element using CSS. description: Position and style the element using CSS.
type: object type: object
default: "position: absolute, transform: translate(-50%, -50%)"
{% endconfiguration %} {% endconfiguration %}
### {% linkable_title Label with state text %} ### {% linkable_title Label with state text %}
@ -123,6 +125,7 @@ style:
required: true required: true
description: Position and style the element using CSS. description: Position and style the element using CSS.
type: object type: object
default: "position: absolute, transform: translate(-50%, -50%)"
{% endconfiguration %} {% endconfiguration %}
### {% linkable_title Service Call Button %} ### {% linkable_title Service Call Button %}
@ -148,6 +151,7 @@ style:
required: true required: true
description: Position and style the element using CSS. description: Position and style the element using CSS.
type: object type: object
default: "position: absolute, transform: translate(-50%, -50%)"
{% endconfiguration %} {% endconfiguration %}
### {% linkable_title Icon Element %} ### {% linkable_title Icon Element %}
@ -190,6 +194,7 @@ style:
required: true required: true
description: Position and style the element using CSS. description: Position and style the element using CSS.
type: object type: object
default: "position: absolute, transform: translate(-50%, -50%)"
{% endconfiguration %} {% endconfiguration %}
### {% linkable_title Image Element %} ### {% linkable_title Image Element %}
@ -201,7 +206,7 @@ type:
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
tap_action: tap_action:
required: false required: false
@ -232,7 +237,7 @@ state_image:
required: false required: false
description: '[State-based images](#how-to-use-state_image)' description: '[State-based images](#how-to-use-state_image)'
type: object type: object
filter: filter:
required: false required: false
description: Default CSS filter description: Default CSS filter
type: string type: string
@ -244,6 +249,7 @@ style:
required: true required: true
description: Position and style the element using CSS. description: Position and style the element using CSS.
type: object type: object
default: "position: absolute, transform: translate(-50%, -50%)"
{% endconfiguration %} {% endconfiguration %}
### {% linkable_title Custom Elements %} ### {% linkable_title Custom Elements %}
@ -257,10 +263,11 @@ style:
required: true required: true
description: Position and style the element using CSS. description: Position and style the element using CSS.
type: object 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. 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) Please see the [developer docs on creating custom cards](https://developers.home-assistant.io/docs/en/lovelace_custom_card.html)
for more information. for more information.
## {% linkable_title How to use the style object %} ## {% 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) Specify different [CSS filters](https://developer.mozilla.org/en-US/docs/Web/CSS/filter)
```yaml ```yaml
state_filter: state_filter:
"on": brightness(110%) saturate(1.2) "on": brightness(110%) saturate(1.2)
"off": brightness(50%) hue-rotate(45deg) "off": brightness(50%) hue-rotate(45deg)
``` ```
@ -333,7 +340,7 @@ state_filter:
navigation_path: /lovelace/0 navigation_path: /lovelace/0
style: style:
top: 10% top: 10%
left: 10% left: 10%
``` ```
## {% linkable_title Images Example %} ## {% linkable_title Images Example %}
@ -347,12 +354,12 @@ state_filter:
entity: light.living_room entity: light.living_room
tap_action: toggle tap_action: toggle
image: /local/living_room.png image: /local/living_room.png
state_image: state_image:
"off": /local/living_room_off.png "off": /local/living_room_off.png
filter: saturate(.8) filter: saturate(.8)
state_filter: state_filter:
"on": brightness(120%) saturate(1.2) "on": brightness(120%) saturate(1.2)
style: style:
top: 25% top: 25%
left: 75% left: 75%
width: 15% width: 15%
@ -360,7 +367,7 @@ state_filter:
- type: image - type: image
entity: camera.driveway_camera entity: camera.driveway_camera
camera_image: camera.driveway_camera camera_image: camera.driveway_camera
style: style:
top: 5% top: 5%
left: 10% left: 10%
width: 10% width: 10%