空状态

No Projects Yet

You haven't created any projects yet. Get started by creating your first project.

用途

Include CSS

导入 Tailwind 和一个完整的 A3S UI 样式包。

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

或者只导入基本CSS、空组件CSS和一个样式包。

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/empty.css";
@import "@a3s-lab/ui/styles/a3s.css";

使用CDN或批量程序导入？请参见安装页。

Add your empty HTML

将 class="empty" 添加到语义容器。该组件设置常见子项的样式，例如 header、figure、标题、描述和 footer。

<section class="empty">
  <header>
    <figure><svg class="lucide lucide-folder-code" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 10.5 8 13l2 2.5" /><path d="m14 10.5 2 2.5-2 2.5" /><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2z" /></svg></figure>
    <h3>No Projects Yet</h3>
    <p>You haven't created any projects yet. Get started by creating your first project.</p>
  </header>
  <footer>
    <div class="flex gap-2">
      <button class="btn">Create Project</button>
      <button class="btn" data-variant="outline">Import Project</button>
    </div>
    <a href="#" class="btn text-muted-foreground" data-variant="link" data-size="sm">
      Learn More
<svg class="lucide lucide-arrow-up-right" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10" /><path d="M7 17 17 7" /></svg>
    </a>
  </footer>
</section>

HTML 结构

<section class="empty">

The empty-state container.

<header>

Groups the media, title, and description.

<figure> Optional: Icon, avatar, image, or avatar group. An icon-only figure is styled automatically with :has(> svg:only-child).
<h2>, <h3>, or <h4>: The empty-state title.
<p> Optional: The empty-state description.

<section> or <footer> Optional

Actions and supporting content.

示例

概要

Cloud Storage Empty

Upload files to your cloud storage to access them anywhere.

背景

No Notifications

You're all caught up. New notifications will appear here.

头像

User Offline

This user is currently offline. You can leave a message to notify them or try again later.

头像组

No Team Members

Invite your team to collaborate on this project.

输入组

404 - Not Found

The page you're looking for doesn't exist. Try searching for what you need below.

RTL

لا توجد مشاريع بعد

لم تقم بإنشاء أي مشاريع بعد. ابدأ بإنشاء مشروعك الأول.

#空状态

#用途

Include CSS

Add your empty HTML

#HTML 结构

#示例

#概要

#背景

#头像

#头像组

#输入组

#RTL

空状态

用途

HTML 结构

示例

概要

背景

头像

头像组

输入组

RTL