Radix Vue

外観

アラートダイアログ ​

重要なコンテンツでユーザーを中断し、応答を求めるモーダルダイアログ。
vue
<script setup lang="ts">
import {
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogOverlay,
  AlertDialogPortal,
  AlertDialogRoot,
  AlertDialogTitle,
  AlertDialogTrigger,
} from 'radix-vue'

function handleAction() {
  // eslint-disable-next-line no-alert
  alert('clicked action button!')
}
</script>

<template>
  <AlertDialogRoot>
    <AlertDialogTrigger
      class="bg-white text-grass11 font-semibold hover:bg-white/90 shadow-sm inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] leading-none outline-none focus:shadow-[0_0_0_2px] focus:shadow-black transition-all"
    >
      Delete account
    </AlertDialogTrigger>
    <AlertDialogPortal>
      <AlertDialogOverlay class="bg-blackA9 data-[state=open]:animate-overlayShow fixed inset-0 z-30" />
      <AlertDialogContent
        class="z-[100] text-[15px] data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[500px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none"
      >
        <AlertDialogTitle class="text-mauve12 m-0 text-[17px] font-semibold">
          Are you absolutely sure?
        </AlertDialogTitle>
        <AlertDialogDescription class="text-mauve11 mt-4 mb-5 text-[15px] leading-normal">
          This action cannot be undone. This will permanently delete your account and remove your data from our servers.
        </AlertDialogDescription>
        <div class="flex justify-end gap-[25px]">
          <AlertDialogCancel
            class="text-mauve11 bg-mauve4 hover:bg-mauve5 focus:shadow-mauve7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-semibold leading-none outline-none focus:shadow-[0_0_0_2px]"
          >
            Cancel
          </AlertDialogCancel>
          <AlertDialogAction
            class="text-red11 bg-red4 hover:bg-red5 focus:shadow-red7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-semibold leading-none outline-none focus:shadow-[0_0_0_2px]"
            @click="handleAction"
          >
            Yes, delete account
          </AlertDialogAction>
        </div>
      </AlertDialogContent>
    </AlertDialogPortal>
  </AlertDialogRoot>
</template>

特徴 ​

  • フォーカスが自動的にトラップされます。
  • 制御することも、制御しないことも可能です。
  • TitleおよびDescriptionコンポーネントを使用して、スクリーンリーダーのアナウンスを管理します。
  • Escキーでコンポーネントが自動的に閉じます。

インストール ​

コマンドラインからコンポーネントをインストールします。

sh
$ npm add radix-vue

構造 ​

すべてのパーツをインポートして、それらを組み合わせます。

vue
<script setup lang="ts">
import {
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogOverlay,
  AlertDialogPortal,
  AlertDialogRoot,
  AlertDialogTitle,
  AlertDialogTrigger,
} from 'radix-vue'
</script>

<template>
  <AlertDialogRoot>
    <AlertDialogTrigger />
    <AlertDialogPortal>
      <AlertDialogOverlay />
      <AlertDialogContent>
        <AlertDialogTitle />
        <AlertDialogDescription />
        <AlertDialogCancel />
        <AlertDialogAction />
      </AlertDialogContent>
    </AlertDialogPortal>
  </AlertDialogRoot>
</template>

APIリファレンス ​

ルート ​

アラートダイアログのすべてのパーツを含みます。

プロパティデフォルト型
defaultOpen
boolean

最初にレンダリングされたときのダイアログのオープン状態。オープン状態を制御する必要がない場合に使用します。

open
boolean

ダイアログの制御されたオープン状態。v-model:openとしてバインドできます。

エミットペイロード
update:open
[value: boolean]

ダイアログのオープン状態が変化したときに呼び出されるイベントハンドラー。

トリガー ​

ダイアログを開くボタン。

プロパティデフォルト型
as
'button'
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、それらのプロパティと動作をマージします。

詳細については、コンポジションガイドをお読みください。

データ属性値
[data-state]"open" | "closed"

ポータル ​

使用すると、オーバーレイとコンテンツパーツをbodyにポータルします。

プロパティデフォルト型
disabled
boolean

テレポートを無効にして、コンポーネントをインラインでレンダリングします

reference

forceMount
boolean

より多くの制御が必要な場合に、マウントを強制するために使用されます。Vueのアニメーションライブラリでアニメーションを制御する場合に役立ちます。

to
string | HTMLElement

Vueネイティブテレポートコンポーネントプロパティ:to

reference

オーバーレイ ​

ダイアログが開いているときに、ビューの非アクティブ部分を覆うレイヤー。

プロパティデフォルト型
as
'div'
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、それらのプロパティと動作をマージします。

詳細については、コンポジションガイドをお読みください。

forceMount
boolean

より多くの制御が必要な場合に、マウントを強制するために使用されます。Vueのアニメーションライブラリでアニメーションを制御する場合に役立ちます。

データ属性値
[data-state]"open" | "closed"

コンテンツ ​

ダイアログが開いているときにレンダリングされるコンテンツを含みます。

プロパティデフォルト型
as
'div'
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、それらのプロパティと動作をマージします。

詳細については、コンポジションガイドをお読みください。

disableOutsidePointerEvents
boolean

trueの場合、DismissableLayerの外側の要素に対するホバー/フォーカス/クリックの相互作用が無効になります。ユーザーは、外側の要素と対話するために2回クリックする必要があります。一度目はDismissableLayerを閉じ、2回目は要素をトリガーするためです。

forceMount
boolean

より多くの制御が必要な場合に、マウントを強制するために使用されます。Vueのアニメーションライブラリでアニメーションを制御する場合に役立ちます。

trapFocus
boolean

trueの場合、キーボード、ポインター、またはプログラムによるフォーカスによって、フォーカスがContentから逃れることはできません。

エミットペイロード
closeAutoFocus
[event: Event]

クローズ時に自動フォーカスされた場合に呼び出されるイベントハンドラー。防止できます。

escapeKeyDown
[event: KeyboardEvent]

Escapeキーが押されたときに呼び出されるイベントハンドラー。防止できます。

focusOutside
[event: FocusOutsideEvent]

フォーカスがDismissableLayerの外に移動したときに呼び出されるイベントハンドラー。防止できます。

interactOutside
[event: PointerDownOutsideEvent | FocusOutsideEvent]

DismissableLayerの外で相互作用が発生したときに呼び出されるイベントハンドラー。具体的には、pointerdownイベントが外部で発生した場合、またはフォーカスが外部に移動した場合です。防止できます。

openAutoFocus
[event: Event]

オープン時に自動フォーカスされた場合に呼び出されるイベントハンドラー。防止できます。

pointerDownOutside
[event: PointerDownOutsideEvent]

pointerdownイベントがDismissableLayerの外で発生した場合に呼び出されるイベントハンドラー。防止できます。

データ属性値
[data-state]"open" | "closed"

キャンセル ​

ダイアログを閉じるボタン。このボタンは、AlertDialogActionボタンと視覚的に区別する必要があります。

プロパティデフォルト型
as
'button'
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、それらのプロパティと動作をマージします。

詳細については、コンポジションガイドをお読みください。

アクション ​

ダイアログを閉じるボタン。これらのボタンは、AlertDialogCancelボタンと視覚的に区別する必要があります。

プロパティデフォルト型
as
'button'
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、それらのプロパティと動作をマージします。

詳細については、コンポジションガイドをお読みください。

タイトル ​

ダイアログが開かれたときにアナウンスされるアクセス可能な名前。あるいは、AlertDialogContentにaria-labelまたはaria-labelledbyを指定して、このコンポーネントを除外することもできます。

プロパティデフォルト型
as
'h2'
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、それらのプロパティと動作をマージします。

詳細については、コンポジションガイドをお読みください。

説明 ​

ダイアログが開かれたときにアナウンスされるアクセス可能な説明。あるいは、AlertDialogContentにaria-describedbyを指定して、このコンポーネントを除外することもできます。

プロパティデフォルト型
as
'p'
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、それらのプロパティと動作をマージします。

詳細については、コンポジションガイドをお読みください。

例 ​

非同期フォーム送信後に閉じる ​

制御されたプロパティを使用して、非同期操作が完了した後、アラートダイアログをプログラムで閉じます。

vue
<script setup>
import {
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogOverlay,
  AlertDialogPortal,
  AlertDialogRoot,
  AlertDialogTitle,
  AlertDialogTrigger,
} from 'radix-vue'

const wait = () => new Promise(resolve => setTimeout(resolve, 1000))
const open = ref(false)
</script>

<template>
  <AlertDialogRoot v-model:open="open">
    <AlertDialogTrigger>Open</AlertDialogTrigger>
    <AlertDialogPortal>
      <AlertDialogOverlay />
      <AlertDialogContent>
        <form
          @submit.prevent="
            (event) => {
              wait().then(() => open = false);
            }
          "
        >
          <!-- some inputs -->
          <button type="submit">
            Submit
          </button>
        </form>
      </AlertDialogContent>
    </AlertDialogPortal>
  </AlertDialogRoot>
</template>

カスタムポータルコンテナ ​

アラートダイアログがポータルされる要素をカスタマイズします。

vue
<script setup>
import { ref } from 'vue'

const container = ref(null)
</script>

<template>
  <div>
    <AlertDialogRoot>
      <AlertDialogTrigger />
      <AlertDialogPortal :to="container">
        <AlertDialogOverlay />
        <AlertDialogContent>...</AlertDialogContent>
      </AlertDialogPortal>
    </AlertDialogRoot>

    <div ref="container" />
  </div>
</template>

アクセシビリティ ​

アラートおよびメッセージダイアログWAI-ARIAデザインパターンに準拠します。

キーボード操作 ​

キー説明
Space
ダイアログを開閉します。
Enter
ダイアログを開閉します。
Tab
フォーカスを次のフォーカス可能な要素に移動します。
Shift + Tab
フォーカスを前のフォーカス可能な要素に移動します。
Esc
ダイアログを閉じ、フォーカスをAlertDialogTriggerに移動します。