Item

fandhe-frontend-pre-styled-ui の item mod が提供するスタイル済み Item 部品です。Root / Media / Content / Title / Description / Actions / Header / Footer / Group / Separator の 10 パーツ構成で、media（アイコン・画像・アバター）+ title/description + actions からなる汎用リスト行を表現します。

variant（default / outline / muted）・size（default / sm）は headless 層が出力する data-variant / data-size を CSS セレクタとして参照するだけで、class ベースの軸は持ちません。root は href を渡すと div ではなく a として描画され、ポインタ・カーソル・下線解除に加えて hover 背景と :focus-visible リングが付きます。media は data-variant="icon" / "image" で固定サイズ・背景・角丸を切り替え、image variant では子 img を object-fit: cover でトリミングします。

group は複数 root の縦並びコンテナで、separator を挟んで区切れます。バリデーション・送信処理・データ整形といったアプリケーションロジックはこの部品では実装しません。

Demo

media（アイコン・画像・アバター）+ title/description + actions からなる汎用リスト行。variant/size は headless の data-variant/data-size を参照するのみで class 軸は持ちません。href を渡すと a として描画されます。

Default

default item

A generic list row with media and text.

default item

A generic list row with media and text.

IMG

default item

A generic list row with media and text.

Default

outline item

A generic list row with media and text.

outline item

A generic list row with media and text.

IMG

outline item

A generic list row with media and text.

Default

muted item

A generic list row with media and text.

muted item

A generic list row with media and text.

IMG

muted item

A generic list row with media and text.

Compact item (size=sm)

fandhe-frontend

GitHub repository (opens in a new tab)

→

First item

Second item

Features

ItemVariant（Default/Outline/Muted、item.rs recipe() の data-variant 参照）で見た目を切り替える
ItemSize（Default/Sm）で padding/gap を縮小する（item.rs data-size="sm" 参照）
root/media/content/title/description/actions/header/footer/group/separator の 10 パーツで media + title/description + actions からなる汎用リスト行を構造化する
root へ href を渡すと div ではなく a として描画され、ポインタ・下線解除・hover 背景・:focus-visible リングが付く（item.rs StateCondition::Attr("href") 参照）
media は ItemMediaVariant（Default/Icon/Image）で固定サイズ・背景・角丸を切り替え、Image variant では子 img を object-fit: cover でトリミングする
group は複数 root の縦並びコンテナで、separator を挟んで区切る
バリデーション・送信処理・データ整形はこの部品では実装しない（docs/policy/intentional-non-adoption.md §3.25 規則 1、item.rs モジュール doc「責務境界」節）

Anatomy

root
  media
  content
    title
    description
  actions
group
  separator

API Reference

Arguments

Name	Type	Default	Description
`variant`	`ItemVariant`	`Default`	見た目（#[default] は Default。Outline は枠線、Muted は背景色を切り替える）。
`size`	`ItemSize`	`Default`	サイズ（#[default] は Default。Sm は padding/gap を縮小する 2 値軸、item.rs モジュール doc参照）。
`href`	`Option<&str>`	`None`	root を a として描画するリンク先（headless 層がスキーム検証・external の target/rel 付与を担う）。
`external`	`bool`	`false`	true の場合 target="_blank" と rel の安全な組を不可分付与する（headless 層に委譲）。

Data Attributes

Part	Attribute	Observed Values
`media`	`data-variant`	`default`, `icon`, `image`
`root`	`data-size`	`default`, `sm`
`root`	`data-variant`	`default`, `muted`, `outline`
`separator`	`data-orientation`	`horizontal`

CSS Variables

Variable	Default
`--fandhe-item-bg`	—
`--fandhe-item-hover-bg`	`var(--fandhe-item-bg)`
`--fandhe-item-padding`	`var(--fandhe-space-4)`

Examples

Default item

media・title・description を組み合わせた標準形の例です。

Default item

A generic list row with media and text.

Linked item with actions

href 付き root（a として描画）と actions パーツを組み合わせる例です。

fandhe-frontend

Linked item with an action.

→

Accessibility

WAI-ARIA

Attribute	Description
(該当なし、href 指定時は a のネイティブ意味論)	root/media/content 等は role/aria-* を独自付与しないレイアウト用パーツであり、href を渡した場合のみ a のネイティブなリンク意味論に委ねる（item.rs モジュール doc参照）。