For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.4.1/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.4.1/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.4.1/components/empty.md.
A3S UI
  • 简体中文
  • v0.4.1

      • 空状态

      空状态解释为什么没有内容，并在有可行下一步时提供单一、明确的恢复操作。

      实时预览

      还没有项目

      创建第一个项目，或导入已有仓库继续工作。

      用法

      引入 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或批量程序导入？请参见安装页。

      添加空状态 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.

      头像

      实时预览
      @shadcn

      User Offline

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

      头像组

      实时预览
      @shadcn@maxleiter@evilrabbit

      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

      实时预览

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

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