Skip to content
fandhe-frontendcore v0.4.3
GitHub

Nav item

fandhe-frontend-wireframe-ui のナビゲーション項目 1 行分のプレースホルダーです。先頭アイコン + ラベル + 件数表示(カウンター)+ 任意の末尾アイコンを幅いっぱいの 1 行(または縦積み)で並べます。API は nav_item(label, leading, trailing, counter, size, active, orientation) の 7 引数(詳細は下の引数表を参照)で、props 構造体は導入していません。

視覚的な参照元は blocks.pm の Nav item 部品ですが、ライセンス上の理由によりスクリーンショットは掲載していません(詳細は docs/design/wireframe-ui-architecture.md §2)。参照したい場合は外部リンク先を直接確認してください。

本部品は表示専用のため、実際に遷移するリンクとしては出力しません。実際に操作できるナビゲーションが必要な場合は Nav list(Themes)・Navigation menu(Themes)・Nav list(Primitives) を検討してください。

Demo

既定(先頭アイコンのみ)

ホーム

件数表示付き

通知12

アクティブ(選択中)

ダッシュボード

末尾アイコン付き

設定

縦積み(Vertical)

ホーム

Sm

ホーム

Lg

ホーム

サイドバー風の縦リスト(複数行)

ホーム
通知3
設定

引数表

引数型既定値説明
label&str-表示するラベル文言。
leadingOption<Node>None省略可能な先頭アイコンスロット。例: Some(icon::house(size))。
trailingOption<Node>None省略可能な末尾アイコンスロット。例: Some(icon::caret_right(size))。
counterOption<&str>None省略可能な件数表示(ピル)。Some("12") のように渡す。
sizeSizeSize::Mdサイズ段階(xs〜xl)。
activeActiveActive(false)true のとき data-active を付与し、グレースケール反転配色にする。
orientationOrientationOrientation::HorizontalVertical でアイコンの下にラベルを置く縦積み(タブバー風)になる。

原案差分メモ

  • API は独自設計: docs/design/wireframe-ui-architecture.md §6/§11.4 と既存部品(rich_text のスロット + ラベル + Orientation、input の Active .attr() 消費形)から独立設計しました。同文書 §2 の保留(イシュー #2602)に従い、blocks.pm の Figma プロパティ構成を参照・書き写していません。
  • スクリーンショット非掲載: docs/design/reference-screenshots/ への blocks.pm 画像取り込みは #2602 で fail-closed に非掲載と確定しています。本ページも画像は置かず、上記の外部リンクのみで代替します。
  • アクティブ状態はグレースケール反転: 黒塗りバーの原案イメージは data-active による背景・文字色の反転(--fw-wire-ink/--fw-wire-paper)で表現しました。アイコンは currentColor を使うため自動で追従します。反転時は件数表示(カウンター)の配色も可読性のため明るいトークンへ切り替えます(.fw-wire-nav-item[data-active] .fw-wire-nav-item-counter)。
  • 件数表示は Node スロットではなく内部パート: counter: Option<&str> として持ち、専用の Node スロットにはしていません。Phase 7 に単独部品 counter(#2655)が予定されていますが、本イシュー時点では未実装のため依存できないこと、ナビ行内の件数ピルはアクティブ時の反転配色を含む行レイアウトと一体であることの 2 点が理由です。
  • Disabled は持たない: イシューの要求範囲外であり、引数がちょうど 7 個(too_many_arguments の上限は 8 個以上)に収まるようにしています。
  • rich_text との違い: アクティブ状態・件数表示・幅いっぱいのサイドバー行レイアウトを持つ点が異なります。
  • 非インタラクティブ: <a href> にはしません(同文書 §7 の非対話制約)。role/aria-*/tabindex も一切出力しません。