Clipboard
値のコピーとコピー済み表示を扱う unstyled 部品です。コピー済み/未コピーの 2 値状態を data-copied(存在属性)で表現します。
Themes 版(fandhe-frontend-pre-styled-ui)はこの構造へ既定 CSS を追加するだけの薄いラッパーであり、CSS は持ちません。スタイル済みの表示例は Clipboard を参照してください。
実際の navigator.clipboard.writeText への書き込み・コピー完了後の自動リセットはクライアントランタイム側の責務であり、本部品は状態遷移の SSR マークアップのみを提供します。
関連 API: fandhe-frontend-headless-ui API
Demo
枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。
https://example.com/share/abc
Features
- Root/Label/Control/Input/Trigger/Indicator/ValueText の 7 anatomy パーツと、コピー済み/未コピーの 2 値状態機械 `Clipboard` を提供する。状態は値語彙ではなく `data-copied`(存在属性)で表現する。
- `input` パーツはコピー元テキストの表示専用(`readonly`)であり `name` を持たず、フォーム送信を目的としない。
- `indicator` は copied 用/idle 用の 2 変種を SSR で両方描画し、現在状態と不一致の側へ `hidden` を付与する(子孫セレクタを使わずに表示切り替えできる表現)。
- 実際の `navigator.clipboard.writeText` 書き込み・コピー完了後の自動リセット(タイムアウト)はクライアント配線層の責務であり、本コンポーネントは `"clipboard:copy"`/`"clipboard:reset"` の 2 アクションによる状態遷移のみを提供する(`docs/policy/intentional-non-adoption.md` §3.25)。
Anatomy
root
label
control
input
trigger
indicator
value-textAPI Reference
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
| value | &str | (必須) | コピー対象値。`root` の `data-value` としてそのまま出力される(既定エスケープ経由)。クライアント側はこの `data-value` を読み取って実際の書き込みを行う契約。 |
| copied | bool | false | コピー済みかどうか。`data-copied`・`indicator` の可視性・`input`/`control`/`trigger` の `data-copied` へ反映される。 |
Data Attributes
| Part | Attribute | Observed Values |
|---|---|---|
| indicator | data-state | hidden, visible |
| indicator | data-variant | copied, idle |
| root | data-value | https://example.com/share/abc |
Examples
コピー済み状態
`copied = true` を渡すと `data-copied` が付与され、`indicator` の可視性が入れ替わります(コピー用 → コピー済み用)。
https://example.com/share/xyz
Accessibility
Keyboard Interactions
| Key | Description |
|---|---|
| Tab / Space / Enter | `trigger` はネイティブ `<button type="button">` であり、フォーカス・押下操作はブラウザ既定動作で成立する。 |