Popover
HTML Popover APIを使用したネイティブなポップオーバーコンポーネント
概要
PopoverコンポーネントはHTML Popover APIを使用し、popovertarget属性とpopover属性を活用したネイティブなポップオーバー機能を提供します。JavaScriptなしで動作し、アクセシビリティに優れています。
デモ
基本的な使い方
ポップオーバーのタイトル
これは基本的なポップオーバーコンテンツです。外側をクリックするか、ESCキーを押すと閉じます。
import { Popover, PopoverContent, PopoverTrigger } from "@/registry/ui/popover"
export default function Example() {
return (
<div>
<PopoverTrigger target="my-popover">
クリックして開く
</PopoverTrigger>
<Popover id="my-popover">
<PopoverContent>
<h3>タイトル</h3>
<p>コンテンツがここに入ります</p>
</PopoverContent>
</Popover>
</div>
)
}異なるバリアント
デフォルトスタイルのポップオーバー
アクセントスタイルのポップオーバー
警告
この操作は取り消せません。
<PopoverTrigger target="my-popover" variant="outline">
アウトライン
</PopoverTrigger>
<Popover id="my-popover" variant="accent">
<PopoverContent>
アクセントスタイル
</PopoverContent>
</Popover>異なるサイズ
小サイズのポップオーバー
デフォルトサイズのポップオーバー
大サイズのポップオーバー。より多くのコンテンツを含めることができます。
<PopoverTrigger target="sm-popover" size="sm">
小
</PopoverTrigger>
<Popover id="sm-popover" size="sm">
<PopoverContent spacing="sm">
<p className="text-sm">小サイズのポップオーバー</p>
</PopoverContent>
</Popover>Show/Hide アクション
制御されたポップオーバー
専用のボタンで開閉を制御できます。
<PopoverTrigger target="controlled-popover" action="show">
開く
</PopoverTrigger>
<PopoverTrigger target="controlled-popover" action="hide">
閉じる
</PopoverTrigger>
<Popover id="controlled-popover">
<PopoverContent>
専用のボタンで開閉を制御
</PopoverContent>
</Popover>カード内のポップオーバー
山田太郎
@yamada
ソフトウェアエンジニア。React と TypeScript が好きです。
<Popover id="my-popover">
<PopoverContent spacing="none">
パディングなしのコンテンツ
</PopoverContent>
</Popover>リッチコンテンツ
機能リスト
- ✓ネイティブHTML Popover API
- ✓JavaScriptなしで動作
- ✓アクセシビリティ対応
- ✓カスタマイズ可能なスタイル
<PopoverTrigger target="rich-popover" variant="outline">
詳細を表示
</PopoverTrigger>
<Popover id="rich-popover" size="lg">
<PopoverContent spacing="lg">
<h3 className="text-lg font-bold mb-3">機能リスト</h3>
<ul className="space-y-2 mb-4">
<li>✓ ネイティブHTML Popover API</li>
<li>✓ JavaScriptなしで動作</li>
<li>✓ アクセシビリティ対応</li>
</ul>
</PopoverContent>
</Popover>インストール
npx shadcn@latest add https://your-registry-url.com/r/popover.jsonProps
Popover
Prop
Type
PopoverTrigger
Prop
Type
PopoverContent
Prop
Type
ネイティブ機能
HTML Popover APIにより、以下の機能が自動的に提供されます:
- ✅ 自動フォーカス管理: ポップオーバーが開くと適切な要素にフォーカスが移動
- ✅ ESCキーで閉じる: ESCキーを押すとポップオーバーが閉じます
- ✅ 外側クリックで閉じる: ポップオーバーの外側をクリックすると自動的に閉じます
- ✅ バックドロップサポート:
::backdrop疑似要素でバックドロップをスタイリング可能 - ✅ アクセシビリティ: ネイティブHTMLセマンティクスによる優れたアクセシビリティ
ブラウザ互換性
HTML Popover APIは以下のブラウザでサポートされています:
- ✅ Chrome 114+
- ✅ Edge 114+
- ✅ Safari 17+
- ⚠️ Firefox (実験的サポート)
技術的詳細
class-variance-authorityでバリアント管理- Tailwind CSSでスタイリング
- ネイティブHTML Popover API
- JavaScriptなしで動作
注意事項
TypeScript型
popover、popoverTarget、popoverTargetAction属性はReactの型定義に含まれていますが、一部の環境では型エラーが発生する可能性があります。その場合は、@ts-ignoreコメントを追加してください。
カスタマイズ
コンポーネントはclass-variance-authorityを使用しているため、既存のバリアントを拡張したり、新しいバリアントを追加することが簡単にできます。
// カスタムバリアントを追加する例
const customPopoverVariants = cva(
// ベースクラス
"...",
{
variants: {
variant: {
default: "...",
accent: "...",
// 新しいバリアントを追加
custom: "border-purple-500 bg-purple-50",
},
},
}
)