005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
40 lines
1.1 KiB
JavaScript
40 lines
1.1 KiB
JavaScript
import Switch from '@mui/joy/Switch';
|
|
import Typography from '@mui/joy/Typography';
|
|
import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
|
|
|
|
export default function SwitchVariables() {
|
|
return (
|
|
<JoyVariablesDemo
|
|
componentName="Switch"
|
|
data={[
|
|
{ var: '--Switch-gap', defaultValue: '8px' },
|
|
[
|
|
'Track',
|
|
[
|
|
{ var: '--Switch-trackRadius', defaultValue: '16px' },
|
|
{ var: '--Switch-trackWidth', defaultValue: '48px' },
|
|
{ var: '--Switch-trackHeight', defaultValue: '24px' },
|
|
],
|
|
{ defaultOpen: true },
|
|
],
|
|
[
|
|
'Thumb',
|
|
[
|
|
{ var: '--Switch-thumbSize', defaultValue: '16px' },
|
|
{ var: '--Switch-thumbRadius' },
|
|
{ var: '--Switch-thumbWidth' },
|
|
{ var: '--Switch-thumbOffset' },
|
|
],
|
|
],
|
|
]}
|
|
renderDemo={(sx) => (
|
|
<Switch
|
|
sx={sx}
|
|
startDecorator={<Typography>Off</Typography>}
|
|
endDecorator={<Typography>On</Typography>}
|
|
/>
|
|
)}
|
|
/>
|
|
);
|
|
}
|