QList и QItem для списков

В Quasar Framework компоненты QList и QItem представляют собой ключевой инструмент для построения интерактивных списков в приложениях на Vue.js. Они обеспечивают удобное отображение элементов с возможностью кастомизации внешнего вида, добавления иконок, действий и управления событиями.

Компонент QList

QList используется как контейнер для списка элементов. Основные особенности:

  • Вертикальная организация: по умолчанию элементы располагаются вертикально.
  • Разделители: можно включить разделители между элементами через атрибут separator.
  • Поддержка заголовков: с помощью QItemLabel можно добавлять заголовки секций.
  • Кастомизация стилей: доступно применение классов и стилей, включая цветовую схему Quasar (color, dense, bordered).

Пример базового QList:

<template>
  <q-list bordered>
    <q-item clickable v-ripple>
      <q-item-section>
        <q-item-label>Элемент 1</q-item-label>
      </q-item-section>
    </q-item>
    <q-item clickable v-ripple>
      <q-item-section>
        <q-item-label>Элемент 2</q-item-label>
      </q-item-section>
    </q-item>
  </q-list>
</template>

Ключевые моменты:

  • Атрибут clickable делает элемент интерактивным, реагирующим на клики.
  • Директива v-ripple добавляет эффект волны при нажатии.
  • QItemSection разделяет контент на блоки: основное содержимое, иконки, доп. текст.

Компонент QItem

QItem представляет собой отдельный элемент списка. Основные возможности:

  • Многоуровневая структура: поддерживает несколько секций с использованием QItemSection.
  • Поддержка иконок: через QItemSection с атрибутом side можно размещать иконки слева или справа.
  • Интерактивные элементы: поддержка событий клика, двойного клика, наведения.

Пример с иконками и дополнительным текстом:

<template>
  <q-list bordered>
    <q-item clickable v-ripple>
      <q-item-section side>
        <q-icon name="mail" />
      </q-item-section>
      <q-item-section>
        <q-item-label>Почта</q-item-label>
        <q-item-label caption>Новые сообщения</q-item-label>
      </q-item-section>
      <q-item-section side>
        <q-badge color="red" floating label="3" />
      </q-item-section>
    </q-item>
  </q-list>
</template>

Особенности структуры QItem:

  1. Основная секция (default): содержит основной текст через QItemLabel.
  2. Сторонние секции (side): для иконок, счетчиков, действий.
  3. Кастомные компоненты: можно вставлять любые Vue-компоненты, сохраняя консистентность дизайна.

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

QList и QItem отлично подходят для рендеринга списков из массивов данных. Используется стандартный цикл v-for:

<template>
  <q-list bordered>
    <q-item v-for="user in users" :key="user.id" clickable v-ripple>
      <q-item-section>
        <q-item-label>{{ user.name }}</q-item-label>
        <q-item-label caption>{{ user.email }}</q-item-label>
      </q-item-section>
      <q-item-section side>
        <q-icon name="person" />
      </q-item-section>
    </q-item>
  </q-list>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: 'Алексей', email: 'alex@example.com' },
        { id: 2, name: 'Мария', email: 'maria@example.com' },
      ],
    };
  },
};
</script>

Преимущества динамического подхода:

  • Легкость обновления списка при изменении данных.
  • Возможность комбинировать с API-запросами.
  • Полная кастомизация каждой ячейки через вложенные компоненты.

Кастомизация внешнего вида

QItem поддерживает множество стилей и режимов отображения:

  • dense – уменьшенный вертикальный размер элемента.
  • active / selected – визуальное выделение выбранного элемента.
  • color – изменение фона или текста.
  • lines – контроль количества строк текста (single-line, two-line, three-line).

Пример с активным и плотным элементом:

<q-list>
  <q-item clickable v-ripple dense active>
    <q-item-section>
      <q-item-label>Выбранный элемент</q-item-label>
      <q-item-label caption>Описание</q-item-label>
    </q-item-section>
  </q-item>
</q-list>

Взаимодействие с событиями

QItem позволяет отслеживать события:

  • @click – одиночное нажатие.
  • @dblclick – двойное нажатие.
  • @mouseenter / @mouseleave – события наведения.
  • Внутри QItemSection можно размещать кнопки и интерактивные компоненты без нарушения структуры.

Пример обработки клика:

<q-item clickable v-ripple @click="onItemClick(user)">
  <q-item-section>
    <q-item-label>{{ user.name }}</q-item-label>
  </q-item-section>
</q-item>

<script>
export default {
  methods: {
    onItemClick(user) {
      console.log('Выбран пользователь:', user.name);
    },
  },
};
</script>

Иерархические и вложенные списки

QList поддерживает вложенные QItem для создания иерархии:

<q-list bordered>
  <q-item clickable v-ripple>
    <q-item-section>
      <q-item-label>Категория 1</q-item-label>
    </q-item-section>
  </q-item>
  <q-list padding>
    <q-item clickable v-ripple>
      <q-item-section>
        <q-item-label>Подэлемент 1.1</q-item-label>
      </q-item-section>
    </q-item>
  </q-list>
</q-list>
  • Атрибут padding у вложенного списка добавляет отступ.
  • Вложенные списки сохраняют единый стиль и интерактивность.

Использование с QSlideItem и QItemSideAction

Для реализации свайпов и действий с элементами можно комбинировать QItem с QSlideItem:

<q-slide-item @left="deleteItem(user)" @right="editItem(user)">
  <q-item clickable v-ripple>
    <q-item-section>
      <q-item-label>{{ user.name }}</q-item-label>
    </q-item-section>
  </q-item>
</q-slide-item>
  • Свайп влево или вправо вызывает функции deleteItem и editItem.
  • Позволяет создавать функциональные списки с интерактивными действиями.

QList и QItem в Quasar создают мощный, гибкий и настраиваемый инструмент для любых списков — от простых меню до сложных интерактивных интерфейсов с вложенными элементами, динамическими данными и кастомными действиями.

Оглавление