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:
Thomas Lovén 2018-10-16 16:50:41 +02:00 committed by Paulus Schoutsen
parent b068db3f7a
commit 5774d913af
3 changed files with 66 additions and 5 deletions

View File

@ -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:

View File

@ -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",

View 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);