kopia lustrzana https://github.com/shoelace-style/shoelace
2.0 KiB
2.0 KiB
meta | layout | ||||
---|---|---|---|---|---|
|
component |
<sl-switch>Switch</sl-switch>
import { SlSwitch } from '@shoelace-style/shoelace/dist/react';
const App = () => <SlSwitch>Switch</SlSwitch>;
:::tip
This component works with standard <form>
elements. Please refer to the section on form controls to learn more about form submission and client-side validation.
:::
Examples
Checked
Use the checked
attribute to activate the switch.
<sl-switch checked>Checked</sl-switch>
import { SlSwitch } from '@shoelace-style/shoelace/dist/react';
const App = () => <SlSwitch checked>Checked</SlSwitch>;
Disabled
Use the disabled
attribute to disable the switch.
<sl-switch disabled>Disabled</sl-switch>
import { SlSwitch } from '@shoelace-style/shoelace/dist/react';
const App = () => <SlSwitch disabled>Disabled</SlSwitch>;
Sizes
Use the size
attribute to change a switch's size.
<sl-switch size="small">Small</sl-switch>
<br />
<sl-switch size="medium">Medium</sl-switch>
<br />
<sl-switch size="large">Large</sl-switch>
import { SlSwitch } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlSwitch size="small">Small</SlSwitch>
<br />
<SlSwitch size="medium">Medium</SlSwitch>
<br />
<SlSwitch size="large">Large</SlSwitch>
</>
);
Custom Styles
Use the available custom properties to change how the switch is styled.
<sl-switch style="--width: 80px; --height: 40px; --thumb-size: 36px;">Really big</sl-switch>
{% raw %}
import { SlSwitch } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlSwitch
style={{
'--width': '80px',
'--height': '32px',
'--thumb-size': '26px'
}}
/>
);
{% endraw %}