Thành phần

Item

Row for a record: media, title, description and actions, closed by an ink hairline; renders as a link with the render prop.

Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.

Notice of tender, lot 4

Filed 3 November. Open for questions until 24 November.

Addendum to the specification

Filed 5 November. Replaces section 2.

Install

bash

npx shadcn add @eloquent/item

Usage

tsx

import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemTitle } from "@/components/ui/item";

<ItemGroup role="list" aria-label="Recent filings">
  <Item role="listitem">
    <ItemMedia variant="icon"><FileTextIcon aria-hidden="true" /></ItemMedia>
    <ItemContent>
      <ItemTitle>Notice of tender, lot 4</ItemTitle>
      <ItemDescription>Filed 3 November.</ItemDescription>
    </ItemContent>
    <ItemActions>…</ItemActions>
  </Item>
</ItemGroup>

Make a whole row a link with render:

tsx

<Item render={<a href="/notices/4" />}>…</Item>

For a list of plain rows, set role="list" on ItemGroup and role="listitem" on each Item. A row rendered as a link keeps its link role, so leave the list role off the group.

States

Default

A hairline under the row.

Outline

Hairlines above and below.

Muted

A tint-1 panel closed by a hairline.

Small

As a link

Tab to focus: a 2px ink outline. No hover effect.

State	Treatment
Default	A 1px ink hairline closes the row; the last row in an `ItemGroup` drops it
`outline`	Hairlines above and below
`muted`	A `tint-1` panel, closed by a hairline
`size="sm"`	Tighter padding
Focus-visible (link or button row)	2px ink outline, 2px offset

A row has no hover effect.

Keyboard

Key	Action
Tab / Shift+Tab	Move to the next or previous focusable thing in a row: its actions, or the row itself when it is a link
Enter	Follow a link row
Space	Activate a button row or an action button

A plain row is not focusable.

Vietnamese

Thông báo mời thầu, gói 4

Nộp ngày 3 tháng 11. Nhận câu hỏi đến ngày 24 tháng 11.

Phụ lục đặc tả kỹ thuật

Nộp ngày 5 tháng 11. Thay thế mục 2.

Ink adaptation

Upstream shadcn's rounded border, bg-muted panel and hover colour are removed. Structure comes from hairlines: the default row has one underneath, outline has one above and below. The title is Barlow 600 and the description is Source Serif 4 in full ink. The icon cell in ItemMedia is a square with a 1px ink rule.