https://github.com/thomasloven/lovelace-hui-element
🔹 Use built-in elements in the wrong place
https://github.com/thomasloven/lovelace-hui-element
Last synced: 2 days ago
JSON representation
🔹 Use built-in elements in the wrong place
- Host: GitHub
- URL: https://github.com/thomasloven/lovelace-hui-element
- Owner: thomasloven
- License: mit
- Created: 2020-03-25T09:55:04.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-11-22T21:08:49.000Z (over 1 year ago)
- Last Synced: 2025-04-05T08:05:17.793Z (25 days ago)
- Language: TypeScript
- Size: 136 KB
- Stars: 111
- Watchers: 5
- Forks: 7
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# hui-element
[](https://github.com/hacs/integration)
The Lovelace interface for Home Assistant has three types of objects, those are:
**Cards**
Examples include `entities`, `glance`, `vertical-stack`, `gauge`, `media-player`.
**Entity rows**
The individual rows in an entities card. Examples include `section`, `call-service`, `conditional`, `cast`, but also `sensor-entity`, `toggle-entity`, `climate-entity` and several more that a normal user never have to bother with.
**Elements**
The elements used in a picture-elements card. Examples include `state-badge`, `state-label`, `image`.
When you select a `type:` for something, what is loaded will depend on where.
E.g. specifying `type: conditional` in a lovelace view or a stack card will load a conditional card, but specifying `type: conditional` in an entities card will load a conditional entity row.
Sometimes you may want to use things in other places, though. That's where `hui-element` comes in.
## Usage
For installation, updating and debugging instructions [see this guide](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins).
Let's say you want to use the `section` entity row in place of a card.
Normally, a section row configuration may look like:
```yaml
type: section
label: Important things
```
To make it work as a card, change it to:
```yaml
type: custom:hui-element
row_type: section
label: Important things
```
I.e., change `type:` to `row_type:` and add `type: custom:hui-element`.
`hui-element` will then load the correct row and place it wherever you want it.
Similarly, to put a glance card inside an entities card:
```yaml
type: entities
entities:
- light.bed_light
- type: custom:hui-element
card_type: glance
entities:
- light.kitchen_lights
- light.ceiling_lights
```
> Note: In some cases, the internal types may need to be used.
> I.e. to add a media player row as a card, you'd need to specify `row_type: media-player-entity`.
> Note2: It may also work to set `row_type: default` and hui-element will figure out the correct row type by itself.
The correct types to use can be found in the frontend source code for [cards](https://github.com/home-assistant/frontend/blob/dev/src/panels/lovelace/create-element/create-card-element.ts), [entity-rows](https://github.com/home-assistant/frontend/blob/dev/src/panels/lovelace/create-element/create-row-element.ts) and [elements](https://github.com/home-assistant/frontend/blob/dev/src/panels/lovelace/create-element/create-hui-element.ts).
### A note on card-mod
If you are using [card-mod](https://github.com/thomasloven/lovelace-card-mod), `hui-element` will be "transparent".
I.e. styling `hui-element` itself should be as if styling the element inside it.
Ex:
```yaml
- type: entities
entities:
- type: section
label: Default internal styling
card_mod:
style: |
.divider {
background-color: red;
}
- type: custom:hui-element
row_type: section
label: Hui-element internal styling
card_mod:
style: |
.divider {
background-color: green;
}
- type: entities
entities:
- type: section
label: Default styled from card
- type: custom:hui-element
row_type: section
label: Hui-element styled from card
card_mod:
style:
hui-section-row $: |
.divider { background-color: blue; }
hui-element $: |
.divider { background-color: orange;}
```
## FAQ
**Does this replace the `custom:hui-` trick?**
Yes. That's where the name is from.
The `custom:hui-` trick was always a dirty hack that worked by accident rather than design, and since 0.107 it works intermittently at best.
---
