kopia lustrzana https://github.com/shoelace-style/shoelace
1.4 KiB
1.4 KiB
Switch
[component-header:sl-switch]
Switches allow the user to toggle an option on or off.
<sl-switch>Switch</sl-switch>
import { SlSwitch } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlSwitch>Switch</SlSwitch>
);
?> This component doesn't work with standard forms. Use <sl-form>
instead.
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>
);
Custom Size
Use the available custom properties to make the switch a different size.
<sl-switch style="--width: 80px; --height: 32px; --thumb-size: 26px;"></sl-switch>
import { SlSwitch } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlSwitch
style={{
'--width': '80px',
'--height': '32px',
'--thumb-size': '26px'
}}
/>
);
[component-metadata:sl-switch]