Пустое состояние

Центрированный empty state для отсутствующих данных, пустых результатов поиска и error pages.

Установка

npx alixan-ui-nuxt add empty

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

No results

Try changing filters or search query.

<template>
  <Empty
    title="No results"
    description="Try changing filters or search query."
    button="Reset filters"
    button-color="secondary"
    @action="resetFilters"
  />
</template>

С медиа

Page not found

The page you are looking for does not exist or has been moved.

<template>
  <Empty
    title="Page not found"
    description="The page you are looking for does not exist or has been moved."
    button="Go home"
    button-color="primary"
    @action="navigateTo('/')"
  >
    <div class="flex size-24 items-center justify-center rounded-4xl bg-secondary text-primary">
      <Lottie name="error" :loop="false" width="80px" height="80px" />
    </div>
  </Empty>
</template>

Справочник API

Свойство	Тип	По умолчанию	Описание
title	string	-	Основной заголовок empty state.
description	string	-	Опциональный вспомогательный текст.
button	string	-	Опциональный текст кнопки действия.
buttonColor	'default' \| 'primary' \| 'secondary' \| 'destructive'	'primary'	Опциональный цвет кнопки действия.

Slots

Свойство	Описание
default	Опциональное media над заголовком.