Empty State

fandhe-frontend-pre-styled-ui の empty_state mod が提供するスタイル済み Empty State 部品です。

検索結果 0 件・初期状態など「表示すべきコンテンツがない」ことを伝える部品です。content/indicator/title/description/actions の 5 パーツで構成し、size variant で padding・gap・indicator/title/description の文字サイズが連動します。読み込み中の占位表示には Skeleton を検討してください。

shadcn/ui の Empty と突合し、root の variant（Plain/Outline/Subtle、既定 Plain）と indicator の variant（indicator_with、Plain/Boxed、既定 Plain）を追加しました。Outline は破線枠、Subtle は淡色単色背景（shadcn の半透明グラデーションはトークン体系で表現できないため単色へ置換）、Boxed は media 部分を bg-muted の角丸タイルにします。いずれも独自語彙の追加バリアントです。破壊的変更: variant は EmptyStateProps の必須フィールドとして追加したため、EmptyStateProps { size } のようなフィールド全列挙の構造体リテラルは本変更以降コンパイルできなくなります。既存の呼び出しは EmptyStateProps { size, ..Default::default() } へ移行してください。不変なのは「既定 EmptyStateProps::default() を渡したときの CSS 出力・HTML 出力」と既存の CSS ブロックであり、各 variant 用の CSS ブロックは新規追加されています。shadcn の EmptyHeader（indicator/title/description をまとめる専用グループ）に相当する slot は追加していません。content の gap と indicator/actions の区画間余白で同等の視覚リズムを既に実現しているためです。

Demo

indicator / title / description / actions で構成する空状態レイアウト。colorPalette 軸は持たない中立コンテナです。size（xs〜xl）は root の padding・gap・indicator/title/description の文字サイズが連動します。variant（plain / outline / subtle）は root の枠線・背景を、indicator の boxed variant は媒体の角丸タイル表示を切り替えます（イシュー #2047、shadcn/ui 突合）。

∅

No results found

Try adjusting your search or filter to find what you are looking for.

∅

Xs size

No results found.

∅

Sm size

No results found.

∅

Md size

No results found.

∅

Lg size

No results found.

∅

Xl size

No results found.

∅

Plain variant

No results found.

∅

Outline variant

No results found.

∅

Subtle variant

No results found.

∅

No projects yet

Create your first project to get started.

No team members

Invite teammates to collaborate.

∅

Subscribe for updates

Get notified when new results appear.

Features

content/indicator/title/description/actions の 5 パーツで空状態の掲示を構造化する（crates/pre-styled-ui/src/empty_state.rs の recipe 関数）
size variant（既定 Md）が root の --fandhe-empty-state-* custom property 経由で padding・gap・indicator/title/description の文字サイズを連動させる（empty_state.rs の recipe 関数、イシュー #1560）
root の variant 軸（既定 Plain、Outline/Subtle を純追加）で破線枠・淡色背景を切り替える（イシュー #2047、shadcn/ui Empty 突合）
indicator の variant 軸（indicator_with、既定 Plain、Boxed を純追加）で bg-muted の角丸タイル表示を切り替える（イシュー #2047）
aria-* は付与しない（empty_state.rs 冒頭 doc コメント）

Anatomy

root
  content
    indicator
    title
    description
    actions

API Reference

Arguments

Name	Type	Default	Description
`size`	`Size`	`Md`	root の custom property（`--fandhe-empty-state-*`）経由で padding・gap・indicator/title/description の文字サイズを連動させるサイズ（empty_state.rs の recipe 関数、イシュー #1560）。
`variant`	`EmptyStateVariant`	`Plain`	root の見た目 variant。Plain（既定、class 非出力）/ Outline（破線枠）/ Subtle（淡色単色背景）（イシュー #2047）。
`indicator_with の variant`	`EmptyStateIndicatorVariant`	`Plain`	indicator の見た目 variant。Plain（既定、indicator() と同一出力）/ Boxed（bg-muted の角丸タイル）（イシュー #2047）。

CSS Variables

Variable	Default
`--fandhe-empty-state-description-size`	`var(--fandhe-font-font-size-sm)`
`--fandhe-empty-state-gap`	`var(--fandhe-space-2)`
`--fandhe-empty-state-indicator-size`	`var(--fandhe-font-font-size-4xl)`
`--fandhe-empty-state-padding`	`var(--fandhe-space-12) var(--fandhe-space-8)`
`--fandhe-empty-state-section-gap`	`var(--fandhe-space-4)`
`--fandhe-empty-state-title-size`	`var(--fandhe-font-font-size-lg)`

Examples

Basic

title + description のみで組み立てた最小構成の例です。

No results

Try a different search.

Outline

root に破線枠を付ける Outline variant の例です（イシュー #2047）。

No results

Try a different search.

Boxed indicator

indicator に bg-muted の角丸タイルを付ける Boxed variant の例です（イシュー #2047）。

∅

No projects yet

Create your first project to get started.

Accessibility

WAI-ARIA

Attribute	Description
(該当なし)	aria-* は付与しない（empty_state.rs:5、root_has_no_role_attribute 回帰テストあり）。