CopyButton
Clipboard API のフォールバックとアクセシブルな状態通知を備えた、再利用可能なコピー操作です。
主なプロパティ
コントロールは data-copy-status で idle、copied、unavailable を報告します。最新のコピー操作だけが反映され、結果は既定で 2 秒後に idle へリセットされます。
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/copy-button.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRCopyButton } from '@tinyrack/ui/components/copy-button';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
例
継承したボタンの組み合わせ パーマリンク
appearance、variant、uiSize、ラベルを各ボタンスタイルと組み合わせられます。待機中と成功時のラベルは同じ幅を保ち、長い失敗ラベルは失敗時だけ表示されます。
API
| プロパティ | 型 | 既定値 | 説明 |
|---|---|---|---|
value | string | 必須 | Clipboard API または画面外の選択フォールバックでコピーするテキストです。 |
idleLabel | string | "Copy" | コピー前の表示およびアクセシブルなラベルです。 |
copiedLabel | string | "Copied" | 成功ラベルと丁寧な通知です。 |
unavailableLabel | string | "Copy unavailable" | 両方のコピー方法が失敗した場合のラベルと丁寧な通知です。 |
onStatusChange | (status) => void | — | copied または unavailable を通知し、リセット時に idle を通知します。古い操作やアンマウント後の操作は通知しません。 |
resetDelay | number | 2000 | 完了結果が idle に戻るまでのミリ秒です。 |
children を除くすべての TRButton プロパティを継承し、ref、ネイティブイベント、disabled、loading、loadingLabel、appearance、variant、uiSize を利用できます。onClick で preventDefault() を呼ぶとコピー操作をキャンセルします。