Создание адаптивных макетов

В основе создания адаптивных интерфейсов в Ant Design лежит система сетки (Grid System). Она основана на 24-колоночной модели, что обеспечивает гибкость при распределении пространства. Основные компоненты сетки — это <Row> и <Col>:

import { Row, Col } from 'antd';

<Row gutter={[16, 16]}>
  <Col xs={24} sm={12} md={8} lg={6}>
    Контент 1
  </Col>
  <Col xs={24} sm={12} md={8} lg={6}>
    Контент 2
  </Col>
</Row>

  • gutter задаёт расстояние между колонками и строками. Может быть числом или массивом [горизонтальный, вертикальный].

  • xs, sm, md, lg, xl, xxl — брейкпоинты, определяющие количество колонок для разных ширин экрана.

    • xs — мобильные устройства
    • sm — планшеты
    • md — ноутбуки
    • lg — десктопы
    • xl, xxl — большие экраны

Использование этих пропсов позволяет строить адаптивные макеты без медиазапросов CSS.

Гибкое выравнивание и порядок элементов

Row поддерживает выравнивание по горизонтали и вертикали через пропсы:

  • justify: start | end | center | space-between | space-around | space-evenly
  • align: top | middle | bottom | stretch
<Row justify="center" align="middle">
  <Col span={6}>Блок 1</Col>
  <Col span={6}>Блок 2</Col>
</Row>

Col поддерживает динамический порядок с помощью пропса order, что удобно при перестройке макета под разные устройства:

<Col xs={{ span: 24, order: 2 }} md={{ span: 12, order: 1 }}>
  Контент
</Col>

Использование Layout для структурирования страниц

Компонент Layout помогает организовать страницы в стандартные области: Header, Sider, Content, Footer. Они совместимы с сеткой и адаптируются под размеры экрана:

import { Layout, Menu } from 'antd';
const { Header, Sider, Content, Footer } = Layout;

<Layout>
  <Header>Шапка</Header>
  <Layout>
    <Sider breakpoint="lg" collapsedWidth="0">
      <Menu mode="inline">
        <Menu.Item key="1">Пункт 1</Menu.Item>
      </Menu>
    </Sider>
    <Content>Основной контент</Content>
  </Layout>
  <Footer>Футер</Footer>
</Layout>
  • breakpoint на Sider автоматически скрывает боковую панель на малых экранах.
  • collapsedWidth задаёт ширину при сворачивании (обычно 0 для полного скрытия).

Адаптивные компоненты и типографика

Ant Design предлагает множество компонентов с встроенной адаптивностью:

  • Button, Input, Select — ширина может быть указана в процентах или через style={{ width: '100%' }}, чтобы занимать весь контейнер.
  • Typography автоматически масштабирует текст в пределах контейнера и поддерживает переносы. Например, <Title level={1}> будет уменьшаться на малых экранах при использовании медиа-стилей или встроенной сетки.

Медиазапросы и кастомизация

Для более сложной адаптивности можно использовать систему токенов и медиазапросов Ant Design:

import { theme } from 'antd';

const { useToken } = theme;
const { token } = useToken();

const style = {
  backgroundColor: token.colorBgContainer,
  padding: token.padding,
  '@media (max-width: 768px)': {
    padding: token.paddingSM,
  },
};
  • token содержит стандартные цвета, отступы и размеры компонентов.
  • Поддержка медиазапросов через объект позволяет централизованно управлять адаптивностью без прямого редактирования CSS.

Отзывчивые таблицы и списки

Table и List поддерживают горизонтальную прокрутку на мобильных устройствах:

<Table
  columns={columns}
  dataSource={data}
  scroll={{ x: 800 }}
/>
  • scroll={{ x: 800 }} делает таблицу горизонтально прокручиваемой, что предотвращает “ломку” макета на узких экранах.
  • List с grid={{ gutter: 16, xs: 1, sm: 2, md: 3 }} автоматически перестраивает количество колонок под размер экрана.

Адаптивные формы

Form.Item поддерживает настройку колонок для полей через labelCol и wrapperCol:

<Form
  labelCol={{ xs: { span: 24 }, sm: { span: 8 } }}
  wrapperCol={{ xs: { span: 24 }, sm: { span: 16 } }}
>
  <Form.Item label="Имя" name="name">
    <Input />
  </Form.Item>
</Form>
  • Поля формы автоматически выстраиваются в одну колонку на мобильных устройствах и в несколько колонок на десктопе.
  • Комбинация с сеткой <Row> и <Col> позволяет строить сложные адаптивные формы.

Заключение принципов

  • Использование Row и Col обеспечивает базовую адаптивность.
  • Layout структурирует страницы и поддерживает автоматическое сворачивание боковых панелей.
  • Компоненты Ant Design готовы к адаптивности, часто требуется только правильное распределение пространства и настройка ширины.
  • Токены и медиазапросы позволяют централизованно управлять стилями без дублирования CSS.
  • Таблицы, списки и формы можно легко сделать отзывчивыми с минимальными настройками.

Адаптивный макет в Ant Design строится как комбинация сетки, Layout и адаптивных компонентов с учетом токенов и брейкпоинтов. Это обеспечивает гибкость, масштабируемость и простоту поддержки интерфейсов на разных устройствах.

Оглавление