列表项

Basic Item

A simple item with title and description.

Your profile has been verified.

用途

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

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

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

Add your item 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>

HTML 结构

<article class="item"> or <a 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.

<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

Last seen 5 months ago

No Team Members

Invite your team to collaborate on this project.

图片

Midnight City Lights - Electric Nights

Neon Dreams

3:45

Coffee Shop Conversations - Urban Stories

The Morning Brew

4:05

Digital Rain - Binary Beats

Cyber Symphony

3:30

组

标头

v0-1.5-sm

Everyday tasks and UI generation.

v0-1.5-lg

Advanced thinking or reasoning.

#列表项

Basic Item

Your profile has been verified.

#用途

Include CSS

Add your item HTML

#HTML 结构

#项目与字段

#变体

Default Variant

Outline Variant

Muted Variant

#尺寸

Default Size

Small Size

Extra Small Size

#示例

#图标

Security Alert

#头像

Evil Rabbit

No Team Members

#图片

Midnight City Lights - Electric Nights

Coffee Shop Conversations - Urban Stories

Digital Rain - Binary Beats

#组

shadcn

maxleiter

evilrabbit

#标头

v0-1.5-sm

v0-1.5-lg

v0-2.0-mini

#链接

Visit our documentation

External resource

#下拉菜单

#RTL

عنصر أساسي

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

列表项

用途

HTML 结构

项目与字段

变体

尺寸

示例

图标

头像

图片

组

标头

链接

下拉菜单

RTL