Installation

pnpm dlx kliping@latest add alert-dialog

Usage

<script setup lang="ts">
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog'
</script>

<template>
  <AlertDialog>
    <AlertDialogTrigger>Open</AlertDialogTrigger>
    <AlertDialogContent>
      <AlertDialogHeader>
        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
        <AlertDialogDescription>
          This action cannot be undone. This will permanently delete your account
          and remove your data from our servers.
        </AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel>Cancel</AlertDialogCancel>
        <AlertDialogAction>Continue</AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
</template>

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	@vueuse/core@^14.4.0, reka-ui@^2.10.3
Kliping items	button
Files	components/ui/alert-dialog/alert-dialog.vue components/ui/alert-dialog/alert-dialog-action.vue components/ui/alert-dialog/alert-dialog-cancel.vue components/ui/alert-dialog/alert-dialog-content.vue components/ui/alert-dialog/alert-dialog-description.vue components/ui/alert-dialog/alert-dialog-footer.vue components/ui/alert-dialog/alert-dialog-header.vue components/ui/alert-dialog/alert-dialog-title.vue components/ui/alert-dialog/alert-dialog-trigger.vue components/ui/alert-dialog/index.ts

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

<AlertDialog>
  <AlertDialogTrigger />
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle />
      <AlertDialogDescription />
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel />
      <AlertDialogAction />
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

API Reference

AlertDialog

Prop	Type	Default	Description
unmountOnHide?	boolean	—	When set to false, the dialog content will not be unmounted when closed, but instead hidden with CSS. Useful for SEO or when you want to improve performance by not remounting the component on every open.
open?	boolean	—	The controlled open state of the dialog. Can be binded as v-model:open.
defaultOpen?	boolean	—	The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.

Event	Payload	Description
@update:open	[value: boolean]	Emitted when the open state changes.

Slot	Props
#default	{ open: boolean; close: () => void; }

Data attribute	Value
[data-slot]	"alert-dialog"

AlertDialogAction

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

AlertDialogCancel

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

AlertDialogContent

Prop	Type	Default	Description
forceMount?	boolean	—	Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.
disableOutsidePointerEvents?	boolean	—	When true, hover/focus/click interactions will be disabled on elements outside the DismissableLayer. Users will need to click twice on outside elements to interact with them: once to close the DismissableLayer, and again to trigger the element.

Event	Payload	Description
@escapeKeyDown	[event: KeyboardEvent]	Emitted when Escape is pressed; call event.preventDefault() to keep it open.
@pointerDownOutside	[event: PointerDownOutsideEvent]	Emitted on a pointer down outside; call event.preventDefault() to keep it open.
@focusOutside	[event: FocusOutsideEvent]	Emitted when focus moves outside; call event.preventDefault() to keep it open.
@interactOutside	[event: PointerDownOutsideEvent | FocusOutsideEvent]	Emitted on any pointer down or focus outside; call event.preventDefault() to keep it open.
@openAutoFocus	[event: Event]	Emitted when focus moves in on open; call event.preventDefault() to stop it.
@closeAutoFocus	[event: Event]	Emitted when focus returns on close; call event.preventDefault() to stop it.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"alert-dialog-overlay"

AlertDialogDescription

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"alert-dialog-description"

AlertDialogFooter

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"alert-dialog-footer"

AlertDialogHeader

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"alert-dialog-header"

AlertDialogTitle

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"alert-dialog-title"

AlertDialogTrigger

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"alert-dialog-trigger"

Keyboard Interactions

Perilaku keyboard-nya datang dari primitif Reka UI AlertDialog yang dipakai komponen ini, mengikuti pola WAI-ARIA.

Key	Description
Space	Opens/closes the dialog.
Enter	Opens/closes the dialog.
Tab	Moves focus to the next focusable element.
Shift + Tab	Moves focus to the previous focusable element.
Esc	Closes the dialog and moves focus to AlertDialogTrigger.

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --background, --border, --muted-foreground, --radius.

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.