Компонент Ul и Ol

Библиотека Naive UI предоставляет удобные и гибкие компоненты для работы с списками, среди которых выделяются n-ul и n-ol. Эти компоненты позволяют создавать упорядоченные и неупорядоченные списки с расширенной кастомизацией внешнего вида, поддержкой иерархий и интеграцией с другими компонентами библиотеки.

Структура и базовое использование

n-ul создаёт неупорядоченный список (<ul>), а n-ol — упорядоченный (<ol>). Внутри каждого списка элементы оформляются через компонент n-li, аналогичный стандартному <li> HTML. Пример базовой структуры:

<template>
  <n-ul>
    <n-li>Первый элемент</n-li>
    <n-li>Второй элемент</n-li>
    <n-li>Третий элемент</n-li>
  </n-ul>

  <n-ol>
    <n-li>Первый элемент</n-li>
    <n-li>Второй элемент</n-li>
    <n-li>Третий элемент</n-li>
  </n-ol>
</template>

Особенности:

  • n-ul автоматически использует стандартные маркеры списка (точки).
  • n-ol поддерживает нумерацию элементов, начиная с 1 или заданного значения через атрибут start.
  • Все элементы n-li можно стилизовать индивидуально.

Пользовательская стилизация и маркеры

Компоненты Naive UI позволяют изменять маркеры, отступы и тип нумерации.

Свойства n-ul:

  • marker-type — задаёт стиль маркера. Возможные значения: 'disc', 'circle', 'square'.
  • padding — управляет внутренними отступами списка.

Пример с изменением маркеров и отступов:

<n-ul marker-type="circle" padding="20px">
  <n-li>Элемент A</n-li>
  <n-li>Элемент B</n-li>
</n-ul>

Свойства n-ol:

  • type — формат нумерации ('1', 'A', 'a', 'I', 'i').
  • start — число, с которого начинается нумерация.
  • reversed — логическое значение, которое инвертирует порядок нумерации.

Пример с нумерацией римскими цифрами, начиная с IV:

<n-ol type="I" start="4">
  <n-li>Элемент 4</n-li>
  <n-li>Элемент 5</n-li>
</n-ol>

Вложенные списки и иерархия

n-ul и n-ol поддерживают вложенные списки для создания сложной структуры. Вложенный список просто размещается как дочерний элемент внутри n-li:

<n-ul>
  <n-li>Фрукты
    <n-ul marker-type="square">
      <n-li>Яблоки</n-li>
      <n-li>Бананы</n-li>
    </n-ul>
  </n-li>
  <n-li>Овощи
    <n-ul marker-type="circle">
      <n-li>Морковь</n-li>
      <n-li>Брокколи</n-li>
    </n-ul>
  </n-li>
</n-ul>

Особенности вложенных списков:

  • Маркеры или нумерация дочерних списков могут отличаться от родительского.
  • Поддерживаются смешанные типы списков (например, ul внутри ol и наоборот).
  • Вложенные списки наследуют стили родителя, но могут переопределяться через отдельные свойства.

Стилизация элементов списка

Каждый n-li может иметь собственные стили:

  • Цвет текста: color
  • Размер шрифта: font-size
  • Отступы: margin и padding
  • Иконки перед элементом: с помощью слотов или компонента n-icon

Пример с иконкой и кастомным цветом:

<n-ul>
  <n-li>
    <template #prefix>
      <n-icon name="check" />
    </template>
    Завершённое задание
  </n-li>
  <n-li color="red">Незавершённое задание</n-li>
</n-ul>

Интерактивные списки

Naive UI позволяет делать списки интерактивными:

  • Выделение при клике: добавление @click на n-li
  • Состояние активного элемента: использование классов или :class для динамического изменения стиля
  • Динамическая генерация элементов: через v-for

Пример интерактивного списка с v-for:

<n-ul>
  <n-li v-for="item in items" :key="item.id" @click="selectItem(item)">
    {{ item.name }}
  </n-li>
</n-ul>

Поддержка Accessibility (доступность)

Компоненты n-ul и n-ol корректно поддерживают семантическую разметку HTML:

  • Автоматическое добавление роли list и listitem при необходимости
  • Поддержка клавиатурной навигации при использовании интерактивных элементов
  • Совместимость с экранными читалками

Интеграция с другими компонентами Naive UI

Списки часто комбинируются с:

  • n-divider — для визуального разделения элементов
  • n-icon — для добавления иконок
  • n-badge — для отображения статусов рядом с элементами

Пример списка с разделителями и бейджами:

<n-ul>
  <n-li>
    Сообщение 1
    <n-badge type="success" />
  </n-li>
  <n-divider />
  <n-li>
    Сообщение 2
    <n-badge type="warning" />
  </n-li>
</n-ul>

Компоненты n-ul и n-ol предоставляют широкие возможности для создания структурированных, стильных и интерактивных списков, полностью совместимых с философией Naive UI — гибкость, простота и визуальная согласованность с остальными элементами интерфейса.

Оглавление