Dialog

Keeps attention on the task at hand, then returns you to where you were.

Basic usage

Live preview

View Vue source

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="Device settings"
    description="Rename the device, then close the dialog to keep browsing."
    close-label="Close dialog"
  >
    <template #trigger>
      <AgmButton variant="outline">Open settings</AgmButton>
    </template>
    <div class="example-stack">
      <AgmInput v-model="name" label="Device name" />
      <AgmSelect v-model="mode" label="Display mode" :options="[{ label: 'Focus', value: 'focus' }, { label: 'Explore', value: 'explore' }]" />
    </div>
    <template #footer>
      <AgmButton @click="open = false">Done</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

Prop	Type	Default	Description
open	boolean	false	Updated through v-model:open
title	string	Required	Accessible title
description	string	Required	Explains the task
closeLabel	string	'关闭对话框'	Accessible name of the close button

Events

• update:open(boolean)

Slots

• trigger: a single focusable trigger element
• default: content
• footer: action area

Keyboard and usage notes

Opening moves focus into the dialog, Tab cycles within it, and Escape closes it and returns focus to the trigger. Use the trigger slot so focus can return.

Installation

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

Copy the editable source:

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