Empty
Empty is used to when a List or Table has no items.
Usage
import { Empty } from 'stwui';
import Empty from 'stwui/empty';
Avatar Dropdown
No Projects
Get started by creating a new project.
<script lang="ts">
import { Empty, Button } from 'stwui';
const lock = "svg-path";
const plus_circle = "svg-path";
</script>
<Empty>
<Empty.Icon slot="icon" data={lock} />
<Empty.Title slot="title">No Projects</Empty.Title>
<Empty.Description slot="description">
Get started by creating a new project.
</Empty.Description>
<Empty.Action slot="action">
<Button type="primary" on:click={() => console.log('clicked new project')}>
<Button.Leading slot="leading" data={plus_circle} />
New Project
</Button>
</Empty.Action>
</Empty>
Empty Slots
| icon | <Empty.Icon slot="icon" /> |
| title | <Empty.Title slot="title" /> |
| description | <Empty.Description slot="description" /> |
| action | <Empty.Action slot="action" /> |
| default | |
Empty.Icon Props
| data | string (IconData) | |
| viewBox | string | 0 0 24 24 |
| size | string | 24px |
| width | string | 24px |
| height | string | 24px |
| color | string | currentColor |
| stroke | string | undefined | |
| fill | string | currentColor |
Empty Class Identifiers
| stwui-empty |
| stwui-empty-title |
| stwui-empty-description |
| stwui-empty-icon |
| stwui-empty-action |