diff --git a/gallery/src/demos/demo-hui-entities-card.js b/gallery/src/demos/demo-hui-entities-card.js index bee6f72b50..ebf5e19361 100644 --- a/gallery/src/demos/demo-hui-entities-card.js +++ b/gallery/src/demos/demo-hui-entities-card.js @@ -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: diff --git a/src/panels/lovelace/common/create-row-element.js b/src/panels/lovelace/common/create-row-element.js index db4beacdae..eaff2bdce1 100644 --- a/src/panels/lovelace/common/create-row-element.js +++ b/src/panels/lovelace/common/create-row-element.js @@ -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", diff --git a/src/panels/lovelace/special-rows/hui-section-row.js b/src/panels/lovelace/special-rows/hui-section-row.js new file mode 100644 index 0000000000..97f1690fad --- /dev/null +++ b/src/panels/lovelace/special-rows/hui-section-row.js @@ -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} +
+ + `; + } + + static get styleTemplate() { + return html` + + `; + } + + 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);