List компонент

Компонент n-list из библиотеки Naive UI предназначен для отображения упорядоченных или неупорядоченных списков элементов с возможностью кастомизации внешнего вида, интерактивности и структуры. Он поддерживает как простые текстовые элементы, так и сложные кастомные слоты для каждого элемента списка.

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

Для использования List необходимо импортировать компоненты NList и NListItem из библиотеки:

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

Базовая структура списка выглядит так:

<template>
  <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>
</template>

Здесь каждый n-list-item является дочерним элементом списка. Важно: n-list сам по себе не рендерит HTML-список <ul> или <ol>, это абстрактный контейнер для элементов списка, стилизованный в соответствии с темой Naive UI.

Работа с динамическими списками

Для динамического создания элементов списка удобно использовать директиву v-for:

<template>
  <n-list>
    <n-list-item v-for="item in items" :key="item.id">
      {{ item.text }}
    </n-list-item>
  </n-list>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Элемент 1' },
        { id: 2, text: 'Элемент 2' },
        { id: 3, text: 'Элемент 3' }
      ]
    }
  }
}
</script>

Преимущества такого подхода: поддержка реактивности Vue, возможность добавления, удаления и фильтрации элементов без переписывания разметки.

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

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

<n-list>
  <n-list-item v-for="user in users" :key="user.id">
    <template #prefix>
      <img :src="user.avatar" class="avatar" />
    </template>
    <span>{{ user.name }}</span>
    <template #suffix>
      <n-button size="tiny" @click="sendMessage(user)">Сообщение</n-button>
    </template>
  </n-list-item>
</n-list>
  • prefix — слот для контента перед основным текстом элемента.
  • suffix — слот для контента после основного текста.

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

Выделение и интерактивность элементов

Компонент n-list-item поддерживает активное состояние с помощью свойства clickable и события click:

<n-list>
  <n-list-item
    v-for="item in items"
    :key="item.id"
    clickable
    @click="handleClick(item)"
  >
    {{ item.text }}
  </n-list-item>
</n-list>

При клике на элемент можно выполнять любые действия: навигацию, открытие модальных окон, изменение состояния родительского компонента.

Для визуального выделения текущего выбранного элемента удобно использовать реактивную переменную:

<n-list>
  <n-list-item
    v-for="item in items"
    :key="item.id"
    :class="{ active: selectedItem === item.id }"
    clickable
    @click="selectedItem = item.id"
  >
    {{ item.text }}
  </n-list-item>
</n-list>

<style>
.active {
  background-color: var(--n-color-primary-light);
}
</style>

Разделители и группировка

С помощью свойства bordered список может отображать элементы с разделительными линиями:

<n-list bordered>
  <n-list-item>Элемент A</n-list-item>
  <n-list-item>Элемент B</n-list-item>
</n-list>

Для логической группировки элементов используется компонент n-list-group:

<n-list>
  <n-list-group title="Группа 1">
    <n-list-item>Элемент 1</n-list-item>
    <n-list-item>Элемент 2</n-list-item>
  </n-list-group>
  <n-list-group title="Группа 2">
    <n-list-item>Элемент 3</n-list-item>
    <n-list-item>Элемент 4</n-list-item>
  </n-list-group>
</n-list>

Группы могут быть свернутыми по умолчанию, если использовать свойство collapsible.

Поддержка виртуализации и больших списков

Для больших наборов данных рекомендуется использовать виртуализацию с n-virtual-list, совместимым с n-list. Это значительно повышает производительность и снижает нагрузку на DOM:

<n-virtual-list :items="largeList" :item-size="40">
  <template #default="{ item }">
    <n-list-item>{{ item.text }}</n-list-item>
  </template>
</n-virtual-list>

Стиль и тема

Все элементы n-list и n-list-item поддерживают темы Naive UI. Можно кастомизировать цвет фона, шрифт, отступы через свойства темы или CSS-переменные:

.n-list-item {
  padding: 10px 20px;
  font-weight: 500;
  border-radius: 6px;
}
.n-list-item:hover {
  background-color: var(--n-color-primary-light);
}

Итоговая структура компонентов List

  • n-list — контейнер списка.
  • n-list-item — элемент списка, поддерживает слоты prefix, suffix, активное состояние и события.
  • n-list-group — группировка элементов с заголовком и возможностью сворачивания.
  • n-virtual-list — оптимизация для больших списков с поддержкой виртуализации.

Такой подход обеспечивает гибкость и высокую производительность при создании сложных пользовательских интерфейсов на основе Naive UI.

Оглавление