Q
v0.3

Popover

Newv0.3.0

クリックで開くフローティングコンテンツ。フォームやオプション、詳細情報の表示に使用します。

基本的な使い方

クリックでポップオーバーを開く

tsx
class="token keyword">import {
  Popover,
  PopoverTrigger,
  PopoverContent,
} class="token keyword">from class="token keyword">class="token string">"@/components/ui";

<class="token tag">Popover>
  <class="token tag">div q:slot=class="token keyword">class="token string">"trigger">
    <class="token tag">Button>ポップオーバーを開く</class="token tag">Button>
  </class="token tag">div>
  <class="token tag">PopoverContent>
    <class="token tag">h4>タイトル</class="token tag">h4>
    <class="token tag">p>コンテンツ</class="token tag">p>
  </class="token tag">PopoverContent>
</class="token tag">Popover>

表示位置

4方向に表示可能

フォーム入力

ポップオーバー内でフォームを表示

使用例

実際の使用シーン

Props API

PropTypeDefaultDescription
position"top" | "bottom" | "left" | "right""bottom"表示位置
align"start" | "center" | "end""center"配置の揃え方
sideOffsetnumber4トリガーからの距離（px）

Accessibility

  • Escape キーでポップオーバーを閉じる
  • 外部クリックで閉じる
  • フォーカストラップにより、ポップオーバー内にフォーカスを維持
  • aria-haspopup, aria-expanded で状態を伝達