Настройка размеров компонентов

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

Свойство size

Практически все визуальные компоненты Ant Design поддерживают свойство size. Оно позволяет быстро менять размер элемента без необходимости дополнительных CSS-правил.

  • Доступные значения:

    • small – уменьшенный размер, подходит для плотных интерфейсов и компактных форм.
    • middle – стандартный размер (по умолчанию), оптимален для большинства случаев.
    • large – увеличенный размер, выделяет компонент в интерфейсе.

Пример использования с компонентом Button:

import { Button } from 'antd';

<Button size="small">Маленькая кнопка</Button>
<Button size="middle">Средняя кнопка</Button>
<Button size="large">Большая кнопка</Button>

Многие компоненты, включая Input, Select, DatePicker, Switch, и Checkbox, поддерживают аналогичное свойство size.

Глобальная настройка размера через ConfigProvider

Для единообразного управления размерами во всем приложении используется компонент ConfigProvider. Он позволяет задать глобальный размер, который будет применяться ко всем поддерживающим компонентам.

import { ConfigProvider, Button, Input } from 'antd';

<ConfigProvider componentSize="large">
  <Button>Большая кнопка</Button>
  <Input placeholder="Большой input" />
</ConfigProvider>
  • Свойство componentSize принимает те же значения: small, middle, large.
  • Глобальная настройка удобно применяется для создания консистентного интерфейса и сокращает количество повторяющихся свойств size.

Настройка размера через CSS и стиль

В случаях, когда стандартные размеры недостаточны, можно использовать CSS-переменные и классические CSS-свойства для кастомизации размеров.

  • Антд использует CSS-переменные для глобальной темы, например:
:root {
  --ant-btn-height-base: 48px; /* базовая высота кнопки */
  --ant-input-height-base: 40px; /* базовая высота инпута */
}
  • Также можно применять инлайновые стили:
<Button style={{ height: '60px', fontSize: '18px' }}>Кастомная кнопка</Button>
<Input style={{ width: '300px', height: '50px' }} />

Использование стилей через style или классы CSS дает полный контроль над размером, однако стоит учитывать, что это обходит стандартную систему размеров Ant Design.

Компоненты с собственными размерными свойствами

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

  • Table – поддерживает свойство size, но с другими значениями:

    • small – компактная таблица
    • middle – стандартная

  • Pagination – через size="small" можно сделать более компактные элементы навигации.

  • Space – управляет промежутками между компонентами, используя size в пикселях или ключевые значения small, middle, large.

Пример:

import { Table } from 'antd';

<Table
  size="small"
  columns={columns}
  dataSource={data}
/>

Адаптивность и отзывчивость

Ant Design поддерживает адаптивные размеры компонентов через систему сетки и медиазапросов. Для форм и таблиц можно комбинировать size с компонентами Row и Col для создания интерфейса, который подстраивается под ширину экрана.

import { Row, Col, Input } from 'antd';

<Row gutter={16}>
  <Col xs={24} sm={12} md={8}>
    <Input size="small" placeholder="Компактный input" />
  </Col>
  <Col xs={24} sm={12} md={16}>
    <Input size="large" placeholder="Большой input" />
  </Col>
</Row>
  • Использование xs, sm, md, lg позволяет менять размер и расположение элементов на разных разрешениях.
  • Комбинируя size и сетку, можно создать гибкий, адаптивный интерфейс.

Рекомендации по выбору размеров

  • Малые компоненты (small) – интерфейсы с большим количеством элементов на экране, админ-панели, компактные формы.
  • Средние компоненты (middle) – стандарт для большинства приложений, оптимальный баланс между читаемостью и плотностью интерфейса.
  • Большие компоненты (large) – выделение важных элементов, мобильные приложения с тач-интерфейсом, элементы навигации.

Настройка размеров в пользовательской теме

Ant Design позволяет создавать собственные темы через Less-переменные. Для изменения базового размера компонентов:

@btn-height-base: 50px; 
@input-height-base: 48px; 
@font-size-base: 16px;

После сборки проекта с этими переменными все компоненты автоматически получат новые размеры без ручного добавления свойства size.

  • Это особенно полезно для крупных проектов, где требуется единый масштаб элементов интерфейса.
  • Настройка через тему сохраняет консистентность визуального стиля и упрощает поддержку приложения.

Размер компонентов в Ant Design можно контролировать через локальные свойства size, глобальный ConfigProvider, CSS и темы. Правильное сочетание этих подходов позволяет создавать интерфейсы с высокой читаемостью, адаптивностью и визуальной гармонией.

Оглавление