Empty состояние

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

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

Для начала компонент импортируется из пакета naive-ui:

import { NEmpty } from 'naive-ui';

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

<NEmpty description="Нет данных для отображения" />
  • description — текстовое описание пустого состояния. По умолчанию текст локализован на английский («No Data»).
  • Компонент автоматически подстраивает размеры и стили под родительский контейнер.

Кастомизация текста и иконки

Компонент позволяет менять не только текст, но и визуальное оформление:

<NEmpty
  description="Список задач пуст"
  image="https://example.com/empty.png"
/>
  • image — можно передать URL изображения, которое будет отображаться в пустом состоянии.
  • description — настраиваемый текст, который заменяет стандартное описание.
  • Кроме URL можно использовать слоты для более сложной кастомизации иконки или текста.
<NEmpty>
  <template #image>
    <img src="https://example.com/custom-icon.svg" alt="Empty Icon" />
  </template>
  <template #description>
    <div>Пока нет доступных записей</div>
  </template>
</NEmpty>

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

Размеры и стиль

Компонент NEmpty поддерживает несколько размеров, управляемых через проп size:

<NEmpty size="large" description="Нет элементов" />

Возможные значения:

  • small — компактное отображение
  • medium — стандартное (по умолчанию)
  • large — увеличенное, привлекающее больше внимания

Для дополнительной стилизации можно использовать CSS-классы или style проп:

<NEmpty 
  description="Список пуст" 
  style="color: #999; font-size: 16px;" 
/>

Локализация

Если приложение многоязычное, текст пустого состояния может быть локализован через проп description или слоты. В Naive UI отсутствует глобальный механизм локализации NEmpty, поэтому рекомендуется управлять текстом вручную:

<NEmpty :description="$t('emptyListMessage')" />

Здесь используется библиотека vue-i18n, но подход применим к любым решениям локализации.

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

Часто NEmpty интегрируют с NDataTable или NList, чтобы автоматически показывать пустое состояние, когда нет данных:

<NDataTable :columns="columns" :data="tableData">
  <template #empty>
    <NEmpty description="Данные отсутствуют" />
  </template>
</NDataTable>
  • Слот empty позволяет подменить стандартное сообщение таблицы.
  • Можно использовать любую кастомизацию для изображения, текста и даже кнопок действия.

Добавление действий

Для улучшения UX пустого состояния часто добавляют кнопки или ссылки с действиями, например, создание нового элемента:

<NEmpty>
  <template #description>
    <div>
      Список задач пуст
      <n-button size="small" @click="createTask">Добавить задачу</n-button>
    </div>
  </template>
</NEmpty>
  • Слот description поддерживает произвольный HTML и компоненты, что позволяет внедрять интерактивные элементы.
  • Это особенно полезно для приложений с формами, где пустое состояние может мотивировать пользователя на действие.

Советы по использованию

  • Использовать NEmpty всегда, когда есть возможность пустого контента. Это улучшает визуальное восприятие интерфейса и предотвращает ощущение «поломки».
  • Подбирать размер изображения и текста в зависимости от контекста: маленькие пустые состояния подходят для карточек, большие — для главных панелей.
  • Если приложение многоязычное, поддерживать локализацию через динамические строки, чтобы текст пустого состояния менялся автоматически.

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

Оглавление