Dialog ダイアログ

目の前の操作に集中させ、終わったら元の場所に戻ります。

基本的な使い方

インタラクティブプレビュー

Vue のソースを表示

Vue · TypeScript

<script setup lang="ts">
import { AgmButton, AgmDialog, AgmInput, AgmSelect } from 'augma'
import { shallowRef } from 'vue'

const open = shallowRef(false)
const name = shallowRef('Augma')
const mode = shallowRef('focus')
</script>

<template>
  <AgmDialog
    v-model:open="open"
    title="デバイス設定"
    description="デバイス名を変更して、閉じたら閲覧を続けられます。"
    close-label="ダイアログを閉じる"
  >
    <template #trigger>
      <AgmButton variant="outline">設定を開く</AgmButton>
    </template>
    <div class="example-stack">
      <AgmInput v-model="name" label="デバイス名" />
      <AgmSelect v-model="mode" label="表示モード" :options="[{ label: '集中', value: 'focus' }, { label: '探索', value: 'explore' }]" />
    </div>
    <template #footer>
      <AgmButton @click="open = false">完了</AgmButton>
    </template>
  </AgmDialog>
</template>

<style scoped>
.example-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.example-stack {
  display: grid;
  gap: 24px;
  width: 100%;
  max-width: 360px;
}
</style>

API

プロパティ	型	デフォルト	説明
open	boolean	false	v-model:open で更新
title	string	必須	アクセシブルなタイトル
description	string	必須	操作の説明
closeLabel	string	'关闭对话框'	閉じるボタンのアクセシブルネーム

イベント

• update:open(boolean)

スロット

• trigger：フォーカス可能な単一のトリガー要素
• default：内容
• footer：操作エリア

キーボード操作と利用上の注意

開くとフォーカスがダイアログ内に移り、Tab で循環、Escape で閉じてトリガーに戻ります。フォーカスを確実に戻すため、trigger スロットの利用を推奨します。

インストール

import { AgmDialog } from 'augma'
import 'augma/style.css'

編集可能なソースをコピー：

pnpm dlx [email protected] add https://augma.yyj.moe/r/dialog.json