Empty
Um componente para exibir um estado vazio.
Uso
Nenhum projeto encontrado
Parece que você ainda não adicionou nenhum projeto. Crie um para começar.
Título
Use a prop title para definir o título do estado vazio.
No projects found
<template>
<NEmpty title="No projects found" />
</template>
Descrição
Use a prop description para definir a descrição do estado vazio.
No projects found
It looks like you haven't added any projects. Create one to get started.
<template>
<NEmpty
title="No projects found"
description="It looks like you haven't added any projects. Create one to get started."
/>
</template>
Ícone
Use a prop icon para definir o ícone do estado vazio.
No projects found
It looks like you haven't added any projects. Create one to get started.
<template>
<NEmpty
icon="i-lucide-file"
title="No projects found"
description="It looks like you haven't added any projects. Create one to get started."
/>
</template>
Avatar
Use a prop avatar para definir o avatar do estado vazio.
No projects found
It looks like you haven't added any projects. Create one to get started.
<template>
<NEmpty
:avatar="{
src: 'https://github.com/nuxt.png'
}"
title="No projects found"
description="It looks like you haven't added any projects. Create one to get started."
/>
</template>
Ações
Use a prop actions para adicionar algumas ações de Button ao estado vazio.
No projects found
It looks like you haven't added any projects. Create one to get started.
<template>
<NEmpty
icon="i-lucide-file"
title="No projects found"
description="It looks like you haven't added any projects. Create one to get started."
:actions="[
{
icon: 'i-lucide-plus',
label: 'Create new'
},
{
icon: 'i-lucide-refresh-cw',
label: 'Refresh',
color: 'neutral',
variant: 'subtle'
}
]"
/>
</template>
Variante
Use a prop variant para alterar a variante do estado vazio.
No notifications
You're all caught up. New notifications will appear here.
<template>
<NEmpty
variant="naked"
icon="i-lucide-bell"
title="No notifications"
description="You're all caught up. New notifications will appear here."
:actions="[
{
icon: 'i-lucide-refresh-cw',
label: 'Refresh',
color: 'neutral',
variant: 'subtle'
}
]"
/>
</template>
Tamanho
Use a prop size para alterar o tamanho do estado vazio.
No notifications
You're all caught up. New notifications will appear here.
<template>
<NEmpty
size="xl"
icon="i-lucide-bell"
title="No notifications"
description="You're all caught up. New notifications will appear here."
:actions="[
{
icon: 'i-lucide-refresh-cw',
label: 'Refresh',
color: 'neutral',
variant: 'subtle'
}
]"
/>
</template>
Exemplos
Com slots
Use os slots disponíveis para criar um estado vazio mais complexo.
API
Props
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
icon | anyThe icon displayed above the title. | |
avatar | AvatarProps | |
title | string | |
description | string | |
actions | ButtonProps[]Display a list of Button in the body. | |
variant | 'outline' | "solid" | "outline" | "soft" | "subtle" | "naked" |
size | 'md' | "md" | "xs" | "sm" | "lg" | "xl" |
ui | { root?: SlotClass; header?: SlotClass; avatar?: SlotClass; title?: SlotClass; description?: SlotClass; body?: SlotClass; actions?: SlotClass; footer?: SlotClass; } |
Slots
| Slot | Type |
|---|---|
header | {} |
leading | { ui: object; } |
title | {} |
description | {} |
body | {} |
actions | {} |
footer | {} |
Tema
app.config.ts
export default defineAppConfig({
ui: {
empty: {
slots: {
root: 'relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0',
header: 'flex flex-col items-center gap-2 max-w-sm text-center',
avatar: 'shrink-0 mb-2',
title: 'text-highlighted text-pretty font-medium',
description: 'text-balance text-center',
body: 'flex flex-col items-center gap-4 max-w-sm',
actions: 'flex flex-wrap justify-center gap-2 shrink-0',
footer: 'flex flex-col items-center gap-2 max-w-sm'
},
variants: {
color: {
primary: '',
secondary: '',
accent: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
size: {
xs: {
avatar: 'size-8 text-base',
title: 'text-sm',
description: 'text-xs'
},
sm: {
avatar: 'size-9 text-lg',
title: 'text-sm',
description: 'text-xs'
},
md: {
avatar: 'size-10 text-xl',
title: 'text-base',
description: 'text-sm'
},
lg: {
avatar: 'size-11 text-[22px]',
title: 'text-base',
description: 'text-sm'
},
xl: {
avatar: 'size-12 text-2xl',
title: 'text-lg',
description: 'text-base'
}
},
variant: {
solid: '',
outline: '',
soft: '',
subtle: '',
naked: ''
}
},
compoundVariants: [
{
variant: 'solid',
color: 'primary',
class: {
root: 'bg-primary',
title: 'text-inverted',
description: 'text-inverted'
}
},
{
variant: 'outline',
color: 'primary',
class: {
root: 'bg-default ring ring-primary',
title: 'text-primary',
description: 'text-muted'
}
},
{
variant: 'soft',
color: 'primary',
class: {
root: 'bg-primary/10',
title: 'text-primary',
description: 'text-muted'
}
},
{
variant: 'subtle',
color: 'primary',
class: {
root: 'bg-primary/10 ring ring-primary',
title: 'text-primary',
description: 'text-muted'
}
},
{
variant: 'naked',
color: 'primary',
class: {
root: 'bg-transparent',
title: 'text-primary',
description: 'text-muted'
}
},
{
variant: 'solid',
color: 'neutral',
class: {
root: 'bg-inverted',
title: 'text-inverted',
description: 'text-dimmed'
}
},
{
variant: 'outline',
color: 'neutral',
class: {
root: 'bg-default ring ring-default',
description: 'text-muted'
}
},
{
variant: 'soft',
color: 'neutral',
class: {
root: 'bg-elevated/50',
description: 'text-toned'
}
},
{
variant: 'subtle',
color: 'neutral',
class: {
root: 'bg-elevated/50 ring ring-default',
description: 'text-toned'
}
},
{
variant: 'naked',
color: 'neutral',
class: {
description: 'text-muted'
}
}
],
defaultVariants: {
variant: 'naked',
size: 'md',
color: 'neutral'
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
empty: {
slots: {
root: 'relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0',
header: 'flex flex-col items-center gap-2 max-w-sm text-center',
avatar: 'shrink-0 mb-2',
title: 'text-highlighted text-pretty font-medium',
description: 'text-balance text-center',
body: 'flex flex-col items-center gap-4 max-w-sm',
actions: 'flex flex-wrap justify-center gap-2 shrink-0',
footer: 'flex flex-col items-center gap-2 max-w-sm'
},
variants: {
color: {
primary: '',
secondary: '',
accent: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
size: {
xs: {
avatar: 'size-8 text-base',
title: 'text-sm',
description: 'text-xs'
},
sm: {
avatar: 'size-9 text-lg',
title: 'text-sm',
description: 'text-xs'
},
md: {
avatar: 'size-10 text-xl',
title: 'text-base',
description: 'text-sm'
},
lg: {
avatar: 'size-11 text-[22px]',
title: 'text-base',
description: 'text-sm'
},
xl: {
avatar: 'size-12 text-2xl',
title: 'text-lg',
description: 'text-base'
}
},
variant: {
solid: '',
outline: '',
soft: '',
subtle: '',
naked: ''
}
},
compoundVariants: [
{
variant: 'solid',
color: 'primary',
class: {
root: 'bg-primary',
title: 'text-inverted',
description: 'text-inverted'
}
},
{
variant: 'outline',
color: 'primary',
class: {
root: 'bg-default ring ring-primary',
title: 'text-primary',
description: 'text-muted'
}
},
{
variant: 'soft',
color: 'primary',
class: {
root: 'bg-primary/10',
title: 'text-primary',
description: 'text-muted'
}
},
{
variant: 'subtle',
color: 'primary',
class: {
root: 'bg-primary/10 ring ring-primary',
title: 'text-primary',
description: 'text-muted'
}
},
{
variant: 'naked',
color: 'primary',
class: {
root: 'bg-transparent',
title: 'text-primary',
description: 'text-muted'
}
},
{
variant: 'solid',
color: 'neutral',
class: {
root: 'bg-inverted',
title: 'text-inverted',
description: 'text-dimmed'
}
},
{
variant: 'outline',
color: 'neutral',
class: {
root: 'bg-default ring ring-default',
description: 'text-muted'
}
},
{
variant: 'soft',
color: 'neutral',
class: {
root: 'bg-elevated/50',
description: 'text-toned'
}
},
{
variant: 'subtle',
color: 'neutral',
class: {
root: 'bg-elevated/50 ring ring-default',
description: 'text-toned'
}
},
{
variant: 'naked',
color: 'neutral',
class: {
description: 'text-muted'
}
}
],
defaultVariants: {
variant: 'naked',
size: 'md',
color: 'neutral'
}
}
}
})
]
})
Changelog
No recent changes