Q
v0.3

Dialog

Stablev0.3.0

モーダルダイアログコンポーネント。ユーザーの注意を引く重要なコンテンツや操作の表示に使用します。

基本的な使い方

トリガーをクリックしてダイアログを開く

tsx
class="token keyword">import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
} class="token keyword">from class="token keyword">class="token string">"@/components/ui";

<class="token tag">Dialog>
  <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">DialogContent>
    <class="token tag">DialogHeader>
      <class="token tag">DialogTitle>タイトル</class="token tag">DialogTitle>
      <class="token tag">DialogDescription>説明文</class="token tag">DialogDescription>
    </class="token tag">DialogHeader>
    <class="token tag">div class="token keyword">class=class="token keyword">class="token string">"py-class="token number">4">コンテンツ</class="token tag">div>
    <class="token tag">DialogFooter>
      <class="token tag">DialogClose>
        <class="token tag">Button variant=class="token keyword">class="token string">"ghost">キャンセル</class="token tag">Button>
      </class="token tag">DialogClose>
      <class="token tag">Button>保存</class="token tag">Button>
    </class="token tag">DialogFooter>
  </class="token tag">DialogContent>
</class="token tag">Dialog>

フォーム入力

ダイアログ内でフォームを表示

制御モード

openプロパティで外部から状態を制御

状態: 閉
tsx
class="token keyword">const isOpen = class="token function">useSignal(class="token keyword">false);

<class="token tag">Button onClick$={() => isOpen.value = class="token keyword">true}>
  開く
</class="token tag">Button>

<class="token tag">Dialog
  open={isOpen.value}
  onOpenChange$={(v) => isOpen.value = v}
>
  <class="token tag">DialogContent>
    <class="token tag">DialogHeader>
      <class="token tag">DialogTitle>タイトル</class="token tag">DialogTitle>
    </class="token tag">DialogHeader>
    <class="token tag">DialogFooter>
      <class="token tag">Button onClick$={() => isOpen.value = class="token keyword">false}>
        閉じる
      </class="token tag">Button>
    </class="token tag">DialogFooter>
  </class="token tag">DialogContent>
</class="token tag">Dialog>

スクロール可能なコンテンツ

長いコンテンツの場合、ダイアログ内でスクロール

Props API

PropTypeDefaultDescription
openboolean-ダイアログの開閉状態（制御モード）
onOpenChange$(open: boolean) => void-開閉状態変更時のコールバック
modalbooleantrueモーダル表示（背景クリックで閉じる）

Accessibility

  • Escape キーでダイアログを閉じることができる
  • フォーカストラップにより、ダイアログ外にフォーカスが移動しない
  • aria-modal='true' でモーダルを示す
  • aria-labelledby でタイトルと関連付け
  • aria-describedby で説明文と関連付け