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/item.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/item.css";
@import "@a3s-lab/ui/components/status-badge.css";
@import "@a3s-lab/ui/components/button.css";
@import "@a3s-lab/ui/styles/a3s.css";

      当操作呈现为按钮时，项目组成按钮样式。

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

      添加列表项 HTML

      Add class="item" to a semantic element such as <article> or <a>. Use class="item-group" when listing multiple items.

      <article class="item" data-variant="outline">
  <section>
    <h3>Basic Item</h3>
    <p>A simple item with title and description.</p>
  </section>
  <aside>
    <button class="btn" data-variant="outline" data-size="sm">Action</button>
  </aside>
</article>

      当整个列表项是原生按钮时，使用行内容标记；分节元素不能作为按钮的合法子元素。

      <button type="button" class="item" data-variant="outline">
  <span data-item-content><strong>run_01JY7K</strong><small>精确 Agent 发布</small></span>
  <span data-item-actions><span class="status-badge" data-state="active">运行中</span></span>
</button>

      HTML 结构

      <article class="item">、<a class="item"> 或 <button class="item">

      The item root. Use data-variant="outline|muted" and data-size="sm|xs" when needed.

      <figure> Optional
      Media: icon, avatar, or image.
      <section>

      Primary content. Headings and paragraphs are styled automatically.

      <h2>, <h3>, or <h4>
      The item title.
      <p> Optional
      The item description.
      <aside> Optional
      Actions or trailing metadata.
      [data-item-content], [data-item-actions] 按钮列表项
      为原生按钮根元素提供行内主要内容和尾部元数据。
      <header>, <footer> Optional
      Full-width item regions.
      <div class="item-group" role="list"> Optional
      Groups related items. Use role="listitem" on child items when they are not native list items.

      项目与字段

      使用 field 进行表单控制和验证。使用 item 显示内容、操作和导航行。

      变体

      实时预览

      Default Variant

      Transparent background with no border.

      Outline Variant

      Outlined style with a visible border.

      Muted Variant

      Muted background for secondary content.

      尺寸

      实时预览

      Default Size

      The standard size for most use cases.

      Small Size

      A compact size for dense layouts.

      Extra Small Size

      The most compact size available.

      示例

      图标

      实时预览

      Security Alert

      New login detected from unknown device.

      头像

      实时预览
      Evil Rabbit

      Evil Rabbit

      Last seen 5 months ago

      @evilrabbit

      No Team Members

      Invite your team to collaborate on this project.

      图片

      实时预览
      Midnight City Lights

      Midnight City Lights - Electric Nights

      Neon Dreams

      3:45

      Coffee Shop Conversations

      Coffee Shop Conversations - Urban Stories

      The Morning Brew

      4:05

      Digital Rain

      Digital Rain - Binary Beats

      Cyber Symphony

      3:30

      组

      实时预览

      标头

      实时预览
      v0-1.5-sm

      v0-1.5-sm

      Everyday tasks and UI generation.

      v0-1.5-lg

      v0-1.5-lg

      Advanced thinking or reasoning.

      v0-2.0-mini

      v0-2.0-mini

      Open Source model for everyone.

      链接

      实时预览

      Visit our documentation

      Learn how to get started with our components.

      External resource

      Opens in a new tab with security attributes.

      下拉菜单

      实时预览

      RTL

      实时预览

      عنصر أساسي

      عنصر بسيط يحتوي على عنوان ووصف.

      تم التحقق من ملفك الشخصي.