jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-28 11:46:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve ha-spinner gallery docs (#25369)

Browse Source
This commit is contained in:
Wendelin 2025-05-08 14:50:03 +02:00 committed by GitHub
parent e1b099e88b
commit cea0ac02fe
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 56 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
gallery/src/pages/components/ha-spinner.ts
View File

@ -1,6 +1,7 @@
import type { TemplateResult } from "lit"; import type { TemplateResult } from "lit";
import { html, css, LitElement } from "lit"; import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
import "../../../../src/components/ha-bar"; import "../../../../src/components/ha-bar";
import "../../../../src/components/ha-card"; import "../../../../src/components/ha-card";
import "../../../../src/components/ha-spinner"; import "../../../../src/components/ha-spinner";
@ -11,29 +12,66 @@ export class DemoHaSpinner extends LitElement {
@property({ attribute: false }) hass!: HomeAssistant; @property({ attribute: false }) hass!: HomeAssistant;
protected render(): TemplateResult { protected render(): TemplateResult {
return html`<ha-card header="Basic spinner"> return html`
<div class="card-content"> ${["light", "dark"].map(
<ha-spinner></ha-spinner></div (mode) => html`
></ha-card> <div class=${mode}>
<ha-card header="Different spinner sizes"> <ha-card header="ha-badge ${mode} demo">
<div class="card-content"> <div class="card-content">
<ha-spinner></ha-spinner>
<ha-spinner size="tiny"></ha-spinner> <ha-spinner size="tiny"></ha-spinner>
<ha-spinner size="small"></ha-spinner> <ha-spinner size="small"></ha-spinner>
<ha-spinner size="medium"></ha-spinner> <ha-spinner size="medium"></ha-spinner>
<ha-spinner size="large"></ha-spinner></div <ha-spinner size="large"></ha-spinner>
></ha-card>
<ha-card header="Spinner with an aria-label">
<div class="card-content">
<ha-spinner aria-label="Doing something..."></ha-spinner> <ha-spinner aria-label="Doing something..."></ha-spinner>
<ha-spinner .ariaLabel=${"Doing something..."}></ha-spinner></div <ha-spinner .ariaLabel=${"Doing something..."}></ha-spinner>
></ha-card>`; </div>
</ha-card>
</div>
`
)}
`;
}
firstUpdated(changedProps) {
super.firstUpdated(changedProps);
applyThemesOnElement(
this.shadowRoot!.querySelector(".dark"),
{
default_theme: "default",
default_dark_theme: "default",
themes: {},
darkMode: true,
theme: "default",
},
undefined,
undefined,
true
);
} }
static styles = css` static styles = css`
:host {
display: flex;
justify-content: center;
}
.dark,
.light {
display: block;
background-color: var(--primary-background-color);
padding: 0 50px;
margin: 16px;
border-radius: 8px;
}
ha-card { ha-card {
max-width: 600px;
margin: 24px auto; margin: 24px auto;
} }
.card-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
`; `;
} }