import { Switcher } from '@megafon/ui-core';
Код SwitcherWrapperexport const SwitcherWrapper: React.FC<ISwitcherWrapperProps> = props => {const [checked, setChecked] = React.useState<boolean>(false);const handleChange = () => {setChecked(!checked);};return (<div style={{ padding: '20px 15px' }}>{props.children({checked,onChange: handleChange,})}</div>);};
<SwitcherWrapper> {({ checked, onChange }) => <Switcher checked={checked} onChange={onChange} />} </SwitcherWrapper>
<SwitcherWrapper> {({ onChange }) => <Switcher disabled onChange={onChange} />} </SwitcherWrapper>
<SwitcherWrapper> {({ onChange }) => <Switcher checked disabled onChange={onChange} />} </SwitcherWrapper>
<Switcher showLoader />
<Switcher checked showLoader />
<Switcher disabled showLoader />
<Switcher disabled showLoader checked waiting />
<SwitcherWrapper> {({ checked, onChange }) => <Switcher checked={checked} onChange={onChange}>Справа (по умолчанию)</Switcher>} </SwitcherWrapper> <SwitcherWrapper> {({ checked, onChange }) => <Switcher checked={checked} disabled onChange={onChange}>Отключен</Switcher>} </SwitcherWrapper> <SwitcherWrapper> {({ checked, onChange }) => <Switcher textPosition="left" onChange={onChange} checked={checked}> <strong>Текст слева</strong><br /> Cвитчер прижимается к правому краю контейнера </Switcher> } </SwitcherWrapper>
<SwitcherWrapper> {({ checked, onChange }) => <Switcher onChange={onChange} checked={checked}>Размер medium по умолчанию</Switcher>} </SwitcherWrapper> <SwitcherWrapper> {({ checked, onChange }) => <Switcher textSize="small" onChange={onChange} checked={checked}>Размер small</Switcher>} </SwitcherWrapper>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '40px' }}> <Switcher theme="on-gray" /> <Switcher theme="on-gray" checked /> <Switcher theme="on-gray" showLoader /> <Switcher theme="on-gray" showLoader checked /> <Switcher theme="on-gray" waiting /> <Switcher theme="on-gray" disabled /> <Switcher theme="on-gray" disabled checked /> </div>