Подключение к проекту на чистом JavaScript

Для работы с Ant Design на чистом JavaScript, без использования React-фреймворков, необходимо подключить библиотеку через CDN или собрать проект с помощью сборщика, поддерживающего модули ES6. Ant Design предоставляет как CSS-стили, так и JavaScript-компоненты, которые можно интегрировать напрямую в HTML.

Подключение через CDN

Самый простой способ начать использовать Ant Design — подключить библиотеку через CDN. В <head> HTML-документа добавляются ссылки на CSS и JS:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/antd@5/dist/antd.min.css">
<script src="https://cdn.jsdelivr.net/npm/antd@5/dist/antd.min.js"></script>
  • antd.min.css — основной стиль компонентов.
  • antd.min.js — библиотека JavaScript для работы интерактивных элементов.

После подключения можно создавать компоненты Ant Design в HTML и управлять ими через JavaScript.

Использование компонентов через JavaScript

Компоненты Ant Design предоставляются через объект antd. Например, для создания кнопки:

<div id="button-container"></div>

<script>
  const { Button } = antd;

  const container = document.getElementById('button-container');

  const button = Button({
    type: 'primary',
    children: 'Нажми меня',
    onClick: () => alert('Кнопка нажата')
  });

  container.appendChild(button);
</script>

Ключевые моменты:

  • Компоненты создаются как обычные DOM-элементы.
  • Свойства компонента передаются через объект при создании.
  • Обработчики событий задаются через onClick, onChange и аналогичные свойства.

Подключение через npm и сборщик

Если проект использует сборщик вроде Webpack или Vite, рекомендуется устанавливать Ant Design через npm:

npm install antd

После установки подключение производится через ES-модули:

import 'antd/dist/reset.css';
import { Button, DatePicker } from 'antd';

const button = Button({
  type: 'primary',
  children: 'Нажми меня',
  onClick: () => console.log('Clicked')
});

document.body.appendChild(button);

const datePicker = DatePicker();
document.body.appendChild(datePicker);
  • import 'antd/dist/reset.css' загружает базовые стили и сбрасывает стили браузера для корректного отображения.
  • Компоненты импортируются выборочно для оптимизации размера бандла.

Интеграция с существующим HTML

Ant Design на чистом JavaScript позволяет использовать стандартный HTML и манипулировать элементами через JavaScript. Пример добавления карточки (Card) и кнопки в один контейнер:

<div id="app"></div>

<script>
  const { Card, Button } = antd;

  const card = Card({
    title: 'Заголовок карточки',
    children: 'Содержимое карточки'
  });

  const button = Button({
    type: 'primary',
    children: 'Действие',
    onClick: () => alert('Кнопка в карточке')
  });

  card.appendChild(button);

  document.getElementById('app').appendChild(card);
</script>

Работа с темами и кастомизация стилей

Ant Design поддерживает кастомизацию через CSS-переменные. Для изменения основных цветов можно использовать стандартный CSS:

:root {
  --antd-primary-color: #1890ff;
  --antd-success-color: #52c41a;
  --antd-error-color: #ff4d4f;
}

Эти переменные влияют на все компоненты, где используются стандартные цвета Ant Design.

Загрузка дополнительных компонентов

Некоторые компоненты Ant Design, такие как Modal, требуют явного вызова метода для создания и отображения:

const { Modal, Button } = antd;

Button({
  type: 'primary',
  children: 'Открыть модальное окно',
  onClick: () => {
    Modal.info({
      title: 'Информация',
      content: 'Это модальное окно'
    });
  }
}).mount(document.body);
  • Modal.info, Modal.success, Modal.error — готовые методы для создания различных типов модальных окон.
  • Компоненты можно динамически добавлять в DOM без перезагрузки страницы.

Асинхронная загрузка и lazy-loading

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

const loadButton = async () => {
  const { Button } = await import('https://cdn.jsdelivr.net/npm/antd@5/dist/antd.min.js');
  const button = Button({
    type: 'primary',
    children: 'Динамическая кнопка'
  });
  document.body.appendChild(button);
};

loadButton();
  • Динамический импорт позволяет использовать компоненты только там, где они нужны.
  • Особенно полезно для больших приложений с множеством модулей Ant Design.

Поддержка форм и валидации

Ant Design предоставляет объект Form для работы с формами:

const { Form, Input, Button } = antd;

const form = Form({
  onFinish: (values) => console.log('Данные формы', values)
});

form.appendChild(Input({ name: 'username', placeholder: 'Имя пользователя' }));
form.appendChild(Button({ type: 'primary', htmlType: 'submit', children: 'Отправить' }));

document.body.appendChild(form);
  • Form автоматически обрабатывает события отправки и валидацию.
  • Элементы формы управляются через стандартные свойства и методы компонентов.

Совместимость и ограничения

  • Ant Design на чистом JavaScript работает во всех современных браузерах.
  • Для IE11 и старых версий требуется подключение полифиллов.
  • Некоторые сложные компоненты, например TreeSelect или Transfer, могут требовать дополнительных стилей или данных для корректного отображения.

Подключение Ant Design в проект на чистом JavaScript предоставляет возможность использовать мощные UI-компоненты без полного перехода на React, обеспечивая гибкость, модульность и высокую визуальную консистентность интерфейсов.

Оглавление