UIX Forge

UIX Forge erzeugt Home-Assistant-Elemente dynamisch. Du definierst eine forge-Konfiguration, ein Ziel-element und optional zusätzliche sparks, die Verhalten oder Darstellung erweitern.

Unterstützt werden die Molds card, badge, row, picture-element, section, footer und card-feature. Cross-Context-Molds erlauben, ein Element in einem anderen Kontext zu verwenden, zum Beispiel eine Karte als Zeile in einer Entities-Karte.

Ab UIX 9.0.0-beta.0 ermöglicht die geschichtete Konfiguration, native Templates des eingebetteten Elements unverändert zu erhalten und darüber eine separate Forge-Konfiguration zu legen. Sie gilt für alle Molds und benötigt keinen visuellen Editor.

Für die vollständige Konfigurationsreferenz siehe Forge-Referenz.

Foundries

Eine Foundry ist eine wiederverwendbare UIX-Forge-Konfiguration. Damit kannst du forge, element und uix einmal definieren und an vielen Stellen wiederverwenden. Ab UIX 9.0.0-beta.0 können Foundries auch element_base bereitstellen; eine aufgelöste Basis aktiviert die geschichtete Konfiguration. element_disabled_paths bleibt ausschließlich lokal an der jeweiligen Forge-Instanz.

Mehr dazu: Foundries

Sparks

Sparks sind optionale Bausteine in forge.sparks. Jeder Spark hat einen type und eigene Optionen.

Verfügbare Sparks:

• 💬 Tooltip - Tooltip an ein Element hängen.
• :material-button-cursor: Button - Button mit Aktionen einfügen.
• 🏷️ Attribute - Attribute hinzufügen, ersetzen oder entfernen.
• ⚡ Event - DOM-Events aufnehmen und als Template-Variablen nutzen.
• ⭐ Tile Icon - ha-tile-icon ergänzen.
• 🛡️ State Badge - Status-Badge einfügen.
• :material-grid: Grid - CSS Grid auf Container anwenden.
• 🔍 Search - Elemente per CSS-Selektor suchen und verändern.
• :material-map: Map - Kartenansicht bewahren sowie Touren, Verlaufsregler und Entity-Filter mit konfigurierbaren Positionen ergänzen.
• :material-lock: Lock - Interaktion per Sperre schützen.
• :material-star-four-points-outline: Overlay Icon - Icon über ein Element legen.
• :material-image-outline: Background - Hintergrundfarbe, Bild, Video oder Kamera einfügen.
• :material-palette: Theme - Theme auf ein Element anwenden.
• Formular - Home-Assistant-Formular mit optionalen Absende- und Leeren-Aktionen.