Оптимизация для малых экранов

Ant Design предоставляет гибкую систему для построения интерфейсов, которая автоматически подстраивается под разные размеры экранов. Центральным элементом является Grid System — сетка, основанная на 24 колонках, позволяющая управлять расположением компонентов с учетом ширины экрана. Основные свойства, влияющие на адаптивность:

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

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

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

В этом примере каждая колонка занимает всю ширину на очень малых экранах (xs=24), половину на малых (sm=12), треть на средних (md=8) и четверть на больших (lg=6). Такой подход обеспечивает удобочитаемость и правильное масштабирование контента.

Скрытие и отображение элементов

Для оптимизации интерфейса на малых устройствах важна возможность контролировать видимость компонентов. В Ant Design доступны два подхода:

  1. Grid responsive свойства — можно использовать xs={0} или sm={0}, чтобы полностью скрыть колонку на определённых разрешениях.
  2. Компонент Responsive — библиотека предоставляет вспомогательные функции для адаптивного рендеринга, например через useBreakpoint().

Пример:

import { Grid, Button } from 'antd';

const { useBreakpoint } = Grid;

const ResponsiveButton = () => {
  const screens = useBreakpoint();
  return (
    <>
      {screens.sm ? <Button>Кнопка для больших экранов</Button> : null}
      {!screens.sm ? <Button>Кнопка для маленьких экранов</Button> : null}
    </>
  );
};

Метод useBreakpoint() возвращает объект с булевыми значениями для каждого брейкпоинта (xs, sm, md, lg, xl, xxl), что позволяет динамически менять интерфейс без лишних перерендеров.

Оптимизация навигации

Для мобильных экранов особенно важно использовать компактные и интуитивные навигационные элементы:

  • Menu с режимом inline или vertical для боковых панелей, в сочетании с Drawer для выдвижного меню.
  • Drawer позволяет скрыть крупные элементы навигации за кнопкой, экономя место на экране.
  • Dropdown и Popover используются для дополнительных действий и подменю, предотвращая перегруженность интерфейса.

Пример адаптивного меню:

import { Menu, Drawer, Button } from 'antd';
import { useState } from 'react';

const MobileMenu = () => {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <Button onCl ick={() => setVisible(true)}>Меню</Button>
      <Drawer
        title="Навигация"
        placement="left"
        onCl ose={() => setVisible(false)}
        visible={visible}
      >
        <Menu mode="vertical">
          <Menu.Item key="1">Главная</Menu.Item>
          <Menu.Item key="2">О нас</Menu.Item>
          <Menu.Item key="3">Контакты</Menu.Item>
        </Menu>
      </Drawer>
    </>
  );
};

Такой подход позволяет полностью скрыть боковую панель на маленьких устройствах и отображать её только при взаимодействии пользователя.

Компоненты с адаптивной визуализацией

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

  • Table: свойство scroll={{ x: 'max-content' }} обеспечивает горизонтальную прокрутку вместо сжатия колонок.
  • Card: использование Grid внутри Card позволяет динамически перестраивать элементы.
  • Form.Item: свойства labelCol и wrapperCol могут быть заданы с разными брейкпоинтами (xs, sm и т.д.), чтобы форма оставалась читаемой на малых экранах.

Пример адаптивной таблицы:

<Table
  columns={columns}
  dataSource={data}
  scroll={{ x: 800 }}
/>

Где scroll.x определяет минимальную ширину таблицы и позволяет пользователю прокручивать контент горизонтально на узких экранах.

Практики оптимизации производительности

Для малых экранов критично уменьшать нагрузку на интерфейс:

  • Ленивая загрузка компонентов через React.lazy и Suspense.
  • Virtual List (List с virtual режимом) для отображения длинных списков.
  • Минимизация количества ререндеров через React.memo и правильное использование key в списках.

Пример виртуального списка:

import { List } from 'antd';

<List
  dataSource={data}
  renderItem={item => <List.Item>{item.name}</List.Item>}
  virtual
/>

Это позволяет поддерживать плавность интерфейса даже на мобильных устройствах с ограниченными ресурсами.

Итоговая структура интерфейса

При разработке под малые экраны следует комбинировать:

  • Сетку с адаптивными колонками.
  • Контроль видимости элементов через брейкпоинты.
  • Выдвижные и компактные навигационные решения.
  • Компоненты с встроенной адаптивностью и горизонтальной прокруткой.
  • Ленивая загрузка и виртуализация для больших наборов данных.

Такой подход обеспечивает чистый, удобный и быстрый интерфейс, который сохраняет функциональность и читаемость на устройствах с любой шириной экрана.

Оглавление