В библиотеке Ant Design (AntD) каждый компонент обладает набором свойств, или props, которые позволяют управлять его поведением, внешним видом и взаимодействием с другими компонентами. Props задаются как атрибуты при использовании компонента в JSX и могут принимать значения различных типов: строки, числа, логические значения, функции, объекты и массивы.
AntD придерживается строгой типизации props и предоставляет подробную документацию для каждого компонента, что позволяет точно контролировать интерфейс и логику приложения. Props можно условно разделить на несколько категорий:
Кнопка (Button) является одним из ключевых компонентов
AntD. Основные props:
primary | default | dashed | link | text | ghost) – задает
стиль кнопки.default | circle | round) –
форма кнопки.large | middle | small) – размер
кнопки.boolean) – визуальное
выделение опасного действия.boolean | { delay: number })
– состояние загрузки с возможной задержкой.ReactNode) – добавление иконки в
кнопку.boolean) – блокировка
кнопки.function) – обработчик
события клика.Текстовое поле (Input) обладает широким набором
props:
string) – текущее значение
поля.string) – начальное
значение при первом рендере.string) – текст
подсказки.boolean) – блокировка
поля.boolean) – добавление
кнопки очистки.ReactNode) – вставка
иконок или элементов перед или после текста.function) – обработчик
изменения значения.function) – обработчик
события нажатия Enter.Компонент выбора (Select) предназначен для выпадающих
списков:
multiple | tags) – режим выбора
нескольких элементов или тегов.boolean) – включение
поиска внутри списка.string) – какой проп
использовать для отображения выбранного значения.Таблица (Table) имеет расширенные props для настройки
отображения и взаимодействия:
array) – описание колонок,
включая title, dataIndex, key,
render.array) – массив объектов с
данными.string | function) –
уникальный идентификатор строки.object | boolean) –
конфигурация постраничного отображения.boolean | object) – состояние
загрузки таблицы.boolean) – отображение
границ таблицы.object) – настройка
выбора строк.object) – настройка
горизонтальной и вертикальной прокрутки.function) – обработчик
изменения сортировки, фильтра или пагинации.Список (List) использует props для управления данными и
внешним видом:
array) – массив
элементов.function) – функция
рендера каждого элемента.ReactNode) – шапка и
подвал списка.Модальное окно (Modal) обладает обширным набором
props:
boolean) – управление
видимостью.ReactNode) – заголовок
окна.ReactNode | null) –
кастомизация кнопок внизу окна.function) –
обработчики событий закрытия или подтверждения.string) – подписи
кнопок.number | string) – ширина
окна.boolean) – закрытие при
клике на фон.boolean) – удаление
содержимого при закрытии.boolean) – центрирование
модального окна на экране.Компонент меню (Menu) управляет навигацией и
выбором:
vertical | horizontal | inline)
– направление меню.light | dark) – цветовая
тема.boolean) –
свертывание вертикального меню.Хлебные крошки (Breadcrumb) имеют минимальный, но
функциональный набор props:
array) – массив объектов с
title и href.ReactNode) – символ
разделителя между элементами.function) – кастомный
рендер элемента.Компоненты обратной связи используют следующие props:
success | info | warning | error | loading) – тип
сообщения.ReactNode) – текст или
элемент сообщения.number | null) – время
отображения.function) – функция
закрытия.topLeft | topRight | bottomLeft | bottomRight) – позиция
уведомления.ReactNode) – иконка перед
текстом.Индикатор загрузки (Spin) управляется через props:
boolean) – состояние
активности индикатора.small | default | large) –
размер.string) – подпись под
индикатором.ReactNode) – кастомная
анимация загрузки.Многие props в AntD являются универсальными и повторяются в разных компонентах:
Эта систематизация props позволяет создавать сложные интерфейсы, обеспечивая высокую гибкость и консистентность компонентов Ant Design.