/
4_templates.yaml
125 lines (121 loc) 路 3.28 KB
/
4_templates.yaml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
x-anchors:
desc: &desc
type: markdown
card_mod:
style:
ha-markdown$: |
code {
font-size: 8pt !important;
line-height: normal;
white-space: pre-wrap;
}
title: Templates
cards:
- type: vertical-stack
cards:
- <<: *desc
content: |
## 1: State based style
Teal background when Bed Light is on
Purple background when Bed Light is off
{% raw %}
```
card_mod
style: |
ha-card {
background:
{% if is_state('light.bed_light', 'on') %}
teal
{% else %}
purple
{% endif %}
;
}
```
{% endraw %}
- type: entities
show_header_toggle: false
entities:
- light.bed_light
- light.ceiling_lights
- light.kitchen_lights
card_mod:
style: |
ha-card {
background:
{% if is_state('light.bed_light', 'on') %}
teal
{% else %}
purple
{% endif %}
;
}
- type: vertical-stack
cards:
- <<: *desc
content: |
## 2: Dynamic background
Card background follows selected value
{%raw%}
```
card_mod:
style: |
ha-card {
background: url(https://place{{ states('input_select.background') }}.com/g/600/400);
}
```
{%endraw%}
- type: entities
show_header_toggle: false
entities:
- input_select.background
- light.bed_light
- light.ceiling_lights
- light.kitchen_lights
card_mod:
style: |
ha-card {
background: url(https://place{{ states('input_select.background') }}.com/g/600/400);
}
- type: vertical-stack
cards:
- <<: *desc
content: |
## 3: Dynamic styling of elements
Position of light bulb setable by sliders below.
Set a css variable using card-mod and then use that to place the element
{%raw%}
```
type: picture-elements
card_mod:
style: |
ha-card {
--left-pos: {{states('input_number.x_pos')}}%;
--top-pos: {{states('input_number.y_pos')}}%;
}
elements:
- type: state-icon
entity: light.bed_light
style:
top: var(--top-pos)
left: var(--left-pos)
```
{%endraw%}
- type: picture-elements
image: https://placekitten.com/g/600/400
elements:
- type: state-icon
entity: light.bed_light
style:
top: var(--top-pos)
left: var(--left-pos)
card_mod:
style: |
ha-card {
--left-pos: {{states('input_number.x_pos')}}%;
--top-pos: {{states('input_number.y_pos')}}%;
}
- type: entities
entities:
- input_number.x_pos
- input_number.y_pos