Description

Компонент Description является мощным инструментом для структурированного отображения информации в виде списка пар «ключ — значение». Он используется для презентации свойств объектов, параметров или метаданных и обеспечивает аккуратное оформление с гибкой кастомизацией внешнего вида и поведения.

Импорт и базовое использование

Для начала компонент импортируется из библиотеки Naive UI:

import { NDescriptions, NDescriptionsItem } from 'naive-ui';

Базовый синтаксис представляет собой контейнер NDescriptions и вложенные элементы NDescriptionsItem:

<NDescriptions title="Профиль пользователя">
  <NDescriptionsItem label="Имя">Иван Иванов</NDescriptionsItem>
  <NDescriptionsItem label="Возраст">30</NDescriptionsItem>
  <NDescriptionsItem label="Email">ivan@example.com</NDescriptionsItem>
</NDescriptions>

Пояснения:

  • title — заголовок всей секции описания.
  • label — отображаемый ключ для каждой записи.
  • Контент между тегами NDescriptionsItem — значение, соответствующее ключу.

Основные свойства компонента NDescriptions

Свойство Тип Описание
title string Заголовок описания.
column number Количество колонок для распределения элементов. По умолчанию — 3.
bordered boolean Отображение границ таблицы описаний.
labelPlacement 'top' | 'left' Расположение текста ключа: сверху или слева.
size 'small' | 'medium' | 'large' Размер шрифта и отступов.
labelStyle CSSProperties Кастомный стиль для ключей.
contentStyle CSSProperties Кастомный стиль для значений.

Пример с колонками и границами:

<NDescriptions title="Информация о продукте" column={2} bordered>
  <NDescriptionsItem label="Название">Ноутбук</NDescriptionsItem>
  <NDescriptionsItem label="Модель">XPS 15</NDescriptionsItem>
  <NDescriptionsItem label="Процессор">Intel i7</NDescriptionsItem>
  <NDescriptionsItem label="ОЗУ">16 GB</NDescriptionsItem>
</NDescriptions>

Вложенные описания и кастомизация содержимого

Компонент поддерживает вложенные структуры и кастомные рендер-функции, позволяя отображать сложные данные:

<NDescriptions title="Заказ" column={1}>
  <NDescriptionsItem label="Клиент">
    <div>
      <strong>Имя:</strong> Алексей<br />
      <strong>Телефон:</strong> +7 999 123-45-67
    </div>
  </NDescriptionsItem>
  <NDescriptionsItem label="Продукты">
    <ul>
      <li>Монитор 27"</li>
      <li>Клавиатура механическая</li>
    </ul>
  </NDescriptionsItem>
</NDescriptions>

Использование слотов для расширенного контроля

Компонент NDescriptionsItem поддерживает слоты, что позволяет динамически изменять содержимое или добавлять интерактивные элементы:

<NDescriptions title="Профиль" column={2}>
  <NDescriptionsItem label="Имя">
    {{
      default: () => <strong>Екатерина</strong>
    }}
  </NDescriptionsItem>
  <NDescriptionsItem label="Действия">
    {{
      default: () => <button onCl ick={() => alert('Редактирование')}>Редактировать</button>
    }}
  </NDescriptionsItem>
</NDescriptions>

Стилизация ключей и значений

Для более тонкой настройки внешнего вида используются свойства labelStyle и contentStyle:

<NDescriptions title="Данные" column={2}>
  <NDescriptionsItem 
    label="Имя" 
    labelStyle={{ color: 'blue', fontWeight: 'bold' }}
    contentStyle={{ color: 'darkgreen' }}
  >
    Сергей
  </NDescriptionsItem>
  <NDescriptionsItem label="Роль" contentStyle={{ fontStyle: 'italic' }}>
    Администратор
  </NDescriptionsItem>
</NDescriptions>

Управление колонками и адаптивность

Свойство column позволяет гибко управлять макетом:

  • column={1} — каждая пара ключ-значение в отдельной строке.
  • column={2} — две пары на одной строке.
  • column={3} — стандартное трёхколоночное отображение.

Если контент не помещается, Naive UI автоматически переносит элементы, сохраняя читаемость.

Размеры и плотность отображения

Свойство size влияет на визуальную плотность:

  • small — компактные отступы, меньший шрифт.
  • medium — стандартный размер (по умолчанию).
  • large — увеличенные отступы и шрифт, подходит для презентационных панелей.
<NDescriptions title="Параметры" size="small" column={2}>
  <NDescriptionsItem label="Цвет">Красный</NDescriptionsItem>
  <NDescriptionsItem label="Вес">1.2 кг</NDescriptionsItem>
</NDescriptions>

Границы и визуальная группировка

Свойство bordered добавляет рамки вокруг каждой пары ключ-значение, создавая табличное оформление. Используется для отчетов, технической документации или административных панелей.

<NDescriptions title="Системная информация" bordered>
  <NDescriptionsItem label="OS">Windows 11</NDescriptionsItem>
  <NDescriptionsItem label="Версия">22H2</NDescriptionsItem>
  <NDescriptionsItem label="Процессор">Intel Core i5</NDescriptionsItem>
</NDescriptions>

Динамическое отображение данных

NDescriptions отлично подходит для работы с динамическими данными:

const userData = [
  { label: 'Имя', value: 'Анна' },
  { label: 'Возраст', value: 28 },
  { label: 'Email', value: 'anna@example.com' }
];

<NDescriptions title="Пользователь" column={2}>
  {userData.map(item => (
    <NDescriptionsItem label={item.label}>{item.value}</NDescriptionsItem>
  ))}
</NDescriptions>

Такой подход облегчает интеграцию с API и динамическими источниками данных.

Итоговые возможности

Компонент Description в Naive UI сочетает:

  • Гибкое распределение элементов по колонкам.
  • Поддержку кастомных стилей и слотов.
  • Встроенную адаптивность и управление плотностью отображения.
  • Удобство для динамических данных и вложенных структур.

Он идеально подходит для интерфейсов, где требуется четкая и аккуратная презентация информации в виде ключ-значение.

Оглавление