Switcher

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>
  {({ checked, onChange }) => (
    <Switcher checked={checked} onChange={onChange} />
  )}
</SwitcherWrapper>

Переключатель отключен

Состояние - "выкл."

<SwitcherWrapper>
  {({ onChange }) => <Switcher disabled onChange={onChange} />}
</SwitcherWrapper>

<SwitcherWrapper>
  {({ onChange }) => <Switcher disabled onChange={onChange} />}
</SwitcherWrapper>

Состояние - "вкл."

<SwitcherWrapper>
  {({ onChange }) => <Switcher checked disabled onChange={onChange} />}
</SwitcherWrapper>

<SwitcherWrapper>
  {({ onChange }) => <Switcher checked disabled onChange={onChange} />}
</SwitcherWrapper>

Переключатель в состоянии загрузки

Состояние - "выкл."

<Switcher showLoader />

<Switcher showLoader />

Состояние - "вкл."

<Switcher checked showLoader />

<Switcher checked showLoader />

В отключенном состоянии лоадер не отображается

<Switcher disabled showLoader />

<Switcher disabled showLoader />

Переключатель в состоянии ожидания

В состоянии ожидания взаимодействие со свитчером недоступно, никакие другие состояния не отображаютя

<Switcher disabled showLoader checked waiting />

<Switcher disabled showLoader checked waiting />

Переключатель с текстом

Положение текста

Справа (по умолчанию)

Отключен

Текст слева
Cвитчер прижимается к правому краю контейнера

<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 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>

Размер текста

Размер medium по умолчанию

Размер small

<SwitcherWrapper>
  {({ checked, onChange }) => (
    <Switcher onChange={onChange} checked={checked}>
      Размер medium по умолчанию
    </Switcher>
  )}
</SwitcherWrapper>
<SwitcherWrapper>
  {({ checked, onChange }) => (
    <Switcher textSize="small" onChange={onChange} checked={checked}>
      Размер small
    </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>

На сером фоне

<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 />

<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 />