kopia lustrzana https://github.com/shoelace-style/shoelace
Expose switch custom props and fix width bug
rodzic
c6ae475d42
commit
ee41a71ccd
|
@ -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]
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Ładowanie…
Reference in New Issue