Бос күй

Дерек жоқ кезде, іздеу нәтижелері бос болғанда және error pages үшін центрленген empty state.

Орнату

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	-	Қосымша action батырмасының мәтіні.
buttonColor	'default' \| 'primary' \| 'secondary' \| 'destructive'	'primary'	Қосымша action батырмасының түсі.

Slots

Қасиет	Сипаттама
default	Тақырып үстінде көрсетілетін қосымша media.