Expose switch custom props and fix width bug

pull/186/head
Cory LaViska 2020-08-20 09:09:23 -04:00
rodzic c6ae475d42
commit ee41a71ccd
2 zmienionych plików z 14 dodań i 4 usunięć

Wyświetl plik

@ -5,7 +5,7 @@
Switches allow the user to toggle an option on or off. Switches allow the user to toggle an option on or off.
```html preview ```html preview
<sl-switch>Switch</sl-switch> <sl-switch style="--width: 100px;">Switch</sl-switch>
``` ```
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form.md) instead. ?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form.md) instead.
@ -28,5 +28,12 @@ Use the `disabled` attribute to disable the switch.
<sl-switch disabled>Disabled</sl-switch> <sl-switch disabled>Disabled</sl-switch>
``` ```
### Custom Size
Use the available custom properties to make the switch a different size.
```html preview
<sl-switch style="--width: 80px; --height: 30px; --thumb-size: 26px;"></sl-switch>
```
[component-metadata:sl-switch] [component-metadata:sl-switch]

Wyświetl plik

@ -1,9 +1,13 @@
@import 'component'; @import 'component';
/**
* @prop --width: The width of the switch.
* @prop --height: The height of the switch.
* @prop --thumb-size: The size of the thumb.
*/
:host { :host {
--height: var(--sl-toggle-size); --height: var(--sl-toggle-size);
--thumb-size: calc(var(--sl-toggle-size) + 4px); --thumb-size: calc(var(--sl-toggle-size) + 4px);
--track-border-radius: var(--height);
--width: calc(var(--height) * 2); --width: calc(var(--height) * 2);
display: inline-block; display: inline-block;
@ -12,7 +16,6 @@
.switch { .switch {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
width: var(--width);
font-family: var(--sl-input-font-family); font-family: var(--sl-input-font-family);
font-size: var(--sl-input-font-size-medium); font-size: var(--sl-input-font-size-medium);
font-weight: var(--sl-input-font-weight); font-weight: var(--sl-input-font-weight);
@ -30,7 +33,7 @@
height: var(--height); height: var(--height);
background-color: var(--sl-color-gray-80); background-color: var(--sl-color-gray-80);
border: solid var(--sl-input-border-width) var(--sl-color-gray-80); border: solid var(--sl-input-border-width) var(--sl-color-gray-80);
border-radius: var(--track-border-radius); border-radius: var(--height);
transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color; transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color;
.switch__thumb { .switch__thumb {