diff --git a/src/panels/lovelace/cards/hui-area-card.ts b/src/panels/lovelace/cards/hui-area-card.ts index 0b390386b0..08a2ae90b1 100644 --- a/src/panels/lovelace/cards/hui-area-card.ts +++ b/src/panels/lovelace/cards/hui-area-card.ts @@ -423,6 +423,8 @@ export class HuiAreaCard const ignoreAspectRatio = this.layout === "grid"; + const showName = this._config.show_name !== false; + return html`
-
${area.name}
+ ${showName ? html`
${area.name}
` : ""} ${sensors.length ? html`
${sensors}
` : ""} diff --git a/src/panels/lovelace/editor/config-elements/hui-area-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-area-card-editor.ts index 7248d9fdc3..fbd8e1244b 100644 --- a/src/panels/lovelace/editor/config-elements/hui-area-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-area-card-editor.ts @@ -38,6 +38,7 @@ const cardConfigStruct = assign( aspect_ratio: optional(string()), alert_classes: optional(array(string())), sensor_classes: optional(array(string())), + show_name: optional(boolean()), }) ); @@ -61,7 +62,14 @@ export class HuiAreaCardEditor ) => [ { name: "area", selector: { area: {} } }, - { name: "show_camera", required: false, selector: { boolean: {} } }, + { + name: "", + type: "grid", + schema: [ + { name: "show_name", selector: { boolean: {} }, default: true }, + { name: "show_camera", required: false, selector: { boolean: {} } }, + ], + }, ...(showCamera ? ([ { @@ -260,6 +268,10 @@ export class HuiAreaCardEditor schema: SchemaUnion> ) => { switch (schema.name) { + case "show_name": + return this.hass!.localize( + "ui.panel.lovelace.editor.card.generic.show_name" + ); case "theme": return `${this.hass!.localize( "ui.panel.lovelace.editor.card.generic.theme"