Item

列表项：前置媒体 + 内容 + 尾部操作三段式，可分组堆叠成列表，也可直接嵌入卡片组合出信息丰富的场景。

安装

添加组件

pnpm dlx @elyri/cli@latest add item

示例

收件箱卡片

把 Item.Group 放进 Card，用头像、标题、摘要与状态标签拼出一份待办收件箱。

Ada Lovelace

Shipped the analytics dashboard — ready for review.

Done

Alan Turing

Can you look at the auth flow before Friday?

Pending

Grace Hopper

Left two comments on the design tokens PR.

Open

import { Avatar } from './components/elyri/Avatar';
import { Button } from './components/elyri/Button';
import { Card } from './components/elyri/Card';
import { Item } from './components/elyri/Item';
import { Tag } from './components/elyri/Tag';

export function Example() {
  return (
    <Card variant="elevated">
      <Card.Header>
        <div>
          <Card.Title>Team inbox</Card.Title>
          <Card.Description>3 conversations need a reply.</Card.Description>
        </div>
        <Card.Action>
          <Tag size="sm" variant="accent">
            3 new
          </Tag>
        </Card.Action>
      </Card.Header>
      <Card.Content>
        <Item.Group>
          <Item variant="muted" size="sm">
            <Item.Media>
              <Avatar name="Ada Lovelace" size="sm" />
            </Item.Media>
            <Item.Content>
              <Item.Title>Ada Lovelace</Item.Title>
              <Item.Description>Shipped the analytics dashboard — ready for review.</Item.Description>
            </Item.Content>
            <Item.Actions>
              <Tag size="sm" variant="success">
                Done
              </Tag>
            </Item.Actions>
          </Item>
          <Item variant="muted" size="sm">
            <Item.Media>
              <Avatar name="Alan Turing" size="sm" />
            </Item.Media>
            <Item.Content>
              <Item.Title>Alan Turing</Item.Title>
              <Item.Description>Can you look at the auth flow before Friday?</Item.Description>
            </Item.Content>
            <Item.Actions>
              <Tag size="sm" variant="warning">
                Pending
              </Tag>
            </Item.Actions>
          </Item>
          <Item variant="muted" size="sm">
            <Item.Media>
              <Avatar name="Grace Hopper" size="sm" />
            </Item.Media>
            <Item.Content>
              <Item.Title>Grace Hopper</Item.Title>
              <Item.Description>Left two comments on the design tokens PR.</Item.Description>
            </Item.Content>
            <Item.Actions>
              <Tag size="sm">Open</Tag>
            </Item.Actions>
          </Item>
        </Item.Group>
      </Card.Content>
      <Card.Footer align="between">
        <span style={{ fontSize: 12, color: 'var(--elyri-ui-muted)' }}>Updated 2m ago</span>
        <Button size="sm" variant="ghost">
          Open inbox
        </Button>
      </Card.Footer>
    </Card>
  );
}

基础用法

图标媒体 + 标题描述 + 尾部按钮，一行承载一条完整信息。

Design review

Thursday, 14:00 · Figma

import { Button } from './components/elyri/Button';
import { Item } from './components/elyri/Item';

const calendarIcon = (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <rect x="3" y="5" width="18" height="16" rx="3" />
    <path d="M8 3v4M16 3v4M3 10h18" />
  </svg>
);

export function Example() {
  return (
    <Item variant="outline">
      <Item.Media variant="icon">{calendarIcon}</Item.Media>
      <Item.Content>
        <Item.Title>Design review</Item.Title>
        <Item.Description>Thursday, 14:00 · Figma</Item.Description>
      </Item.Content>
      <Item.Actions>
        <Button size="sm" variant="ghost">
          Join
        </Button>
      </Item.Actions>
    </Item>
  );
}

样式

default 透明底 / outline 描边 / muted 填充，按场景挑选。

default

variant="default"

outline

variant="outline"

muted

variant="muted"

import { Item } from './components/elyri/Item';

const variants = ['default', 'outline', 'muted'] as const;

const sparkIcon = (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <path d="M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9Z" />
  </svg>
);

export function Example() {
  return (
    <div className="demo-ui-grid">
      {variants.map((variant) => (
        <Item key={variant} variant={variant}>
          <Item.Media variant="icon">{sparkIcon}</Item.Media>
          <Item.Content>
            <Item.Title>{variant}</Item.Title>
            <Item.Description>variant="{variant}"</Item.Description>
          </Item.Content>
        </Item>
      ))}
    </div>
  );
}

尺寸

sm / md / lg 三档，媒体尺寸与 Avatar 对齐，可直接嵌入头像。

Small

Compact rows for dense lists.

Medium

The default row size.

Large

Roomier rows for emphasis.

import { Avatar } from './components/elyri/Avatar';
import { Item } from './components/elyri/Item';

export function Example() {
  return (
    <>
      <Item size="sm" variant="muted">
        <Item.Media>
          <Avatar name="Ada Lovelace" size="sm" />
        </Item.Media>
        <Item.Content>
          <Item.Title>Small</Item.Title>
          <Item.Description>Compact rows for dense lists.</Item.Description>
        </Item.Content>
      </Item>
      <Item size="lg" variant="muted">
        <Item.Media>
          <Avatar name="Grace Hopper" size="lg" />
        </Item.Media>
        <Item.Content>
          <Item.Title>Large</Item.Title>
          <Item.Description>Roomier rows for emphasis.</Item.Description>
        </Item.Content>
      </Item>
    </>
  );
}

可交互列表

开启 interactive 后悬停高亮，配合 tabIndex 支持键盘聚焦，适合可点击的设置项。

Push notifications

Get pinged on new mentions.

Privacy

Manage who can see your activity.

import { Card } from './components/elyri/Card';
import { Item } from './components/elyri/Item';

const bellIcon = (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <path d="M18 8a6 6 0 1 0-12 0c0 6-2 7-2 7h16s-2-1-2-7Z" />
    <path d="M10.5 20a2 2 0 0 0 3 0" />
  </svg>
);

export function Example() {
  return (
    <Card>
      <Card.Header>
        <Card.Title>Preferences</Card.Title>
      </Card.Header>
      <Item.Group>
        <Item variant="muted" interactive tabIndex={0}>
          <Item.Media variant="icon">{bellIcon}</Item.Media>
          <Item.Content>
            <Item.Title>Push notifications</Item.Title>
            <Item.Description>Get pinged on new mentions.</Item.Description>
          </Item.Content>
        </Item>
      </Item.Group>
    </Card>
  );
}

属性

属性	类型	默认值	说明
`variant`	`'default' \| 'outline' \| 'muted'`	`'default'`	视觉样式
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	内边距与字号尺寸
`interactive`	`boolean`	`false`	可交互：悬停高亮、聚焦显示焦点环
`Item.Group`	`HTMLAttributes<HTMLDivElement>`	—	分组容器，纵向堆叠多个 Item
`Item.Media`	`{ variant?: 'default' \| 'icon' \| 'image' }`	—	前置媒体区，variant 控制底衬
`Item.Content`	`HTMLAttributes<HTMLDivElement>`	—	内容区，纵向排列标题与描述
`Item.Title`	`HTMLAttributes<HTMLHeadingElement>`	—	标题
`Item.Description`	`HTMLAttributes<HTMLParagraphElement>`	—	描述，最多两行截断
`Item.Actions`	`HTMLAttributes<HTMLDivElement>`	—	尾部操作区
`...rest`	`HTMLAttributes`	—	其余属性透传给原生 div