Switch

Компонент Switch предназначен для выбора между двумя состояниями: включено и выключено. Он часто используется для включения или отключения настроек, функций или режимов в интерфейсе. В Ant Design Switch реализован с учетом удобства пользователя, адаптивности и гибкой кастомизации.

Основное использование

Базовое подключение компонента выглядит следующим образом:

import { Switch } from 'antd';

const App = () => (
  <Switch defaultChecked />
);
  • defaultChecked — определяет, будет ли переключатель включен при рендере.
  • Если проп defaultChecked не указан, переключатель по умолчанию находится в состоянии выключено.

Управляемый и неуправляемый режимы

Неуправляемый компонент использует defaultChecked и внутреннее состояние:

<Switch defaultChecked />

Управляемый компонент использует проп checked и обработчик событий onChange:

import { useState } from 'react';
import { Switch } from 'antd';

const App = () => {
  const [checked, setChecked] = useState(false);

  const handleChange = (value) => {
    setChecked(value);
    console.log('Состояние переключателя:', value);
  };

  return <Switch checked={checked} onCha nge={handleChange} />;
};
  • checked — текущее состояние переключателя.
  • onChange — вызывается при изменении состояния, принимает новое булевое значение.

Кастомизация отображения

Компонент поддерживает различные визуальные модификации:

  1. Размеры
<Switch defaultChecked size="small" />
<Switch defaultChecked size="default" />
  • size="small" — уменьшенный переключатель.
  • size="default" — стандартный размер (по умолчанию).
  1. Подписи состояний
<Switch checkedChildren="Вкл" unCheckedChildren="Выкл" defaultChecked />
  • checkedChildren — текст или иконка для состояния включено.
  • unCheckedChildren — текст или иконка для состояния выключено.
  1. Состояние блокировки
<Switch disabled defaultChecked />
  • disabled — делает переключатель неактивным, пользователь не может изменить состояние.
  1. Фокус и автоскрытие
<Switch autoFocus />
  • autoFocus — автоматически устанавливает фокус при рендере, полезно для форм.

События

Компонент Switch поддерживает несколько событий:

  • onChange: вызывается при изменении состояния переключателя. Принимает булевое значение:
<Switch onCha nge={(checked) => console.log(checked)} />
  • onClick: срабатывает при клике на переключатель, независимо от состояния:
<Switch onCl ick={(e) => console.log('Кликнули', e)} />
  • onFocus / onBlur: события фокуса для интеграции с формами или клавиатурной навигацией.

Стилизация

Switch можно стилизовать с помощью пропа style или CSS-классов:

<Switch
  defaultChecked
  style={{
    backgroundColor: '#52c41a',
    borderColor: '#389e0d'
  }}
/>

Для более сложной кастомизации возможно использовать less-переменные Ant Design:

@switch-checked-color: #52c41a;
@switch-height: 28px;

Интеграция с формами

Ant Design предоставляет возможность использовать Switch внутри Form.Item для управления состоянием через форму:

import { Form, Switch, Button } from 'antd';

const App = () => (
  <Form initialValues={{ notifications: true }}>
    <Form.Item
      name="notifications"
      label="Уведомления"
      valuePropName="checked"
    >
      <Switch />
    </Form.Item>
    <Form.Item>
      <Button type="primary" htmlType="submit">
        Сохранить
      </Button>
    </Form.Item>
  </Form>
);
  • valuePropName="checked" — указывает, что значение формы будет связано с пропом checked.
  • После отправки формы можно получить текущее состояние переключателя через метод form.getFieldsValue().

Комбинирование с иконками и цветами

Switch позволяет интегрировать иконки и кастомные цвета для улучшения UX:

import { CheckOutlined, CloseOutlined } from '@ant-design/icons';

<Switch
  checkedChildren={<CheckOutlined />}
  unCheckedChildren={<CloseOutlined />}
  defaultChecked
/>
  • Поддержка компонентов React в качестве детей (checkedChildren и unCheckedChildren).
  • Позволяет создавать наглядные индикаторы состояния.

Использование в списках и таблицах

Компонент Switch удобно применять в таблицах для управления включением/выключением функций на каждой строке:

import { Table, Switch } from 'antd';

const data = [
  { key: 1, name: 'Функция A', enabled: true },
  { key: 2, name: 'Функция B', enabled: false },
];

const columns = [
  { title: 'Название', dataIndex: 'name', key: 'name' },
  { 
    title: 'Включено', 
    key: 'enabled', 
    render: (_, record) => (
      <Switch checked={record.enabled} onCha nge={(checked) => console.log(record.key, checked)} />
    )
  },
];

<Table dataSource={data} columns={columns} />
  • Каждый переключатель управляет состоянием конкретной записи.
  • Возможность синхронизации с бекендом через onChange.

Резюме ключевых пропсов

Проп Описание
defaultChecked Начальное состояние переключателя
checked Управляемое состояние
onChange Событие изменения состояния
checkedChildren Подпись или иконка для включенного состояния
unCheckedChildren Подпись или иконка для выключенного состояния
disabled Блокировка переключателя
size Размер (small или default)
autoFocus Автофокус при рендере

Компонент Switch в Ant Design сочетает простоту использования, гибкость кастомизации и интеграцию с формами, таблицами и событиями, что делает его универсальным инструментом для интерфейсов на React.

Оглавление