mirror of
https://github.com/huntabyte/shadcn-svelte.git
synced 2026-09-14 19:33:46 +08:00
Hubbe
116 lines
2.2 KiB
Markdown
116 lines
2.2 KiB
Markdown
---
|
|
title: Empty
|
|
description: Use the Empty component to display a empty state.
|
|
component: true
|
|
links:
|
|
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/empty
|
|
---
|
|
|
|
<script>
|
|
import ComponentPreview from "$lib/components/component-preview.svelte";
|
|
import PMAddComp from "$lib/components/pm-add-comp.svelte";
|
|
import PMInstall from "$lib/components/pm-install.svelte";
|
|
import Steps from "$lib/components/steps.svelte";
|
|
import InstallTabs from "$lib/components/install-tabs.svelte";
|
|
import Step from "$lib/components/step.svelte";
|
|
</script>
|
|
|
|
<ComponentPreview name="empty-demo">
|
|
|
|
<div></div>
|
|
|
|
</ComponentPreview>
|
|
|
|
## Installation
|
|
|
|
<InstallTabs>
|
|
{#snippet cli()}
|
|
<PMAddComp name="empty" />
|
|
{/snippet}
|
|
{#snippet manual()}
|
|
<Steps>
|
|
|
|
<Step>
|
|
|
|
Copy and paste the component source files linked at the top of this page into your project.
|
|
|
|
</Step>
|
|
|
|
</Steps>
|
|
{/snippet}
|
|
</InstallTabs>
|
|
|
|
## Usage
|
|
|
|
```svelte
|
|
<script lang="ts">
|
|
import * as Empty from "$lib/components/ui/empty/index.js";
|
|
import FolderCodeIcon from "@tabler/icons-svelte/icons/folder-code";
|
|
</script>
|
|
|
|
<Empty.Root>
|
|
<Empty.Header>
|
|
<Empty.Media variant="icon">
|
|
<FolderCodeIcon />
|
|
</Empty.Media>
|
|
<Empty.Title>No data</Empty.Title>
|
|
<Empty.Description>No data found</Empty.Description>
|
|
</Empty.Header>
|
|
<Empty.Content>
|
|
<Button>Add data</Button>
|
|
</Empty.Content>
|
|
</Empty.Root>
|
|
```
|
|
|
|
## Examples
|
|
|
|
### Outline
|
|
|
|
Use the `border` utility class to create a outline empty state.
|
|
|
|
<ComponentPreview name="empty-outline-demo">
|
|
|
|
<div></div>
|
|
|
|
</ComponentPreview>
|
|
|
|
### Background
|
|
|
|
Use the `bg-*` and `bg-gradient-*` utilities to add a background to the empty state.
|
|
|
|
<ComponentPreview name="empty-background-demo">
|
|
|
|
<div></div>
|
|
|
|
</ComponentPreview>
|
|
|
|
### Avatar
|
|
|
|
Use the `EmptyMedia` component to display an avatar in the empty state.
|
|
|
|
<ComponentPreview name="empty-avatar-demo">
|
|
|
|
<div></div>
|
|
|
|
</ComponentPreview>
|
|
|
|
### Avatar Group
|
|
|
|
Use the `EmptyMedia` component to display an avatar group in the empty state.
|
|
|
|
<ComponentPreview name="empty-avatar-group-demo">
|
|
|
|
<div></div>
|
|
|
|
</ComponentPreview>
|
|
|
|
### InputGroup
|
|
|
|
You can add an `InputGroup` component to the `EmptyContent` component.
|
|
|
|
<ComponentPreview name="empty-input-group-demo">
|
|
|
|
<div></div>
|
|
|
|
</ComponentPreview>
|