Link
fandhe-frontend-pre-styled-ui の link mod が提供するスタイル済み Link 部品です。素の <a> 要素 1 パーツ（anatomy root）のみで構成する最小部品で、Plain（下線なし）/Underline（常時下線）の 2 variant、現在ページ表示（aria-current="page"）、外部リンク（target="_blank" + rel="noopener noreferrer" を不可分に付与）を提供します。ページ遷移を伴う水平ナビが必要な場合は Tab Nav を、文書ナビ（サイドバー用途）が必要な場合は Nav List を使ってください。
関連 API: fandhe-frontend-pre-styled-ui API / fandhe-frontend-headless-ui API
Demo
pre-styled-ui 単独定義の anatomy（data-scope="link"）による静的掲示です。Plain（既定・下線なし）/Underline（常時下線）の 2 variant、Current page（aria-current="page"）、External link（target="_blank" + rel="noopener noreferrer" を不可分に付与）を並べています。
Features
- 素の <a> 要素 1 パーツ（anatomy root）のみで構成する最小部品（crates/headless-ui/src/link.rs:16-19）
- external=true のとき target="_blank" と rel="noopener noreferrer" を不可分に付与する（片方のみを付与できる API は持たない、reverse tabnabbing 対策。crates/headless-ui/src/link.rs:14-19, 84-88）
- current=true のとき aria-current="page" + data-current を付与する（crates/headless-ui/src/link.rs:21-24, 89-92）
- Plain（既定・下線なし）/ Underline（常時下線）の 2 variant。current 状態の装飾（フォント太字化）は aria-current="page" を条件にした CSS 状態セレクタで表現し、追加の bool 引数は持たない（crates/pre-styled-ui/src/link.rs:14-19, 98-101）
- href の URL スキーム検証（javascript: 等の拒否）は core の render() が担う deny-by-default（crates/headless-ui/src/link.rs:41-45）
Anatomy
rootAPI Reference
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
| href | &str | a 要素の href（crates/pre-styled-ui/src/link.rs:127）。 | |
| external | bool | false | true のとき target="_blank" + rel="noopener noreferrer" を付与する（crates/headless-ui/src/link.rs:70-73）。 |
| current | bool | false | true のとき aria-current="page" + data-current を付与する（crates/headless-ui/src/link.rs:74-77）。 |
| variant | LinkVariant | LinkVariant::Plain | root の見た目（Plain/Underline、crates/pre-styled-ui/src/link.rs:44-50）。 |
Data Attributes
| Part | Attribute | Observed Values |
|---|---|---|
| root | data-current |
CSS Variables
| Variable | Default |
|---|---|
| --fandhe-link-text-decoration | none |
Examples
Current page と通常リンク
Guides を現在ページ（aria-current="page"）とした Underline variant の 2 リンクです。
Accessibility
Keyboard Interactions
| Key | Description |
|---|---|
| Tab / Shift+Tab | 素の <a> のブラウザ標準操作でフォーカス移動する。JS ハイドレーション前提の操作は持たない。 |
WAI-ARIA
| Attribute | Description |
|---|---|
| aria-current="page"（root、current=true のとき） | 現在ページを示す（crates/headless-ui/src/link.rs:74-77）。 |
| rel="noopener noreferrer"（root、external=true のとき） | target="_blank" と不可分に付与し reverse tabnabbing を防ぐ（crates/headless-ui/src/link.rs:14-19）。 |