jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-08-10 09:57:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

add controll to demo

Browse Source
This commit is contained in:
Ludeeus
2021-10-26 12:04:48 +00:00
parent c5ffb4cb4e
commit 37a970f195
1 changed files with 51 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
gallery/src/demos/demo-ha-chip.ts
View File

@@ -1,6 +1,8 @@
import "../../../src/components/ha-switch";
import "../../../src/components/ha-formfield";
import { mdiClose, mdiHomeAssistant } from "@mdi/js";
import { css, html, LitElement, TemplateResult } from "lit";
import { customElement } from "lit/decorators";
import { customElement, state } from "lit/decorators";
import "../../../src/components/ha-card";
import "../../../src/components/ha-chip";
import "../../../src/components/ha-chip-set";
@@ -42,53 +44,66 @@ const chips: HaChipSetItem[] = [
@customElement("demo-ha-chip")
export class DemoHaChip extends LitElement {
@state() standaloneIsDisabled = false;
@state() standaloneIsOutlined = false;
protected render(): TemplateResult {
return html`
<div class="filters">
<ha-formfield label="Disable standalone chips">
<ha-switch @change=${this._toggleDisable}></ha-switch>
</ha-formfield>
<ha-formfield label="Outline standalone chips">
<ha-switch @change=${this._toggleOutline}></ha-switch>
</ha-formfield>
</div>
<ha-card header="Standalone ha-chip demo">
<div class="card-content">
<div class="standalone">
<span>Simple:</span>
<ha-chip>Demo chip</ha-chip>
</div>
<div class="standalone">
<span>Simple (outline):</span>
<ha-chip outline>Demo chip</ha-chip>
<ha-chip
.outline=${this.standaloneIsOutlined}
?disabled=${this.standaloneIsDisabled}
>Demo chip</ha-chip
>
</div>
<div class="standalone">
<span>Label property:</span>
<ha-chip label="Demo chip"></ha-chip>
</div>
<div class="standalone">
<span>Label property (outline):</span>
<ha-chip outline label="Demo chip"></ha-chip>
<ha-chip
.outline=${this.standaloneIsOutlined}
?disabled=${this.standaloneIsDisabled}
label="Demo chip"
></ha-chip>
</div>
<div class="standalone">
<span>With leadingIcon:</span>
<ha-chip .leadingIcon=${mdiHomeAssistant}>Demo chip</ha-chip>
</div>
<div class="standalone">
<span>With leadingIcon (outline):</span>
<ha-chip .leadingIcon=${mdiHomeAssistant} outline
<ha-chip
.leadingIcon=${mdiHomeAssistant}
.outline=${this.standaloneIsOutlined}
?disabled=${this.standaloneIsDisabled}
>Demo chip</ha-chip
>
</div>
<div class="standalone">
<span>With trailingIcon property:</span>
<ha-chip .trailingIcon=${mdiHomeAssistant}>Demo chip</ha-chip>
</div>
<div class="standalone">
<span>With trailingIcon property (outline):</span>
<ha-chip .trailingIcon=${mdiHomeAssistant} outline
<ha-chip
.trailingIcon=${mdiHomeAssistant}
.outline=${this.standaloneIsOutlined}
?disabled=${this.standaloneIsDisabled}
>Demo chip</ha-chip
>
</div>
<div class="standalone">
<span>With trailingIcon slot:</span>
<ha-chip>
<ha-chip
.outline=${this.standaloneIsOutlined}
?disabled=${this.standaloneIsDisabled}
>
Demo chip
<ha-svg-icon
slot="trailing-icon"
@@ -97,30 +112,6 @@ export class DemoHaChip extends LitElement {
></ha-svg-icon>
</ha-chip>
</div>
<div class="standalone">
<span>With trailingIcon slot (outline):</span>
<ha-chip outline>
Demo chip
<ha-svg-icon
slot="trailing-icon"
class="trailing"
.path=${mdiHomeAssistant}
></ha-svg-icon>
</ha-chip>
</div>
<div class="standalone">
<span>Disabled:</span>
<ha-chip .trailingIcon=${mdiHomeAssistant} disabled>
Demo chip
</ha-chip>
</div>
<div class="standalone">
<span>Disabled (outline):</span>
<ha-chip .trailingIcon=${mdiHomeAssistant} disabled outline>
Demo chip
</ha-chip>
</div>
</div>
</ha-card>
@@ -136,6 +127,14 @@ export class DemoHaChip extends LitElement {
`;
}
private _toggleDisable() {
this.standaloneIsDisabled = !this.standaloneIsDisabled;
}
private _toggleOutline() {
this.standaloneIsOutlined = !this.standaloneIsOutlined;
}
static get styles() {
return css`
ha-card {
@@ -147,12 +146,12 @@ export class DemoHaChip extends LitElement {
display: flex;
justify-content: space-between;
}
.trailings {
width: 16px;
height: 16px;
padding: 4px 2px 4px 4px;
margin-right: -8px;
--mdc-icon-size: 12px;
.filters {
margin: 16px;
}
ha-formfield {
margin: 12px 0;
display: block;
}
`;
}