You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
| layout | string | vertical | Layout of card. Default is horizontal on cover entities. [Beautiful illustration of different layouts](#layouts)|
26
25
| icon | string/object | "lightbulb-outline" | The icon to use. Can be an object like in the example. |
27
26
| label | string/object | "entity.friendly_name" | The label text. Can be an object like the icon. Holds text, show and actions |
28
-
| slider | object |[Default slider config](/docs/cards/slider-v2.md)| The icon to use. Can be an object like in the example. |
29
-
| styles | object |[Default styles](#default-styles)| Style each component used in the card. |
27
+
| buttons | object | depends on entity type | This is the list of buttons and their config like tap_action etc. You can create as many or few buttons as you desire and have room for in your setup. Just create a 'button'+N where N is anything unique. The key names for the buttons does not matter. So you can just use 'button0', 'button1' and so on. |
28
+
| stats | object | depends on entity type | This is a static container that can be used to display a statistic in the top right corner. Default for light is brightness % otherwise it's entity state. You can give the stats container actions like any other component. |
29
+
| camera | string | Nothing | This can be set as a camera entity and then it can display the stream in the stats container. Only used with locks. |
30
+
| slider | object |[Slider config](/docs/cards/slider-v2.md)| Config for slider inside card. Look at available config keys in readme. Only extra key here is 'show': true/false |
31
+
| seekbar | object |[Slider config](/docs/cards/slider-v2.md)| Just another slider config with extra key 'show', but only used for media_player seekbars |
32
+
| styles | object |[Button styles](/src/cards/styles/my-button.styles.ts)| Default harcoded styles. For dynamic styles you can inspect the DOM to find css key to style or reference 'initializeStyles' function in [my-button.ts](/src/cards/my-button.ts)|
@@ -42,6 +103,39 @@ It is completely customizable now and fully templatable. But is still very much
42
103
action: toggle
43
104
hold_action:
44
105
action: more-info
106
+
stats:
107
+
show: true
108
+
text: 'Your custom text, can be templated'
109
+
styles:
110
+
container:
111
+
- border-radius: '12px'
112
+
camera:
113
+
- border: '1px solid red'
114
+
buttons:
115
+
show: true
116
+
vertical: false
117
+
button0:
118
+
show: true
119
+
text: 'B1'
120
+
icon: 'mdi:power'
121
+
styles:
122
+
text:
123
+
- color: 'black'
124
+
icon:
125
+
- color: 'orange'
126
+
tap_action:
127
+
action: toggle
128
+
slider:
129
+
show: true
130
+
vertical: true
131
+
styles:
132
+
card:
133
+
- background: 'orange'
134
+
seekbar:
135
+
show: true
136
+
styles:
137
+
card:
138
+
- background: 'purple'
45
139
styles:
46
140
card:
47
141
- background: rgba(230, 230, 230, 0.5)
@@ -59,66 +153,76 @@ It is completely customizable now and fully templatable. But is still very much
59
153
action: more-info
60
154
```
61
155
156
+
## Styling configs
157
+
It is possible to nest the styles to give a better overview of the yaml. So with the slider, it is possible to nest all the styles in the slider object like you would when using the slider card by itself.
158
+
Likewise, it is possible to style the buttonsContainer, buttons, text and icon for the new buttons directly in the buttons->styles object.
159
+
The same with the label and stats.
160
+
When doing it nested, the names are a little different since we dont need to specify sliderContainer, now we can just style the 'container' in the slider->styles.
62
161
63
-
### Default Styles:
64
162
```yaml
65
-
styles:
66
-
card:
67
-
- height: '125px'
68
-
- width: '100%'
69
-
- min-width: 'fit-content'
70
-
- background: 'var(--card-background-color)'
71
-
icon:
72
-
- height: '35px'
73
-
- width: '35px'
74
-
- display: 'inline-block'
75
-
- padding: '10px 10px 10px 10px'
76
-
- cursor: 'pointer'
77
-
- color: 'var(--paper-item-active-icon-color)'
78
-
labelWrapper:
79
-
- width: '100%'
80
-
- height: '100%'
81
-
- display: 'flex'
82
-
label:
83
-
- padding: '0'
84
-
- margin: '0 10px'
85
-
- color: 'var(--primary-text-color)'
86
-
- font-weight: 'bold'
87
-
container:
88
-
- padding: '0'
89
-
- margin: '0'
90
-
- display: 'flex'
91
-
- flex-flow: 'column'
92
-
- height: '100%'
93
-
row1:
94
-
- flex: '0 1 auto'
95
-
row2:
96
-
- flex: '1 1 auto'
97
-
row3:
98
-
- flex: '0 1 auto'
99
-
- margin: '0 2px 2px 2px'
100
-
containerColumn:
101
-
- padding: '0'
102
-
- margin: '0'
103
-
- display: 'flex'
104
-
- flex-flow: 'row'
105
-
- height: '100%'
106
-
column1:
107
-
- flex: '1'
108
-
column2:
109
-
- flex: '0'
110
-
- padding: '3px 3px 3px 0'
111
-
```
163
+
'Styles can be set on the background of the track by setting it from the styles config in the root:'
164
+
- type: horizontal-stack
165
+
cards:
166
+
- type: custom:my-button
167
+
entity: lock.front_door
168
+
label:
169
+
text: Front Door
170
+
extra: Smaller label under
171
+
camera: camera.front_door_cam
172
+
slider:
173
+
show: true
174
+
styles:
175
+
sliderTrack:
176
+
- background: rgba(255, 0, 0, 0.5)
112
177
113
-
## Layouts
114
-
Here you see an illustration of where the different elements are so you can better style them. With the default styles above, you should be able to figure out what and where things go.
115
-
I will add more layout options as we go, also are more freestyle layout where you will just have the card and then everything in the root of that to put wherever you want. I'm not good with css, so if anyone has good ideas to layouts I should implement. Then please let me know.
178
+
'Or by setting it in the track directly on the slider:'
'If using the buttons, you can set individual styling for each button. Or set a default for all of them and specify a specific style for one of them:'
192
+
- type: custom:my-button
193
+
entity: lock.front_door
194
+
label:
195
+
text: Front Door
196
+
extra: Smaller label under
197
+
camera: camera.front_door_cam
198
+
buttons:
199
+
show: true
200
+
vertical: true
201
+
button0:
202
+
show: true
203
+
icon: mdi:lock
204
+
tap_action:
205
+
action: more-info
206
+
styles:
207
+
container:
208
+
- background: rgba(0, 0, 255, 0.5)
209
+
button1:
210
+
show: true
211
+
icon: mdi:lock-open
212
+
tap_action:
213
+
action: more-info
214
+
styles:
215
+
button:
216
+
- background: rgba(255, 0, 0, 0.5)
217
+
slider:
218
+
show: true
219
+
styles:
220
+
track:
221
+
- background: rgba(255, 0, 0, 0.5)
222
+
styles:
223
+
sliderTrack:
224
+
- background: rgba(255, 0, 0, 0.5)
225
+
```
118
226
119
-
- **row1** will fit content inside
120
-
- **row2** will fill the remaining space between row1 and 2
121
-
- **row3** will fit content inside (On horizontal layout, this is empty so row2 technically fills all remaining space.)
122
-
- label will fit text
123
-
- labelWrapper will fill full space
124
-
- slider will use all default options from that card. Some styles are set here if it's vertical/cover etc.
227
+
## Layouts
228
+
The illustration the button card is outdated and might still change further. So I will postpone creating another until I am certain that is the final layout of the card. Though I am pretty sure the one it currently has is going to be the final.
| step | string | "1" | Number of steps to take (For input number, if step is not specified, it will use step from attributes.) (For media_player, if step is not specified it will step by 0.01. (It will actually step by 1, but it will convert 27 to 0.27. So if you set a custom step, set it between 0 and 100.)) |
31
-
| colorMode | string | brightness | Can be brightness, temperature, hue, saturation |
32
-
| coverMode | string | position | Can be position or tilt |
30
+
| colorMode (Deprecated: Use 'mode' instead) | string | brightness | Can be brightness, temperature, hue, saturation |
31
+
| coverMode (Deprecated: Use 'mode' instead) | string | position | Can be position or tilt |
32
+
| mode | string | cover:position, light:brightness| Can be position, tilt, brightness, temperature, hue, saturation, volume & seekbar |
33
33
| vertical | boolean | false | This will set the slider to be vertical and handled from bottom to top. Default on covers |
34
34
| flipped | boolean | false | This will just flip the slider to go from right to left or top to bottom. Default on covers |
35
35
| inverse | boolean | false | Will inverse how far the slider has progressed compared to value. so if brightness is 75%, then it will only be 25% progressed. This is useful for cover, where it is Default. |
@@ -44,7 +44,8 @@ It is completely customizable now and fully templatable.
44
44
| maxThreshold | number | 75 | Only used to determine how far users have to slide to activate toggle commands for switch and lock |
45
45
| min | number | 0 | Minimum value you can set the entity state |
46
46
| max | number | 100 | Maximum value you can set the entity state |
47
-
| styles | object |[Default styles](#default-styles)| Style each component used in the card. |
47
+
| sliderMin | number | 0 | The minimum percentage progress to show always |
48
+
| styles | object |[Default styles](/src/cards/styles/my-slider.styles.ts)| Style each component used in the card. |
48
49
49
50
50
51
## Examples
@@ -110,34 +111,4 @@ It is completely customizable now and fully templatable.
0 commit comments