mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-16 05:46:35 +00:00
Add ha-bar to gallery (#10242)
This commit is contained in:
parent
5bc0feacf0
commit
b6c470edf1
85
gallery/src/demos/demo-ha-bar.ts
Normal file
85
gallery/src/demos/demo-ha-bar.ts
Normal file
@ -0,0 +1,85 @@
|
||||
import { html, css, LitElement, TemplateResult } from "lit";
|
||||
import { customElement } from "lit/decorators";
|
||||
import { classMap } from "lit/directives/class-map";
|
||||
import "../../../src/components/ha-bar";
|
||||
import "../../../src/components/ha-card";
|
||||
|
||||
const bars: {
|
||||
min?: number;
|
||||
max?: number;
|
||||
value: number;
|
||||
warning?: number;
|
||||
error?: number;
|
||||
}[] = [
|
||||
{
|
||||
value: 33,
|
||||
},
|
||||
{
|
||||
value: 150,
|
||||
},
|
||||
{
|
||||
min: -10,
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
value: 80,
|
||||
},
|
||||
{
|
||||
value: 200,
|
||||
max: 13,
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
min: 13,
|
||||
},
|
||||
];
|
||||
|
||||
@customElement("demo-ha-bar")
|
||||
export class DemoHaBar extends LitElement {
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
${bars
|
||||
.map((bar) => ({ min: 0, max: 100, warning: 70, error: 90, ...bar }))
|
||||
.map(
|
||||
(bar) => html`
|
||||
<ha-card>
|
||||
<div class="card-content">
|
||||
<pre>Config: ${JSON.stringify(bar)}</pre>
|
||||
<ha-bar
|
||||
class=${classMap({
|
||||
warning: bar.value > bar.warning,
|
||||
error: bar.value > bar.error,
|
||||
})}
|
||||
.min=${bar.min}
|
||||
.max=${bar.max}
|
||||
.value=${bar.value}
|
||||
>
|
||||
</ha-bar>
|
||||
</div>
|
||||
</ha-card>
|
||||
`
|
||||
)}
|
||||
`;
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
ha-card {
|
||||
max-width: 600px;
|
||||
margin: 24px auto;
|
||||
}
|
||||
.warning {
|
||||
--ha-bar-primary-color: var(--warning-color);
|
||||
}
|
||||
.error {
|
||||
--ha-bar-primary-color: var(--error-color);
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"demo-ha-bar": DemoHaBar;
|
||||
}
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user