Item

نصب

pnpm dlx @simurgh-ui/cli add item

import {
  ItemGroup,
  Item,
  ItemMedia,
  ItemContent,
  ItemTitle,
  ItemDescription,
  ItemActions,
} from '@simurgh-ui/react/item';
import '@simurgh-ui/styles/item.css';

Vue و Angular partهای متناظر را از subpath item صادر می‌کنند.

پیش‌نمایش واقعی

Live component Item ◆

D

Design system

Updated two minutes ago

Open

استفاده

<ItemGroup aria-label="پروژه‌ها">
  <Item>
    <ItemMedia aria-hidden="true">س</ItemMedia>
    <ItemContent>
      <ItemTitle>سیستم طراحی</ItemTitle>
      <ItemDescription>دو دقیقه پیش به‌روزرسانی شد</ItemDescription>
    </ItemContent>
    <ItemActions>
      <Button>بازکردن</Button>
    </ItemActions>
  </Item>
</ItemGroup>

ساختار و دسترس‌پذیری

Group را نام‌گذاری و ترتیب DOM را media، content و action نگه دارید. Item به‌خودی‌خود کلیک‌پذیر نیست؛ action را با Button یا Link واقعی بسازید. اگر کل ردیف یک مقصد دارد یک Link گستردهٔ قابل‌فهم بهتر از چند handler هم‌پوشان است.

Media تزئینی باید پنهان شود. Title هویت اصلی و Description metadata ثانویه است. در viewport کوچک action نباید پیش از عنوان در ترتیب focus ظاهر شود.

Last verified on 2026-08-13 against Simurgh registry 0.1.1.