mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-13 20:36:35 +00:00
Lovelace: Add a label entity row (#1779)
* Add a label entity row * Style fixes * Allow blank label text * Rename to section
This commit is contained in:
parent
b068db3f7a
commit
5774d913af
@ -149,10 +149,6 @@ const CONFIGS = [
|
||||
config: `
|
||||
- type: entities
|
||||
entities:
|
||||
- type: weblink
|
||||
url: http://google.com/
|
||||
icon: mdi:google
|
||||
name: Google
|
||||
- type: call-service
|
||||
icon: mdi:power
|
||||
name: Bed light
|
||||
@ -160,6 +156,12 @@ const CONFIGS = [
|
||||
service: light.toggle
|
||||
service_data:
|
||||
entity_id: light.bed_light
|
||||
- type: section
|
||||
label: Links
|
||||
- type: weblink
|
||||
url: http://google.com/
|
||||
icon: mdi:google
|
||||
name: Google
|
||||
- type: divider
|
||||
- type: divider
|
||||
style:
|
||||
|
@ -16,12 +16,18 @@ import "../entity-rows/hui-toggle-entity-row.js";
|
||||
|
||||
import "../special-rows/hui-call-service-row.js";
|
||||
import "../special-rows/hui-divider-row.js";
|
||||
import "../special-rows/hui-section-row.js";
|
||||
import "../special-rows/hui-weblink-row.js";
|
||||
|
||||
import createErrorCardConfig from "./create-error-card-config.js";
|
||||
|
||||
const CUSTOM_TYPE_PREFIX = "custom:";
|
||||
const SPECIAL_TYPES = new Set(["call-service", "divider", "weblink"]);
|
||||
const SPECIAL_TYPES = new Set([
|
||||
"call-service",
|
||||
"divider",
|
||||
"section",
|
||||
"weblink",
|
||||
]);
|
||||
const DOMAIN_TO_ELEMENT_TYPE = {
|
||||
automation: "toggle",
|
||||
climate: "climate",
|
||||
|
53
src/panels/lovelace/special-rows/hui-section-row.js
Normal file
53
src/panels/lovelace/special-rows/hui-section-row.js
Normal file
@ -0,0 +1,53 @@
|
||||
import { html } from "@polymer/polymer/lib/utils/html-tag.js";
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element.js";
|
||||
|
||||
import "../../../components/ha-icon.js";
|
||||
|
||||
class HuiSectionRow extends PolymerElement {
|
||||
static get template() {
|
||||
return html`
|
||||
${this.styleTemplate}
|
||||
<div class=divider></div>
|
||||
<template is="dom-if" if="[[_config.label]]">
|
||||
<div class=label>
|
||||
[[_config.label]]
|
||||
</div>
|
||||
</template>
|
||||
`;
|
||||
}
|
||||
|
||||
static get styleTemplate() {
|
||||
return html`
|
||||
<style>
|
||||
.label {
|
||||
color: var(--primary-color);
|
||||
margin-left: 8px;
|
||||
margin-bottom: 16px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: var(--secondary-text-color);
|
||||
opacity: 0.25;
|
||||
margin-left: -16px;
|
||||
margin-right: -16px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
_config: Object,
|
||||
};
|
||||
}
|
||||
|
||||
setConfig(config) {
|
||||
if (!config) {
|
||||
throw new Error("Error in card configuration.");
|
||||
}
|
||||
this._config = config;
|
||||
}
|
||||
}
|
||||
customElements.define("hui-section-row", HuiSectionRow);
|
Loading…
x
Reference in New Issue
Block a user