mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-24 09:46:59 +00:00
state_filter for picture cards (#10442)
This commit is contained in:
parent
a0d2949e4b
commit
3f86c56a20
@ -30,6 +30,10 @@ title:
|
||||
required: false
|
||||
description: Card title
|
||||
type: string
|
||||
state_filter:
|
||||
required: false
|
||||
description: '[State-based CSS filters](#how-to-use-state_filter)'
|
||||
type: map
|
||||
{% endconfiguration %}
|
||||
|
||||
## Elements
|
||||
|
@ -37,6 +37,10 @@ state_image:
|
||||
required: false
|
||||
description: "Map entity states to images (`state: image URL`, check the example below)."
|
||||
type: map
|
||||
state_filter:
|
||||
required: false
|
||||
description: '[State-based CSS filters](#how-to-use-state_filter)'
|
||||
type: map
|
||||
aspect_ratio:
|
||||
required: false
|
||||
description: "Forces the height of the image to be a ratio of the width. You may enter a value such as: `16x9`, `16:9`, `1.78`."
|
||||
@ -117,6 +121,16 @@ hold_action:
|
||||
default: none
|
||||
{% endconfiguration %}
|
||||
|
||||
## How to use state_filter
|
||||
|
||||
Specify different [CSS filters](https://developer.mozilla.org/en-US/docs/Web/CSS/filter)
|
||||
|
||||
```yaml
|
||||
state_filter:
|
||||
"on": brightness(110%) saturate(1.2)
|
||||
"off": brightness(50%) hue-rotate(45deg)
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
Basic example:
|
||||
|
@ -46,6 +46,10 @@ state_image:
|
||||
type: string
|
||||
required: false
|
||||
description: "`state: image-url`, check the example below."
|
||||
state_filter:
|
||||
required: false
|
||||
description: '[State-based CSS filters](#how-to-use-state_filter)'
|
||||
type: map
|
||||
aspect_ratio:
|
||||
required: false
|
||||
description: "Forces the height of the image to be a ratio of the width. You may enter a value such as: `16x9`, `16:9`, `1.78`."
|
||||
@ -131,6 +135,16 @@ icon:
|
||||
type: string
|
||||
{% endconfiguration %}
|
||||
|
||||
## How to use state_filter
|
||||
|
||||
Specify different [CSS filters](https://developer.mozilla.org/en-US/docs/Web/CSS/filter)
|
||||
|
||||
```yaml
|
||||
state_filter:
|
||||
"on": brightness(110%) saturate(1.2)
|
||||
"off": brightness(50%) hue-rotate(45deg)
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
```yaml
|
||||
|
Loading…
x
Reference in New Issue
Block a user