Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-12-20 02:38:53 +00:00
Code Activity

Add icons to tabs

Browse Source
This commit is contained in:
Aidan Timson
2025-12-11 14:41:55 +00:00
parent 253b49871e
commit ffcb285654
1 changed files with 14 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/ha-tab.ts
View File

@@ -21,7 +21,7 @@ export class HaTab extends LitElement {
aria-label=${ifDefined(this.name)} aria-label=${ifDefined(this.name)}
@keydown=${this._handleKeyDown} @keydown=${this._handleKeyDown}
> >
${this.narrow ? html`<slot name="icon"></slot>` : ""} <slot name="icon"></slot>
<span class="name">${this.name}</span> <span class="name">${this.name}</span>
<ha-ripple></ha-ripple> <ha-ripple></ha-ripple>
</div> </div>
@@ -50,6 +50,11 @@ export class HaTab extends LitElement {
outline: none; outline: none;
} }
:host(:not([narrow])) div {
flex-direction: row;
gap: var(--ha-space-2);
}
.name { .name {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@@ -76,6 +81,14 @@ export class HaTab extends LitElement {
padding: 0 4px; padding: 0 4px;
} }
::slotted([slot="icon"]) {
margin-bottom: var(--ha-space-1);
}
:host(:not([narrow])) ::slotted([slot="icon"]) {
margin-bottom: 0;
}
div:focus-visible:before { div:focus-visible:before {
position: absolute; position: absolute;
display: block; display: block;