Использование шаблонов

В библиотеке Ant Design (AntD) шаблоны играют ключевую роль при организации интерфейсов, обеспечивая повторное использование компонентов и единообразие визуального стиля. Шаблон — это структурная единица, которая объединяет компоненты, стили и логику для формирования комплексного блока интерфейса.

В React шаблоны в AntD реализуются через комбинацию Layout, Grid и высокоуровневых компонентов, таких как Form, Table, Card и Menu. Их использование позволяет создавать приложения, где визуальная и функциональная согласованность достигается без дублирования кода.

Компонент Layout

Компонент Layout является основой для построения шаблонов в AntD. Он предоставляет набор вложенных структурных компонентов:

  • Layout.Header — верхняя панель приложения. Обычно содержит логотип, меню и элементы навигации.
  • Layout.Sider — боковая панель. Используется для навигации по разделам приложения.
  • Layout.Content — основной контент. Здесь располагаются ключевые компоненты интерфейса.
  • Layout.Footer — нижняя панель. Часто содержит информационные элементы и ссылки.

Пример базового шаблона:

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

function AppLayout() {
  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider>
        <Menu theme="dark" mode="inline">
          <Menu.Item key="1">Главная</Menu.Item>
          <Menu.Item key="2">Профиль</Menu.Item>
        </Menu>
      </Sider>
      <Layout>
        <Header style={{ background: '#fff', padding: 0 }}>Заголовок</Header>
        <Content style={{ margin: '16px' }}>
          Основной контент
        </Content>
        <Footer style={{ textAlign: 'center' }}>© 2026 Приложение</Footer>
      </Layout>
    </Layout>
  );
}

В этом примере структура шаблона разделена на боковую панель и основной контент, что позволяет повторно использовать Sider и Header на всех страницах приложения.

Grid и сетка шаблонов

Grid-система AntD обеспечивает адаптивное размещение элементов внутри шаблонов. Основные компоненты:

  • Row — строка сетки.
  • Col — колонка сетки.

Пример создания карточек с равномерным распределением:

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

function CardGrid() {
  return (
    <Row gutter={[16, 16]}>
      <Col span={8}>
        <Card title="Карточка 1">Содержимое 1</Card>
      </Col>
      <Col span={8}>
        <Card title="Карточка 2">Содержимое 2</Card>
      </Col>
      <Col span={8}>
        <Card title="Карточка 3">Содержимое 3</Card>
      </Col>
    </Row>
  );
}

Gutter управляет отступами между колонками, что делает шаблон гибким и аккуратным на разных экранах.

Использование Form как шаблона

Формы в AntD строятся с помощью компонента Form. Они могут выступать в роли повторяемых шаблонов для ввода данных:

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

function UserForm() {
  const [form] = Form.useForm();

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

  return (
    <Form form={form} layout="vertical" onFin ish={onFinish}>
      <Form.Item name="username" label="Имя пользователя" rules={[{ required: true }]}>
        <Input placeholder="Введите имя" />
      </Form.Item>
      <Form.Item name="email" label="Email" rules={[{ required: true, type: 'email' }]}>
        <Input placeholder="Введите email" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">Отправить</Button>
      </Form.Item>
    </Form>
  );
}

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

Таблицы и списки как шаблоны

Table и List предоставляют гибкие средства для отображения табличных данных и списков:

import { Table } from 'antd';

const dataSource = [
  { key: '1', name: 'Иван', age: 28, address: 'Москва' },
  { key: '2', name: 'Мария', age: 22, address: 'Санкт-Петербург' }
];

const columns = [
  { title: 'Имя', dataIndex: 'name', key: 'name' },
  { title: 'Возраст', dataIndex: 'age', key: 'age' },
  { title: 'Адрес', dataIndex: 'address', key: 'address' }
];

function UserTable() {
  return <Table dataSource={dataSource} columns={columns} />;
}

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

Кастомизация и повторное использование

Шаблоны AntD можно расширять через композицию компонентов и props. Пример повторного использования карточек с динамическим содержимым:

function InfoCard({ title, content }) {
  return <Card title={title}>{content}</Card>;
}

function Dashboard() {
  const cards = [
    { title: 'Продажи', content: '1500' },
    { title: 'Пользователи', content: '320' },
    { title: 'Заказы', content: '87' }
  ];

  return (
    <Row gutter={[16, 16]}>
      {cards.map((card, index) => (
        <Col span={8} key={index}>
          <InfoCard title={card.title} content={card.content} />
        </Col>
      ))}
    </Row>
  );
}

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

Итоговое построение страницы

Шаблон страницы в AntD обычно комбинирует Layout, Grid, Form и Table, обеспечивая:

  • Четкое разделение зон интерфейса.
  • Адаптивность на разных устройствах.
  • Легкую поддержку и повторное использование компонентов.
  • Стандартизированный визуальный стиль через системные компоненты и темы AntD.

Использование шаблонов является основой для разработки масштабируемых приложений на React с Ant Design, позволяя строить сложные интерфейсы быстро и эффективно.

Оглавление