Add CSS injection through extra_styles
This commit is contained in:
parent
783bb8eb16
commit
84ac418d5c
41
README.md
41
README.md
|
@ -29,6 +29,7 @@ Lovelace Button card for your entities.
|
|||
- [Easy styling options](#easy-styling-options)
|
||||
- [Light entity color variable](#light-entity-color-variable)
|
||||
- [ADVANCED styling options](#advanced-styling-options)
|
||||
- [Injecting CSS with `extra_styles`](#injecting-css-with-extrastyles)
|
||||
- [Custom Fields](#custom-fields)
|
||||
- [Configuration Templates](#configuration-templates)
|
||||
- [General](#general)
|
||||
|
@ -109,6 +110,7 @@ Lovelace Button card for your entities.
|
|||
| `entity_picture` | string | optional | Can be any of `/local/*` file or a URL | Will override the icon/the default entity_picture with your own image. Best is to use a square image. You can also define one per state. Supports templates, see [templates](#templates) |
|
||||
| `units` | string | optional | `Kb/s`, `lux`, ... | Override or define the units to display after the state of the entity. If omitted, it's using the entity's units |
|
||||
| `styles` | object list | optional | | See [styles](#styles) |
|
||||
| `extra_styles` | string | optional | | See [styles](#styles) |
|
||||
| `state` | object list | optional | See [State](#State) | State to use for the color, icon and style of the button. Multiple states can be defined |
|
||||
| `confirmation` | object | optional | See [confirmation](#confirmation) | Display a confirmation popup |
|
||||
| `lock` | object | optional | See [Lock Object](#lock-object) | Displays a lock on the button |
|
||||
|
@ -256,6 +258,7 @@ Those are the configuration fields which support templating:
|
|||
* Else: The function for `value` needs to return a string or a number
|
||||
* All the `custom_fields` (Support also HTML rendering): This needs to return a string or an `` html`<elt></elt>` `` object
|
||||
* All the `styles`: Each entry needs to return a string (See [here](#custom-fields) for some examples)
|
||||
* The `extra_styles` field
|
||||
* Everything field in `*_action`
|
||||
* The confirmation text (`confirmation.text`)
|
||||
* The lock being enabled or not (`lock.enabled`)
|
||||
|
@ -429,6 +432,44 @@ Some examples:
|
|||
- filter: grayscale(100%)
|
||||
```
|
||||
|
||||
#### Injecting CSS with `extra_styles`
|
||||
|
||||
You can inject any CSS style you want using this config option. It is usefull if you want to inject CSS animations for example. This field supports [templates](#templates).
|
||||
|
||||
An example is better than words:
|
||||
|
||||
![change_background](examples/loop_background.gif)
|
||||
|
||||
```yaml
|
||||
- type: custom:button-card
|
||||
name: Change Background
|
||||
aspect_ratio: 2/1
|
||||
extra_styles: |
|
||||
@keyframes bgswap1 {
|
||||
0% {
|
||||
background-image: url("/local/background1.jpg");
|
||||
}
|
||||
25% {
|
||||
background-image: url("/local/background1.jpg");
|
||||
}
|
||||
50% {
|
||||
background-image: url("/local/background2.jpg");
|
||||
}
|
||||
75% {
|
||||
background-image: url("/local/background2.jpg");
|
||||
}
|
||||
100% {
|
||||
background-image: url("/local/background1.jpg");
|
||||
}
|
||||
}
|
||||
styles:
|
||||
card:
|
||||
- animation: bgswap1 10s linear infinite
|
||||
- background-size: cover
|
||||
name:
|
||||
- color: white
|
||||
```
|
||||
|
||||
### Custom Fields
|
||||
|
||||
Custom fields support, using the `custom_fields` object, enables you to create your own fields on top of the pre-defined ones (name, state, label and icon).
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 6.9 MiB |
|
@ -673,7 +673,10 @@ class ButtonCard extends LitElement {
|
|||
this.style.setProperty('--button-card-light-color-no-temperature', this._getColorForLightEntity(this._stateObj, false));
|
||||
lockStyle = { ...lockStyle, ...lockStyleFromConfig };
|
||||
|
||||
const extraStyles = document.createElement('style');
|
||||
extraStyles.innerHTML = this.config!.extra_styles ? this._getTemplateOrValue(this._stateObj, this.config!.extra_styles) : '';
|
||||
return html`
|
||||
${extraStyles}
|
||||
<div style="position: relative;">
|
||||
<div id="aspect-ratio" style=${styleMap(aspectRatio)}>
|
||||
<ha-card
|
||||
|
|
|
@ -36,6 +36,7 @@ export interface ButtonCardConfig {
|
|||
color_off: string;
|
||||
custom_fields?: CustomFields;
|
||||
variables?: Variables;
|
||||
extra_styles?: string;
|
||||
}
|
||||
|
||||
export type Layout = 'vertical'
|
||||
|
|
Loading…
Reference in New Issue