mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-18 14:56:37 +00:00
Add switch bar (#14429)
* Add basic swich support * Add color and reversed state * Fix slotted icon * Update gallery/src/pages/components/ha-bar-switch.ts Co-authored-by: Bram Kragten <mail@bramkragten.nl> Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Paul Bottein
GitHub
parent
c119163422
commit
bfd96944f9
3
gallery/src/pages/components/ha-bar-switch.markdown
Normal file
3
gallery/src/pages/components/ha-bar-switch.markdown
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
---
|
||||||
|
title: Bar Switches
|
||||||
|
---
|
||||||
145
gallery/src/pages/components/ha-bar-switch.ts
Normal file
145
gallery/src/pages/components/ha-bar-switch.ts
Normal file
@ -0,0 +1,145 @@
|
|||||||
|
import {
|
||||||
|
mdiGarage,
|
||||||
|
mdiGarageOpen,
|
||||||
|
mdiLightbulb,
|
||||||
|
mdiLightbulbOff,
|
||||||
|
} from "@mdi/js";
|
||||||
|
import { css, html, LitElement, TemplateResult } from "lit";
|
||||||
|
import { customElement, state } from "lit/decorators";
|
||||||
|
import { ifDefined } from "lit/directives/if-defined";
|
||||||
|
import { repeat } from "lit/directives/repeat";
|
||||||
|
import "../../../../src/components/ha-bar-switch";
|
||||||
|
import "../../../../src/components/ha-card";
|
||||||
|
|
||||||
|
const switches: {
|
||||||
|
id: string;
|
||||||
|
label: string;
|
||||||
|
class?: string;
|
||||||
|
reversed?: boolean;
|
||||||
|
disabled?: boolean;
|
||||||
|
}[] = [
|
||||||
|
{
|
||||||
|
id: "switch",
|
||||||
|
label: "Switch",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "switch-reversed",
|
||||||
|
label: "Switch Reversed",
|
||||||
|
reversed: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "switch-custom",
|
||||||
|
label: "Switch and custom style",
|
||||||
|
class: "custom",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "switch-disabled",
|
||||||
|
label: "Disabled Switch",
|
||||||
|
disabled: true,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
@customElement("demo-components-ha-bar-switch")
|
||||||
|
export class DemoHaBarSwitch extends LitElement {
|
||||||
|
@state() private checked = false;
|
||||||
|
|
||||||
|
handleValueChanged(e: any) {
|
||||||
|
this.checked = e.target.checked as boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
protected render(): TemplateResult {
|
||||||
|
return html`
|
||||||
|
${repeat(switches, (sw) => {
|
||||||
|
const { id, label, ...config } = sw;
|
||||||
|
return html`
|
||||||
|
<ha-card>
|
||||||
|
<div class="card-content">
|
||||||
|
<label id=${id}>${label}</label>
|
||||||
|
<pre>Config: ${JSON.stringify(config)}</pre>
|
||||||
|
<ha-bar-switch
|
||||||
|
.checked=${this.checked}
|
||||||
|
class=${ifDefined(config.class)}
|
||||||
|
@change=${this.handleValueChanged}
|
||||||
|
.pathOn=${mdiLightbulb}
|
||||||
|
.pathOff=${mdiLightbulbOff}
|
||||||
|
aria-labelledby=${id}
|
||||||
|
disabled=${ifDefined(config.disabled)}
|
||||||
|
reversed=${ifDefined(config.reversed)}
|
||||||
|
>
|
||||||
|
</ha-bar-switch>
|
||||||
|
</div>
|
||||||
|
</ha-card>
|
||||||
|
`;
|
||||||
|
})}
|
||||||
|
<ha-card>
|
||||||
|
<div class="card-content">
|
||||||
|
<p class="title"><b>Vertical</b></p>
|
||||||
|
<div class="vertical-switches">
|
||||||
|
${repeat(switches, (sw) => {
|
||||||
|
const { id, label, ...config } = sw;
|
||||||
|
return html`
|
||||||
|
<ha-bar-switch
|
||||||
|
.checked=${this.checked}
|
||||||
|
vertical
|
||||||
|
class=${ifDefined(config.class)}
|
||||||
|
@change=${this.handleValueChanged}
|
||||||
|
aria-label=${label}
|
||||||
|
.pathOn=${mdiGarageOpen}
|
||||||
|
.pathOff=${mdiGarage}
|
||||||
|
disabled=${ifDefined(config.disabled)}
|
||||||
|
reversed=${ifDefined(config.reversed)}
|
||||||
|
>
|
||||||
|
</ha-bar-switch>
|
||||||
|
`;
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ha-card>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
static get styles() {
|
||||||
|
return css`
|
||||||
|
ha-card {
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 24px auto;
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.custom {
|
||||||
|
--switch-bar-color-on: var(--rgb-green-color);
|
||||||
|
--switch-bar-color-off: var(--rgb-red-color);
|
||||||
|
--switch-bar-thickness: 100px;
|
||||||
|
--switch-bar-border-radius: 24px;
|
||||||
|
--switch-bar-padding: 6px;
|
||||||
|
--mdc-icon-size: 24px;
|
||||||
|
}
|
||||||
|
.vertical-switches {
|
||||||
|
height: 300px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
p.title {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.vertical-switches > *:not(:last-child) {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
"demo-components-ha-bar-switch": DemoHaBarSwitch;
|
||||||
|
}
|
||||||
|
}
|
||||||
174
src/components/ha-bar-switch.ts
Normal file
174
src/components/ha-bar-switch.ts
Normal file
@ -0,0 +1,174 @@
|
|||||||
|
import {
|
||||||
|
css,
|
||||||
|
CSSResultGroup,
|
||||||
|
html,
|
||||||
|
LitElement,
|
||||||
|
PropertyValues,
|
||||||
|
TemplateResult,
|
||||||
|
} from "lit";
|
||||||
|
import { customElement, property } from "lit/decorators";
|
||||||
|
import { fireEvent } from "../common/dom/fire_event";
|
||||||
|
import "./ha-svg-icon";
|
||||||
|
|
||||||
|
@customElement("ha-bar-switch")
|
||||||
|
export class HaBarSwitch extends LitElement {
|
||||||
|
@property({ type: Boolean, attribute: "disabled" })
|
||||||
|
public disabled = false;
|
||||||
|
|
||||||
|
@property({ type: Boolean })
|
||||||
|
public vertical = false;
|
||||||
|
|
||||||
|
@property({ type: Boolean })
|
||||||
|
public reversed = false;
|
||||||
|
|
||||||
|
@property({ type: Boolean, reflect: true })
|
||||||
|
public checked?: boolean;
|
||||||
|
|
||||||
|
// SVG icon path (if you need a non SVG icon instead, use the provided on icon slot to pass an <ha-icon slot="icon-on"> in)
|
||||||
|
@property({ type: String }) pathOn?: string;
|
||||||
|
|
||||||
|
// SVG icon path (if you need a non SVG icon instead, use the provided off icon slot to pass an <ha-icon slot="icon-off"> in)
|
||||||
|
@property({ type: String }) pathOff?: string;
|
||||||
|
|
||||||
|
protected firstUpdated(changedProperties: PropertyValues): void {
|
||||||
|
super.firstUpdated(changedProperties);
|
||||||
|
this.setAttribute("role", "switch");
|
||||||
|
if (!this.hasAttribute("tabindex")) {
|
||||||
|
this.setAttribute("tabindex", "0");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
protected updated(changedProps: PropertyValues) {
|
||||||
|
super.updated(changedProps);
|
||||||
|
if (changedProps.has("value")) {
|
||||||
|
this.setAttribute("aria-checked", this.checked ? "true" : "false");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private _toggle() {
|
||||||
|
if (this.disabled) return;
|
||||||
|
this.checked = !this.checked;
|
||||||
|
fireEvent(this, "change");
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback(): void {
|
||||||
|
super.connectedCallback();
|
||||||
|
this.addEventListener("keydown", this._keydown);
|
||||||
|
this.addEventListener("click", this._toggle);
|
||||||
|
}
|
||||||
|
|
||||||
|
disconnectedCallback(): void {
|
||||||
|
super.disconnectedCallback();
|
||||||
|
this.removeEventListener("keydown", this._keydown);
|
||||||
|
this.removeEventListener("click", this._toggle);
|
||||||
|
}
|
||||||
|
|
||||||
|
private _keydown(ev: any) {
|
||||||
|
if (ev.key !== "Enter" && ev.key !== " ") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
ev.preventDefault();
|
||||||
|
this._toggle();
|
||||||
|
}
|
||||||
|
|
||||||
|
protected render(): TemplateResult {
|
||||||
|
return html`
|
||||||
|
<div class="switch">
|
||||||
|
<div class="button" aria-hidden="true">
|
||||||
|
${this.checked
|
||||||
|
? this.pathOn
|
||||||
|
? html`<ha-svg-icon .path=${this.pathOn}></ha-svg-icon>`
|
||||||
|
: html`<slot name="icon-on"></slot>`
|
||||||
|
: this.pathOff
|
||||||
|
? html`<ha-svg-icon .path=${this.pathOff}></ha-svg-icon>`
|
||||||
|
: html`<slot name="icon-off"></slot>`}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
static get styles(): CSSResultGroup {
|
||||||
|
return css`
|
||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
--switch-bar-color-on: var(--rgb-primary-color);
|
||||||
|
--switch-bar-color-off: var(--rgb-disabled-color);
|
||||||
|
--switch-bar-thickness: 40px;
|
||||||
|
--switch-bar-border-radius: 12px;
|
||||||
|
--switch-bar-padding: 4px;
|
||||||
|
--mdc-icon-size: 20px;
|
||||||
|
height: var(--switch-bar-thickness);
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.switch {
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: var(--switch-bar-border-radius);
|
||||||
|
background-color: rgba(var(--switch-bar-color-off), 0.3);
|
||||||
|
padding: var(--switch-bar-padding);
|
||||||
|
transition: background-color 180ms ease-in-out;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.switch .button {
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
background: lightgrey;
|
||||||
|
border-radius: calc(
|
||||||
|
var(--switch-bar-border-radius) - var(--switch-bar-padding)
|
||||||
|
);
|
||||||
|
transition: transform 180ms ease-in-out,
|
||||||
|
background-color 180ms ease-in-out;
|
||||||
|
background-color: rgb(var(--switch-bar-color-off));
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
:host([checked]) .switch {
|
||||||
|
background-color: rgba(var(--switch-bar-color-on), 0.3);
|
||||||
|
}
|
||||||
|
:host([checked]) .switch .button {
|
||||||
|
transform: translateX(100%);
|
||||||
|
background-color: rgb(var(--switch-bar-color-on));
|
||||||
|
}
|
||||||
|
:host([reversed]) .switch {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
:host([reversed][checked]) .switch .button {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
:host([vertical]) {
|
||||||
|
width: var(--switch-bar-thickness);
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
:host([vertical][checked]) .switch .button {
|
||||||
|
transform: translateY(100%);
|
||||||
|
}
|
||||||
|
:host([vertical]) .switch .button {
|
||||||
|
width: 100%;
|
||||||
|
height: 50%;
|
||||||
|
}
|
||||||
|
:host([vertical][reversed]) .switch {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
:host([vertical][reversed][checked]) .switch .button {
|
||||||
|
transform: translateY(-100%);
|
||||||
|
}
|
||||||
|
:host([disabled]) {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
"ha-bar-switch": HaBarSwitch;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user