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

Prop name	Type	Default	Description
dataAttrs	{ root?: Record<string, string>; input?: Record<string, string>; loader?: Record<string, string>; pointer?: Record<string, string>; timer?: Record<string, string>; }		Дополнительные data атрибуты к внутренним элементам
className	string		Дополнительный класс корневого элемента
theme	"on-white" \| "on-gray"	on-white	Тема
checked	boolean	false	Управление состоянием вкл/выкл компонента
waiting	boolean	false	Состояние ожидание
disabled	boolean	false	Состояние отключения
showLoader	boolean	false	Состояние загрузки
textSize	"small" \| "medium"	medium	Размер текста лейбла
textPosition	"left" \| "right"	right	Позиция лейбла относительно свитчера
onChange	(e: AccessibilityEventType) => void		Обработчик изменения элемента