ListItem

Компонент ListItem библиотеки Naive UI предназначен для отображения элементов списков с расширенной кастомизацией. Он служит строительным блоком для создания списков с иконками, аватарами, кнопками действий и дополнительной информацией. Использование ListItem позволяет управлять визуальной структурой и поведением каждого элемента списка независимо.

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

Для начала необходимо импортировать компонент из библиотеки:

import { NList, NListItem } from 'naive-ui';

Базовая структура списка:

<n-list>
  <n-list-item>Элемент 1</n-list-item>
  <n-list-item>Элемент 2</n-list-item>
  <n-list-item>Элемент 3</n-list-item>
</n-list>

В этом примере каждый элемент списка представлен простым текстом. NListItem автоматически наследует стили от контейнера NList.

Атрибуты и свойства

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

  • title — заголовок элемента. Позволяет отображать текст или VNode внутри компонента.
  • description — дополнительный текст под заголовком.
  • disabled — логическое значение. Отключает элемент, делая его неактивным.
  • extra — слот для размещения дополнительных элементов, таких как кнопки или иконки.
  • avatar — слот или строка с URL изображения для отображения аватара.
  • onClick — функция, которая срабатывает при клике на элемент.

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

<n-list>
  <n-list-item title="Заголовок 1" description="Описание элемента 1" />
  <n-list-item title="Заголовок 2" description="Описание элемента 2" />
</n-list>

Слоты компонента

Слоты предоставляют гибкость в кастомизации:

  1. default — основной контент элемента. Используется, если требуется сложная структура текста или кастомные компоненты.
  2. avatar — позволяет вставить иконку, аватар или изображение перед заголовком.
  3. extra — элементы справа от основного контента, например кнопки действий или индикаторы.
  4. header и footer — используются в составе списка, чтобы группировать элементы.

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

<n-list>
  <n-list-item>
    <template #avatar>
      <img src="avatar.png" alt="avatar" />
    </template>
    <template #default>
      <strong>Пользователь 1</strong>
      <p>Описание активности</p>
    </template>
    <template #extra>
      <n-button size="small">Действие</n-button>
    </template>
  </n-list-item>
</n-list>

Состояния и интерактивность

NListItem поддерживает несколько визуальных состояний:

  • hover — при наведении элемент подсвечивается, если не установлен disabled.
  • selected — может быть использован в сочетании с логикой выбора для выделения активного элемента.
  • disabled — делает элемент недоступным для взаимодействия.

Пример с отключенным элементом:

<n-list>
  <n-list-item title="Активный элемент" />
  <n-list-item title="Отключенный элемент" disabled />
</n-list>

Интеграция с компонентом NList

Компонент NList предоставляет контейнер для списка и управляет структурой и стилями NListItem. В NList можно задавать:

  • bordered — отображение границ между элементами.
  • size — размер элементов (small, medium, large).
  • hoverable — включение подсветки при наведении на все элементы.
  • split — добавление разделителей между элементами.

Пример:

<n-list bordered size="medium" hoverable>
  <n-list-item title="Элемент 1" />
  <n-list-item title="Элемент 2" />
  <n-list-item title="Элемент 3" />
</n-list>

Комбинация с другими компонентами

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

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

<n-list>
  <n-list-item>
    <template #avatar>
      <n-avatar src="user1.png" />
    </template>
    <template #default>
      <strong>Никита</strong>
      <p>Добавил новый комментарий</p>
    </template>
    <template #extra>
      <n-button size="tiny" secondary>Ответить</n-button>
    </template>
  </n-list-item>
</n-list>

Рекомендации по использованию

  • Для больших списков рекомендуется использовать виртуализацию с компонентом NVirtualList вместе с NListItem.
  • При динамическом рендеринге элементов использовать :key для оптимизации обновления DOM.
  • Для сложных интерактивных списков применяются слоты extra и avatar вместо прямой вставки HTML в title для лучшей читаемости и поддержки реактивности.

Настройка стилей

Naive UI позволяет настраивать визуальное оформление через CSS-переменные:

  • --n-list-item-padding — внутренние отступы.
  • --n-list-item-font-size — размер текста.
  • --n-list-item-color — цвет текста.
  • --n-list-item-border-color — цвет разделителей.

Пример переопределения стилей:

<n-list style="--n-list-item-padding: 16px; --n-list-item-font-size: 14px;">
  <n-list-item title="Элемент с кастомным стилем" />
</n-list>

Итоговая структура элемента

Элемент NListItem можно рассматривать как многоуровневый контейнер с тремя ключевыми зонами:

  1. Avatar — визуальный идентификатор.
  2. Main content — заголовок и описание.
  3. Extra — дополнительные действия и элементы управления.

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

Оглавление