Gallery: Added switch and gauge component pagess + CSS vars
This commit is contained in:
parent
92d022747b
commit
67598ea877
|
@ -5,7 +5,7 @@ subtitle: Dialogs provide important prompts in a user flow.
|
|||
|
||||
# Material Design 3
|
||||
|
||||
Our dialogs are based on the latest version of Material Design. Specs and guidelines can be found on it's [website](https://m3.material.io/components/dialogs/overview).
|
||||
Our dialogs are based on the latest version of Material Design. Specs and guidelines can be found on its [website](https://m3.material.io/components/dialogs/overview).
|
||||
|
||||
# Highlighted guidelines
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
---
|
||||
title: Gauge
|
||||
---
|
||||
|
||||
<style>
|
||||
ha-gauge {
|
||||
display: block;
|
||||
width: 200px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
# Gauge `<ha-gauge>`
|
||||
|
||||
A gauge that can be used to represent sensor data and provide visual feedback about the value and the corresponding severity (success, warning, error).
|
||||
|
||||
## Examples
|
||||
|
||||
Info color gauge
|
||||
<ha-gauge value="75" style="--gauge-color: var(--info-color)"></ha-gauge>
|
||||
|
||||
Success color gauge
|
||||
<ha-gauge value="25" style="--gauge-color: var(--success-color)" label="°C"></ha-gauge>
|
||||
|
||||
Warning color gauge
|
||||
<ha-gauge value="50" style="--gauge-color: var(--warning-color)" label="°C"></ha-gauge>
|
||||
|
||||
Error color gauge
|
||||
<ha-gauge value="75" style="--gauge-color: var(--error-color)" label="°C"></ha-gauge>
|
||||
|
||||
Gauge with background color
|
||||
<ha-gauge value="75" style="--gauge-color: var(--info-color); --primary-background-color: lightgray"></ha-gauge>
|
||||
|
||||
|
||||
## CSS variables
|
||||
|
||||
### Gauge
|
||||
|
||||
`primary-background-color`
|
||||
Background color of the dial (rounded arch)
|
||||
|
||||
`primary-text-color`
|
||||
Text color below dial (value and unit of measurement) plus needle color (if gauge is in needle mode)
|
||||
|
||||
#### Dial colors
|
||||
|
||||
`gauge-color`
|
||||
Used in the coding to control what color the gauge value is rendered with, but cannot be set via theme since its value will dynamically be set (either to `info-color` or to the matching severity variable if the severity color mode is used). To control the used colors, adjust the following variables.
|
||||
|
||||
`success-color`
|
||||
Dial color for the "green" severity level
|
||||
|
||||
`warning-color`
|
||||
Dial color for the "yellow" severity level
|
||||
|
||||
`error-color`
|
||||
Dial color for the "red" severity level
|
||||
|
||||
`info-color`
|
||||
Static dial color if not in severity color mode
|
|
@ -0,0 +1 @@
|
|||
import "../../../../src/components/ha-gauge";
|
|
@ -0,0 +1,39 @@
|
|||
---
|
||||
title: Switch / Toggle
|
||||
---
|
||||
|
||||
<style>
|
||||
ha-switch {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
# Switch `<ha-switch>`
|
||||
|
||||
A toggle switch can represent two states: on and off.
|
||||
|
||||
## Examples
|
||||
|
||||
Switch in on state
|
||||
<ha-switch checked></ha-switch>
|
||||
|
||||
Switch in off state
|
||||
<ha-switch></ha-switch>
|
||||
|
||||
Disabled switch
|
||||
<ha-switch disabled></ha-switch>
|
||||
|
||||
## CSS variables
|
||||
|
||||
For the switch / toggle there are always two variables, one for the on / checked state and one for the off / unchecked state.
|
||||
|
||||
The track element (background rounded rectangle that the round circular handle travels on) is set to being half transparent, so the final color will also be impacted by the color behind the track.
|
||||
|
||||
`switch-checked-color` / `switch-unchecked-color`
|
||||
Set both the color of the round handle and the track behind it. If you want to control them separately, use the variables below instead.
|
||||
|
||||
`switch-checked-button-color` / `switch-unchecked-button-color`
|
||||
Color of the round handle
|
||||
|
||||
`switch-checked-track-color` / `switch-unchecked-track-color`
|
||||
Color of the track behind the round handle
|
|
@ -0,0 +1 @@
|
|||
import "../../../../src/components/ha-switch";
|
|
@ -23,13 +23,12 @@ const CONFIGS = [
|
|||
heading: "Basic example",
|
||||
config: `
|
||||
- type: gauge
|
||||
title: Humidity
|
||||
entity: sensor.outside_humidity
|
||||
name: Outside Humidity
|
||||
`,
|
||||
},
|
||||
{
|
||||
heading: "Custom Unit of Measurement",
|
||||
heading: "Custom unit of measurement",
|
||||
config: `
|
||||
- type: gauge
|
||||
entity: sensor.outside_temperature
|
||||
|
@ -38,7 +37,16 @@ const CONFIGS = [
|
|||
`,
|
||||
},
|
||||
{
|
||||
heading: "Setting Severity Levels",
|
||||
heading: "Rendering needle",
|
||||
config: `
|
||||
- type: gauge
|
||||
entity: sensor.outside_humidity
|
||||
name: Outside Humidity
|
||||
needle: true
|
||||
`,
|
||||
},
|
||||
{
|
||||
heading: "Setting severity levels",
|
||||
config: `
|
||||
- type: gauge
|
||||
entity: sensor.brightness
|
||||
|
@ -50,7 +58,7 @@ const CONFIGS = [
|
|||
`,
|
||||
},
|
||||
{
|
||||
heading: "Setting Severity Levels",
|
||||
heading: "Setting severity levels",
|
||||
config: `
|
||||
- type: gauge
|
||||
entity: sensor.brightness_medium
|
||||
|
@ -62,7 +70,7 @@ const CONFIGS = [
|
|||
`,
|
||||
},
|
||||
{
|
||||
heading: "Setting Severity Levels",
|
||||
heading: "Setting severity levels",
|
||||
config: `
|
||||
- type: gauge
|
||||
entity: sensor.brightness_high
|
||||
|
@ -74,7 +82,7 @@ const CONFIGS = [
|
|||
`,
|
||||
},
|
||||
{
|
||||
heading: "Setting Min (0) and Max (15) Values",
|
||||
heading: "Setting min (0) and mx (15) values",
|
||||
config: `
|
||||
- type: gauge
|
||||
entity: sensor.brightness
|
||||
|
@ -84,14 +92,14 @@ const CONFIGS = [
|
|||
`,
|
||||
},
|
||||
{
|
||||
heading: "Invalid Entity",
|
||||
heading: "Invalid entity",
|
||||
config: `
|
||||
- type: gauge
|
||||
entity: sensor.invalid_entity
|
||||
`,
|
||||
},
|
||||
{
|
||||
heading: "Non-Numeric Value",
|
||||
heading: "Non-numeric value",
|
||||
config: `
|
||||
- type: gauge
|
||||
entity: plant.bonsai
|
||||
|
|
Loading…
Reference in New Issue