mirror of
https://github.com/home-assistant/frontend.git
synced 2025-11-09 10:59:50 +00:00
Migrate ha-slider to webawesome (#27075)
* Migrate ha-slider to webawesome * Fix labeled slider * Change slider surface color * Trigger Build * Remove large and border * Run prettier * enable tooltip and focus ring
This commit is contained in:
Jan-Philipp Benecke
committed by
GitHub
GitHub
parent
3b90b5fcb1
commit
846692bc8a
36
gallery/src/pages/components/ha-slider.markdown
Normal file
36
gallery/src/pages/components/ha-slider.markdown
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: Slider
|
||||
subtitle: A slider component for selecting a value from a range.
|
||||
---
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
# Slider `<ha-slider>`
|
||||
|
||||
## Implementation
|
||||
|
||||
### Example Usage
|
||||
|
||||
<div class="wrapper">
|
||||
<ha-slider size="small" with-markers min="0" max="8" value="4"></ha-slider>
|
||||
<ha-slider size="medium"></ha-slider>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<ha-slider size="small" with-markers min="0" max="8" value="4"></ha-slider>
|
||||
<ha-slider size="medium"></ha-slider>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
This component is based on the webawesome slider component.
|
||||
Check the [webawesome documentation](https://webawesome.com/docs/components/slider/) for more details.
|
||||
|
||||
**CSS Custom Properties**
|
||||
|
||||
- `--ha-slider-track-size` - Height of the slider track. Defaults to `4px`.
|
||||
100
gallery/src/pages/components/ha-slider.ts
Normal file
100
gallery/src/pages/components/ha-slider.ts
Normal file
@@ -0,0 +1,100 @@
|
||||
import type { TemplateResult } from "lit";
|
||||
import { css, html, LitElement } from "lit";
|
||||
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-card";
|
||||
import "../../../../src/components/ha-spinner";
|
||||
import "../../../../src/components/ha-slider";
|
||||
import type { HomeAssistant } from "../../../../src/types";
|
||||
|
||||
@customElement("demo-components-ha-slider")
|
||||
export class DemoHaSlider extends LitElement {
|
||||
@property({ attribute: false }) hass!: HomeAssistant;
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
${["light", "dark"].map(
|
||||
(mode) => html`
|
||||
<div class=${mode}>
|
||||
<ha-card header="ha-slider ${mode} demo">
|
||||
<div class="card-content">
|
||||
<span>Default (disabled)</span>
|
||||
<ha-slider
|
||||
disabled
|
||||
min="0"
|
||||
max="8"
|
||||
value="4"
|
||||
with-markers
|
||||
></ha-slider>
|
||||
<span>Small</span>
|
||||
<ha-slider
|
||||
size="small"
|
||||
min="0"
|
||||
max="8"
|
||||
value="4"
|
||||
with-markers
|
||||
></ha-slider>
|
||||
<span>Medium</span>
|
||||
<ha-slider
|
||||
size="medium"
|
||||
min="0"
|
||||
max="8"
|
||||
value="4"
|
||||
with-markers
|
||||
></ha-slider>
|
||||
</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`
|
||||
: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 {
|
||||
margin: 24px auto;
|
||||
}
|
||||
.card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"demo-components-ha-slider": DemoHaSlider;
|
||||
}
|
||||
}
|
||||
@@ -36,6 +36,7 @@ class HaLabeledSlider extends LitElement {
|
||||
<div class="extra-container"><slot name="extra"></slot></div>
|
||||
<div class="slider-container">
|
||||
${this.icon ? html`<ha-icon icon=${this.icon}></ha-icon>` : nothing}
|
||||
<div class="slider-wrapper">
|
||||
<ha-slider
|
||||
.min=${this.min}
|
||||
.max=${this.max}
|
||||
@@ -46,6 +47,7 @@ class HaLabeledSlider extends LitElement {
|
||||
@change=${this._inputChanged}
|
||||
></ha-slider>
|
||||
</div>
|
||||
</div>
|
||||
${this.helper
|
||||
? html`<ha-input-helper-text .disabled=${this.disabled}>
|
||||
${this.helper}
|
||||
@@ -83,7 +85,8 @@ class HaLabeledSlider extends LitElement {
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
|
||||
ha-slider {
|
||||
.slider-wrapper {
|
||||
padding: 0 8px;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
@@ -91,6 +94,10 @@ class HaLabeledSlider extends LitElement {
|
||||
border-radius: 4px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
ha-slider {
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,33 +1,81 @@
|
||||
import { Slider } from "@material/web/slider/internal/slider";
|
||||
import { styles } from "@material/web/slider/internal/slider-styles";
|
||||
import { css } from "lit";
|
||||
import { customElement } from "lit/decorators";
|
||||
import Slider from "@home-assistant/webawesome/dist/components/slider/slider";
|
||||
import { css, type CSSResultGroup } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import { mainWindow } from "../common/dom/get_main_window";
|
||||
|
||||
@customElement("ha-slider")
|
||||
export class HaSlider extends Slider {
|
||||
@property({ reflect: true }) size: "small" | "medium" = "small";
|
||||
|
||||
@property({ type: Boolean, attribute: "with-tooltip" }) withTooltip = true;
|
||||
|
||||
public connectedCallback() {
|
||||
super.connectedCallback();
|
||||
this.dir = mainWindow.document.dir;
|
||||
}
|
||||
|
||||
static override styles = [
|
||||
styles,
|
||||
static get styles(): CSSResultGroup {
|
||||
return [
|
||||
Slider.styles,
|
||||
css`
|
||||
:host {
|
||||
--md-sys-color-primary: var(--primary-color);
|
||||
--md-sys-color-on-primary: var(--text-primary-color);
|
||||
--md-sys-color-outline: var(--outline-color);
|
||||
--md-sys-color-on-surface: var(--primary-text-color);
|
||||
--md-slider-handle-width: 14px;
|
||||
--md-slider-handle-height: 14px;
|
||||
--md-slider-state-layer-size: 24px;
|
||||
--wa-form-control-activated-color: var(--primary-color);
|
||||
--track-size: var(--ha-slider-track-size, 4px);
|
||||
--marker-height: calc(var(--ha-slider-track-size, 4px) / 2);
|
||||
--marker-width: calc(var(--ha-slider-track-size, 4px) / 2);
|
||||
--wa-color-surface-default: var(--card-background-color);
|
||||
--wa-color-neutral-fill-normal: var(--disabled-color);
|
||||
--wa-tooltip-background-color: var(--secondary-background-color);
|
||||
--wa-tooltip-color: var(--primary-text-color);
|
||||
--wa-tooltip-font-family: var(
|
||||
--ha-tooltip-font-family,
|
||||
var(--ha-font-family-body)
|
||||
);
|
||||
--wa-tooltip-font-size: var(
|
||||
--ha-tooltip-font-size,
|
||||
var(--ha-font-size-s)
|
||||
);
|
||||
--wa-tooltip-font-weight: var(
|
||||
--ha-tooltip-font-weight,
|
||||
var(--ha-font-weight-normal)
|
||||
);
|
||||
--wa-tooltip-line-height: var(
|
||||
--ha-tooltip-line-height,
|
||||
var(--ha-line-height-condensed)
|
||||
);
|
||||
--wa-tooltip-padding: 8px;
|
||||
--wa-tooltip-border-radius: var(--ha-tooltip-border-radius, 4px);
|
||||
--wa-tooltip-arrow-size: var(--ha-tooltip-arrow-size, 8px);
|
||||
--wa-z-index-tooltip: var(--ha-tooltip-z-index, 1000);
|
||||
min-width: 100px;
|
||||
min-inline-size: 100px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#thumb {
|
||||
border: none;
|
||||
}
|
||||
|
||||
#slider {
|
||||
&:focus-visible:not(.disabled) #thumb,
|
||||
&:focus-visible:not(.disabled) #thumb-min,
|
||||
&:focus-visible:not(.disabled) #thumb-max {
|
||||
outline: var(--wa-focus-ring);
|
||||
}
|
||||
}
|
||||
|
||||
:host([size="medium"]) {
|
||||
--thumb-width: var(--ha-font-size-l, 1.25em);
|
||||
--thumb-height: var(--ha-font-size-l, 1.25em);
|
||||
}
|
||||
|
||||
:host([size="small"]) {
|
||||
--thumb-width: var(--ha-font-size-m, 1em);
|
||||
--thumb-height: var(--ha-font-size-m, 1em);
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
|
||||
Reference in New Issue
Block a user