AlertDialog 提示对话框
新粗野主义风格的确认对话框,需要用户交互。基于 reka-ui 的 AlertDialog 原语构建。
预览
安装
pnpm dlx brutx-vue@latest add alert-dialog用法
<script setup>
import { AlertDialogRoot as AlertDialog, AlertDialogTrigger } from 'reka-ui'
import { AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel } from 'brutx-ui-vue'
import { Button } from 'brutx-ui-vue'
</script>
<template>
<AlertDialog>
<AlertDialogTrigger as-child>
<Button variant="danger">Delete Account</Button>
</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.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction>Continue</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</template>子组件
| 组件 | 说明 |
|---|---|
AlertDialog | 根组件(需从 reka-ui 导入:import { AlertDialogRoot as AlertDialog } from 'reka-ui') |
AlertDialogTrigger | 打开对话框的按钮(需从 reka-ui 导入:import { AlertDialogTrigger } from 'reka-ui') |
AlertDialogPortal | 传送门组件(需从 reka-ui 导入:import { AlertDialogPortal } from 'reka-ui') |
AlertDialogContent | 对话框内容面板 |
AlertDialogHeader | 标题和描述的头部容器 |
AlertDialogFooter | 操作按钮的底部容器 |
AlertDialogTitle | 对话框标题 |
AlertDialogDescription | 对话框描述文本 |
AlertDialogAction | 确认操作按钮 |
AlertDialogCancel | 关闭对话框的取消按钮 |
API 参考
AlertDialogContent
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
class可空 | ClassValue | — | 合并到对话框内容面板的补充 CSS 类名。 |
详情声明类型ClassValue 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogContent.vue | |||
overlayClass可空 | ClassValue | — | 合并到遮罩层的补充 CSS 类名,用于定制遮罩样式。 |
详情声明类型ClassValue 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogContent.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#default | {} | 对话框面板内容,通常组合标题、描述和操作按钮;内容通过内置 Portal 渲染。 |
详情声明类型{}来源packages/ui/src/components/alert-dialog/AlertDialogContent.vue | ||
AlertDialogAction
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
variant | "accent" | "danger" | "default" | "ghost" | "link" | "outline" | "primary" | "secondary" | "success" | undefined | "default" | 确认按钮的颜色、边框和交互状态样式变体。 |
详情声明类型NonNullable<"default" | "ghost" | "primary" | "secondary" | "success" | "danger" | "accent" | "outline" | "link" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
class可空 | ClassValue | undefined | 合并到确认按钮根元素的补充 CSS 类名。 |
详情声明类型ClassValue 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
asChild | boolean | undefined | undefined运行时回退: | 将根属性、样式和关闭交互合并到默认插槽中的单个子元素,子元素需保留可访问的按钮交互。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
as | AsTag | Component | undefined | undefined运行时回退: | 选择根元素的标签或组件;asChild 为真时使用默认插槽中的子元素。 |
详情声明类型AsTag | Component | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
disabled | Booleanish | undefined | — | 禁用原生按钮,使其无法通过常规用户交互激活;使用自定义根元素时由该元素实现禁用行为。 |
详情声明类型Booleanish | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
dir | string | undefined | — | 设置根元素及其文本的书写方向,例如 ltr、rtl 或 auto。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
type | "button" | "submit" | "reset" | undefined | —运行时回退: | 设置原生按钮的行为:普通按钮、提交表单或重置表单。 |
详情声明类型"button" | "submit" | "reset" | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
form | string | undefined | — | 通过表单元素的 ID 指定按钮所属表单,可以关联 DOM 祖先之外的表单。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
value | string | number | readonly string[] | undefined | — | 按钮作为提交者时,与 name 一同写入表单数据的值;按钮可见文字由默认插槽提供。 |
详情声明类型string | number | readonly string[] | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
id | string | undefined | — | 根元素的 DOM ID,用于标签关联、选择器和页面定位。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onCopy | ((payload: ClipboardEvent) => void) | undefined | — | 监听复制操作,可通过 ClipboardEvent 读取或设置剪贴板数据。 |
详情声明类型((payload: ClipboardEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onCut | ((payload: ClipboardEvent) => void) | undefined | — | 监听剪切操作,可通过 ClipboardEvent 定制写入剪贴板的内容。 |
详情声明类型((payload: ClipboardEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onPaste | ((payload: ClipboardEvent) => void) | undefined | — | 监听粘贴操作,通过 ClipboardEvent 读取将要插入的剪贴板内容。 |
详情声明类型((payload: ClipboardEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onCompositionend | ((payload: CompositionEvent) => void) | undefined | — | 监听输入法组合会话完成或取消,适用于可编辑根元素。 |
详情声明类型((payload: CompositionEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onCompositionstart | ((payload: CompositionEvent) => void) | undefined | — | 监听可编辑根元素开始输入法组合会话。 |
详情声明类型((payload: CompositionEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onCompositionupdate | ((payload: CompositionEvent) => void) | undefined | — | 监听输入法组合文本变化,适用于可编辑根元素。 |
详情声明类型((payload: CompositionEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onDrag | ((payload: DragEvent) => void) | undefined | — | 监听拖动源在原生拖放过程中持续发出的 drag 事件。 |
详情声明类型((payload: DragEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onDragend | ((payload: DragEvent) => void) | undefined | — | 监听原生拖放操作结束,包括成功放下和取消拖动。 |
详情声明类型((payload: DragEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onDragenter | ((payload: DragEvent) => void) | undefined | — | 监听被拖动元素或文本进入当前投放目标。 |
详情声明类型((payload: DragEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onDragexit | ((payload: DragEvent) => void) | undefined | — | 监听旧式 dragexit 事件,表示元素不再是拖放操作的直接目标;是否触发取决于浏览器支持。 |
详情声明类型((payload: DragEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onDragleave | ((payload: DragEvent) => void) | undefined | — | 监听被拖动元素或文本离开当前投放目标。 |
详情声明类型((payload: DragEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onDragover | ((payload: DragEvent) => void) | undefined | — | 监听拖动内容经过投放目标;接受投放时通常需调用 preventDefault()。 |
详情声明类型((payload: DragEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onDragstart | ((payload: DragEvent) => void) | undefined | — | 监听原生拖放开始,可设置 DragEvent.dataTransfer 中的拖动数据。 |
详情声明类型((payload: DragEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onDrop | ((payload: DragEvent) => void) | undefined | — | 监听拖动内容在有效目标上被放下,通过 dataTransfer 读取数据。 |
详情声明类型((payload: DragEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onFocus | ((payload: FocusEvent) => void) | undefined | — | 监听根元素获得焦点;原生 focus 事件不冒泡。 |
详情声明类型((payload: FocusEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onFocusin | ((payload: FocusEvent) => void) | undefined | — | 监听根元素或其后代获得焦点的冒泡事件。 |
详情声明类型((payload: FocusEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onFocusout | ((payload: FocusEvent) => void) | undefined | — | 监听根元素或其后代失去焦点的冒泡事件。 |
详情声明类型((payload: FocusEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onBlur | ((payload: FocusEvent) => void) | undefined | — | 监听根元素失去焦点;原生 blur 事件不冒泡。 |
详情声明类型((payload: FocusEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onChange | ((payload: Event) => void) | undefined | — | 监听输入或选择控件提交值变化的 change 事件;普通按钮激活不会产生该事件。 |
详情声明类型((payload: Event) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onBeforeinput | ((payload: InputEvent) => void) | undefined | — | 监听可编辑内容即将因用户输入而改变的事件,适用于支持输入的根元素。 |
详情声明类型((payload: InputEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onFormdata | ((payload: FormDataEvent) => void) | undefined | — | 监听表单完成构造表单数据的事件,适用于表单根元素。 |
详情声明类型((payload: FormDataEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onInput | ((payload: InputEvent) => void) | undefined | — | 监听可编辑根元素因用户操作产生的输入值变化。 |
详情声明类型((payload: InputEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onReset | ((payload: Event) => void) | undefined | — | 监听表单重置事件,适用于表单根元素;事件发生在 form 上。 |
详情声明类型((payload: Event) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onSubmit | ((payload: SubmitEvent) => void) | undefined | — | 监听表单提交事件,适用于表单根元素;普通提交按钮通过所属 form 发出该事件。 |
详情声明类型((payload: SubmitEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onInvalid | ((payload: Event) => void) | undefined | — | 监听支持约束校验的根控件校验失败;原生 invalid 事件不冒泡。 |
详情声明类型((payload: Event) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onFullscreenchange | ((payload: Event) => void) | undefined | — | 监听根元素或其后代进入、退出全屏后产生的状态变化事件。 |
详情声明类型((payload: Event) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onFullscreenerror | ((payload: Event) => void) | undefined | — | 监听根元素或其后代的全屏请求失败。 |
详情声明类型((payload: Event) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onLoad | ((payload: Event) => void) | undefined | — | 监听资源根元素完成加载,例如使用支持 load 的元素作为根时。 |
详情声明类型((payload: Event) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onError | ((payload: Event) => void) | undefined | — | 监听根元素资源加载或使用失败,例如图片或媒体错误;不处理任意 Vue 组件异常。 |
详情声明类型((payload: Event) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onKeydown | ((payload: KeyboardEvent) => void) | undefined | — | 监听按键按下,包含按住按键时浏览器发出的重复事件。 |
详情声明类型((payload: KeyboardEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onKeypress | ((payload: KeyboardEvent) => void) | undefined | — | 监听已弃用的 keypress 字符按键事件;新的键盘交互使用 keydown 或 beforeinput。 |
详情声明类型((payload: KeyboardEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onKeyup | ((payload: KeyboardEvent) => void) | undefined | — | 监听用户松开按键。 |
详情声明类型((payload: KeyboardEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onDblclick | ((payload: MouseEvent) => void) | undefined | — | 监听鼠标主按键完成双击。 |
详情声明类型((payload: MouseEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onMousedown | ((payload: MouseEvent) => void) | undefined | — | 监听鼠标按键在元素上按下。 |
详情声明类型((payload: MouseEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onMouseenter | ((payload: MouseEvent) => void) | undefined | — | 监听鼠标进入元素边界;与 mouseover 不同,此事件不冒泡。 |
详情声明类型((payload: MouseEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onMouseleave | ((payload: MouseEvent) => void) | undefined | — | 监听鼠标离开元素及其后代边界;此事件不冒泡。 |
详情声明类型((payload: MouseEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onMousemove | ((payload: MouseEvent) => void) | undefined | — | 监听鼠标在元素上移动。 |
详情声明类型((payload: MouseEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onMouseout | ((payload: MouseEvent) => void) | undefined | — | 监听鼠标离开当前命中元素,包括移入其子元素时的冒泡事件。 |
详情声明类型((payload: MouseEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onMouseover | ((payload: MouseEvent) => void) | undefined | — | 监听鼠标进入当前命中元素的冒泡事件。 |
详情声明类型((payload: MouseEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onMouseup | ((payload: MouseEvent) => void) | undefined | — | 监听鼠标按键在元素上松开。 |
详情声明类型((payload: MouseEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onAbort | ((payload: UIEvent) => void) | undefined | — | 监听媒体根元素的加载被中止,且中止并非由加载错误导致。 |
详情声明类型((payload: UIEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onCanplay | ((payload: Event) => void) | undefined | — | 监听媒体根元素已有足够数据开始播放,但尚不保证可连续播放至结束。 |
详情声明类型((payload: Event) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onCanplaythrough | ((payload: Event) => void) | undefined | — | 监听浏览器估计媒体根元素可在无需停顿缓冲的情况下播放至结束。 |
详情声明类型((payload: Event) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onDurationchange | ((payload: Event) => void) | undefined | — | 监听媒体根元素的时长信息发生变化。 |
详情声明类型((payload: Event) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onEmptied | ((payload: Event) => void) | undefined | — | 监听媒体根元素从已加载状态恢复为空状态,例如重新加载媒体。 |
详情声明类型((payload: Event) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onEncrypted | ((payload: MediaEncryptedEvent) => void) | undefined | — | 监听媒体根元素遇到加密初始化数据,通过 MediaEncryptedEvent 获取该数据。 |
详情声明类型((payload: MediaEncryptedEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onEnded | ((payload: Event) => void) | undefined | — | 监听媒体根元素播放到终点并停止。 |
详情声明类型((payload: Event) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onLoadeddata | ((payload: Event) => void) | undefined | — | 监听媒体根元素当前播放位置的数据首次加载完成,通常为第一帧。 |
详情声明类型((payload: Event) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onLoadedmetadata | ((payload: Event) => void) | undefined | — | 监听媒体根元素的元数据加载完成,例如时长或视频尺寸。 |
详情声明类型((payload: Event) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onLoadstart | ((payload: Event) => void) | undefined | — | 监听媒体根元素开始加载资源。 |
详情声明类型((payload: Event) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onPause | ((payload: Event) => void) | undefined | — | 监听媒体根元素进入暂停状态。 |
详情声明类型((payload: Event) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onPlay | ((payload: Event) => void) | undefined | — | 监听媒体根元素的 paused 状态变为 false,表示播放已被请求。 |
详情声明类型((payload: Event) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onPlaying | ((payload: Event) => void) | undefined | — | 监听媒体根元素实际开始或恢复播放。 |
详情声明类型((payload: Event) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onProgress | ((payload: ProgressEvent<EventTarget>) => void) | undefined | — | 监听媒体等支持资源进度事件的根元素加载数据时的进度通知。 |
详情声明类型((payload: ProgressEvent<EventTarget>) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onRatechange | ((payload: Event) => void) | undefined | — | 监听媒体根元素的播放速率变化。 |
详情声明类型((payload: Event) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onSeeked | ((payload: Event) => void) | undefined | — | 监听媒体根元素完成播放位置跳转。 |
详情声明类型((payload: Event) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onSeeking | ((payload: Event) => void) | undefined | — | 监听媒体根元素开始跳转到新的播放位置。 |
详情声明类型((payload: Event) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onStalled | ((payload: Event) => void) | undefined | — | 监听媒体根元素仍在尝试获取数据但数据意外停止到达。 |
详情声明类型((payload: Event) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onSuspend | ((payload: Event) => void) | undefined | — | 监听浏览器主动暂停媒体根元素的数据获取。 |
详情声明类型((payload: Event) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onTimeupdate | ((payload: Event) => void) | undefined | — | 监听媒体根元素的 currentTime 更新。 |
详情声明类型((payload: Event) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onVolumechange | ((payload: Event) => void) | undefined | — | 监听媒体根元素的音量或静音状态变化。 |
详情声明类型((payload: Event) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onWaiting | ((payload: Event) => void) | undefined | — | 监听媒体根元素因暂时缺少数据而暂停继续播放。 |
详情声明类型((payload: Event) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onSelect | ((payload: Event) => void) | undefined | — | 监听支持文本选择的输入根元素中发生的文本选取。 |
详情声明类型((payload: Event) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onScroll | ((payload: Event) => void) | undefined | — | 监听可滚动根元素的滚动位置变化。 |
详情声明类型((payload: Event) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onScrollend | ((payload: Event) => void) | undefined | — | 监听可滚动根元素完成滚动,且相关滚动手势已结束。 |
详情声明类型((payload: Event) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onTouchcancel | ((payload: TouchEvent) => void) | undefined | — | 监听浏览器或设备中断触摸接触序列。 |
详情声明类型((payload: TouchEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onTouchend | ((payload: TouchEvent) => void) | undefined | — | 监听一个或多个触点离开触摸表面。 |
详情声明类型((payload: TouchEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onTouchmove | ((payload: TouchEvent) => void) | undefined | — | 监听触点在触摸表面移动。 |
详情声明类型((payload: TouchEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onTouchstart | ((payload: TouchEvent) => void) | undefined | — | 监听一个或多个触点开始接触触摸表面。 |
详情声明类型((payload: TouchEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onAuxclick | ((payload: PointerEvent) => void) | undefined | — | 监听主按键之外的指针按键完成点击,例如鼠标中键。 |
详情声明类型((payload: PointerEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onClick | ((payload: PointerEvent) => void) | undefined | — | 监听确认按钮的原生激活点击,通常由鼠标、触摸或键盘触发;Reka 的点击处理器同时请求关闭对话框。
|
详情声明类型((payload: PointerEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onContextmenu | ((payload: PointerEvent) => void) | undefined | — | 监听用户请求打开上下文菜单,例如右键点击或上下文菜单键。 |
onGotpointercapture | ((payload: PointerEvent) => void) | undefined | — | 监听元素开始捕获指定指针,后续指针事件将定向到该元素。 |
详情声明类型((payload: PointerEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onLostpointercapture | ((payload: PointerEvent) => void) | undefined | — | 监听元素失去指定指针的捕获状态。 |
详情声明类型((payload: PointerEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onPointerdown | ((payload: PointerEvent) => void) | undefined | — | 监听指针进入活动按下状态,例如触摸接触或鼠标首次按键。 |
详情声明类型((payload: PointerEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onPointermove | ((payload: PointerEvent) => void) | undefined | — | 监听指针位置或压力等指针属性发生变化。 |
详情声明类型((payload: PointerEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onPointerup | ((payload: PointerEvent) => void) | undefined | — | 监听指针结束活动按下状态。 |
详情声明类型((payload: PointerEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onPointercancel | ((payload: PointerEvent) => void) | undefined | — | 监听浏览器取消指针交互,例如接管触摸滚动手势。 |
详情声明类型((payload: PointerEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onPointerenter | ((payload: PointerEvent) => void) | undefined | — | 监听指针进入元素或其后代的命中边界;此事件不冒泡。 |
详情声明类型((payload: PointerEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onPointerleave | ((payload: PointerEvent) => void) | undefined | — | 监听指针离开元素及其后代的命中边界;此事件不冒泡。 |
详情声明类型((payload: PointerEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onPointerover | ((payload: PointerEvent) => void) | undefined | — | 监听指针进入当前命中元素的冒泡事件。 |
详情声明类型((payload: PointerEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onPointerout | ((payload: PointerEvent) => void) | undefined | — | 监听指针离开当前命中元素的冒泡事件,包括移入子元素的情况。 |
详情声明类型((payload: PointerEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onBeforetoggle | ((payload: ToggleEvent) => void) | undefined | — | 监听支持切换事件的根元素在打开或关闭前的状态变化,例如原生 popover 或 dialog。 |
详情声明类型((payload: ToggleEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onToggle | ((payload: ToggleEvent) => void) | undefined | — | 监听支持切换事件的根元素完成打开或关闭,例如 details、popover 或原生 dialog。 |
详情声明类型((payload: ToggleEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onWheel | ((payload: WheelEvent) => void) | undefined | — | 监听滚轮或类似设备的滚动、缩放输入;该事件不等同于实际滚动位置变化。 |
详情声明类型((payload: WheelEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onAnimationcancel | ((payload: AnimationEvent) => void) | undefined | — | 监听 CSS 动画在正常结束前被取消。 |
详情声明类型((payload: AnimationEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onAnimationstart | ((payload: AnimationEvent) => void) | undefined | — | 监听 CSS 动画在延迟结束后开始播放。 |
详情声明类型((payload: AnimationEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onAnimationend | ((payload: AnimationEvent) => void) | undefined | — | 监听 CSS 动画正常完成全部播放。 |
详情声明类型((payload: AnimationEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onAnimationiteration | ((payload: AnimationEvent) => void) | undefined | — | 监听 CSS 动画的一次迭代结束并开始下一次迭代。 |
详情声明类型((payload: AnimationEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onSecuritypolicyviolation | ((payload: SecurityPolicyViolationEvent) => void) | undefined | — | 监听到达根元素的内容安全策略违规事件;浏览器通常将该事件派发到 document,按钮监听器不会接收所有文档级违规。 |
详情声明类型((payload: SecurityPolicyViolationEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onTransitioncancel | ((payload: TransitionEvent) => void) | undefined | — | 监听 CSS 过渡在完成前被取消。 |
详情声明类型((payload: TransitionEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onTransitionend | ((payload: TransitionEvent) => void) | undefined | — | 监听 CSS 过渡正常完成。 |
详情声明类型((payload: TransitionEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onTransitionrun | ((payload: TransitionEvent) => void) | undefined | — | 监听 CSS 过渡创建,发生在可能的过渡延迟之前。 |
详情声明类型((payload: TransitionEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
onTransitionstart | ((payload: TransitionEvent) => void) | undefined | — | 监听 CSS 过渡在延迟结束后开始变化。 |
详情声明类型((payload: TransitionEvent) => void) | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
autofocus | Booleanish | undefined | — | 向浏览器请求自动聚焦;对话框打开时仍会执行 Reka 的焦点管理。 |
详情声明类型Booleanish | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
formaction | string | undefined | — | 此按钮提交所属表单时使用的目标 URL,覆盖表单的 action。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
formenctype | string | undefined | — | 此按钮提交表单时采用的数据编码方式,覆盖表单的 enctype。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
formmethod | string | undefined | — | 此按钮提交表单时采用的方法,覆盖表单的 method。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
formnovalidate | Booleanish | undefined | — | 此按钮提交表单时跳过浏览器的表单约束校验。 |
详情声明类型Booleanish | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
formtarget | string | undefined | — | 指定此按钮提交表单后用于显示响应的浏览上下文,覆盖表单的 target。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
name | string | undefined | — | 按钮作为提交者时写入表单数据的字段名,与 value 配合使用。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
innerHTML | string | undefined | — | 将 HTML 字符串写入根元素的内容区域;该内容替代默认插槽渲染的子节点。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
accesskey | string | undefined | — | 为根元素提供浏览器访问快捷键提示,实际组合键由浏览器和操作系统决定。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
contenteditable | Booleanish | "inherit" | "plaintext-only" | undefined | — | 设置根元素内容是否可编辑;plaintext-only 表示仅编辑纯文本,inherit 表示继承编辑状态。 |
详情声明类型Booleanish | "inherit" | "plaintext-only" | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
contextmenu | string | undefined | — | 旧式 HTML 上下文菜单关联属性,值为 menu 元素 ID;不负责创建或打开 BrutxUI 菜单。 |
draggable | Booleanish | undefined | — | 设置根元素是否可作为浏览器原生拖放的拖动源。 |
详情声明类型Booleanish | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
enterkeyhint | "done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined | — | 为可编辑根元素的虚拟键盘提供回车键标签或图标提示。 |
详情声明类型"done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
enterKeyHint | "done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined | — | Vue 保留的 enterkeyhint 驼峰别名,用于虚拟键盘回车键提示;该别名已弃用,使用 enterkeyhint。 |
详情声明类型"done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
inert | Booleanish | undefined | — | 使根元素及其平面树后代进入惰性状态,无法聚焦或进行常规用户交互。 |
详情声明类型Booleanish | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
lang | string | undefined | — | 标记根元素内容的语言,供读屏发音和浏览器文本处理使用。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
placeholder | string | undefined | — | 传递输入占位提示;仅对支持该属性的输入根元素生效,普通 button 不显示占位文本。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
spellcheck | Booleanish | undefined | — | 为可编辑内容设置浏览器拼写检查提示。 |
详情声明类型Booleanish | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
tabindex | Numberish | undefined | — | 设置根元素的焦点顺序;0 使用文档顺序,-1 允许程序化聚焦并移出顺序键盘导航。 |
详情声明类型Numberish | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
title | string | undefined | — | 为根元素提供浏览器原生的补充提示文本。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
translate | "yes" | "no" | undefined | — | 指定浏览器或翻译工具是否应翻译根元素的可翻译文本和属性。 |
详情声明类型"yes" | "no" | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
radiogroup | string | undefined | — | 旧式 HTML radio command 的互斥组名称;不会为确认按钮建立单选组行为。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
role | string | undefined | — | 设置根元素向辅助技术公开的角色,须与实际元素和交互行为相符。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
about | string | undefined | — | RDFa 元数据所描述的主体资源标识。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
datatype | string | undefined | — | 指定 RDFa 字面量值的数据类型。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
inlist | any | — | 将同元素上 RDFa 关系的对象加入对应谓词的列表;由属性是否存在决定,值本身被忽略。 |
详情声明类型any 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
prefix | string | undefined | — | 声明 RDFa 前缀与 IRI 的映射,供元数据中的缩写标识使用。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
property | string | undefined | — | 声明 RDFa 主体与资源或字面量之间的属性关系。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
resource | string | undefined | — | 指定 RDFa 关系中使用的资源标识。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
typeof | string | undefined | — | 声明 RDFa 所描述资源所属的类型。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
vocab | string | undefined | — | 指定 RDFa 术语使用的默认词汇表 IRI。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
autocapitalize | string | undefined | — | 为可编辑内容提供自动大写策略提示,例如句首、单词首字母或全部字符。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
autocorrect | string | undefined | — | 为支持自动纠错的可编辑根元素提供开关提示。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
autosave | string | undefined | — | Safari 搜索输入框扩展属性,用作保存搜索历史的名称;普通 button 不保存搜索记录。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
color | string | undefined | — | 传递旧式 HTML color 呈现属性;确认按钮的配色由 variant 和 CSS 类控制。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
itemprop | string | undefined | — | 声明根元素在 HTML 微数据中提供的属性名称。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
itemscope | Booleanish | undefined | — | 为根元素创建 HTML 微数据项目的作用域。 |
详情声明类型Booleanish | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
itemtype | string | undefined | — | 为 itemscope 创建的微数据项目指定词汇类型 URL。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
itemid | string | undefined | — | 为微数据项目提供全局标识,需与 itemscope 和 itemtype 配合。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
itemref | string | undefined | — | 引用作用域之外提供微数据属性的元素 ID,多个 ID 以空格分隔。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
results | Numberish | undefined | — | Safari 搜索输入框扩展属性,设置搜索历史菜单中的最大条目数;普通 button 不显示该菜单。 |
详情声明类型Numberish | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
security | string | undefined | — | 旧式 Internet Explorer iframe 安全区域属性;确认按钮不使用此属性实现安全策略。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
unselectable | "on" | "off" | undefined | — | 旧式浏览器的选择控制属性,on 阻止从该元素开始选择文本,off 允许选择。 |
详情声明类型"on" | "off" | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
inputmode | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined | — | 提示可编辑根元素需要的虚拟键盘布局,例如 numeric 或 email;不执行输入校验。 |
详情声明类型"none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
is | string | undefined | — | 声明标准 HTML 根元素对应的已注册定制内置元素名称,实际支持取决于浏览器和渲染方式。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
exportparts | string | undefined | — | 将 Shadow DOM 内部的 part 名称映射并暴露给外层的 ::part 选择器。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
part | string | undefined | — | 声明根元素在 Shadow DOM 中的 part 名称,供外部通过 ::part 定制样式。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-activedescendant | string | undefined | — | 引用复合控件中当前活动子项的 ID;DOM 焦点保留在控件根元素。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-atomic | Booleanish | undefined | — | 指定实时区域变化时,辅助技术朗读整个区域还是仅朗读变化部分。 |
详情声明类型Booleanish | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-autocomplete | "none" | "both" | "inline" | "list" | undefined | — | 描述文本输入控件的自动补全形式:行内、列表、两者兼有或不提供。 |
详情声明类型"none" | "both" | "inline" | "list" | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-busy | Booleanish | undefined | — | 标记区域正在更新,提示辅助技术等待更新完成再呈现变化。 |
详情声明类型Booleanish | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-checked | Booleanish | "mixed" | undefined | — | 描述复选框、单选项等可勾选控件的状态;mixed 用于支持部分选中的角色。 |
详情声明类型Booleanish | "mixed" | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-colcount | Numberish | undefined | — | 提供表格、网格或树形网格的总列数,包括未呈现在 DOM 中的列。 |
详情声明类型Numberish | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-colindex | Numberish | undefined | — | 提供表格或网格中元素从 1 开始的列位置。 |
详情声明类型Numberish | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-colspan | Numberish | undefined | — | 提供表格或网格单元格横跨的列数。 |
详情声明类型Numberish | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-controls | string | undefined | — | 引用当前控件所控制内容的元素 ID,多个 ID 以空格分隔。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-current | Booleanish | "page" | "step" | "location" | "date" | "time" | undefined | — | 标记关联项目中的当前项,并可说明当前页、步骤、位置、日期或时间。 |
详情声明类型Booleanish | "page" | "step" | "location" | "date" | "time" | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-describedby | string | undefined | — | 引用为根元素提供补充描述的元素 ID,多个 ID 以空格分隔。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-details | string | undefined | — | 引用提供可进一步浏览的结构化详细说明的元素。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-disabled | Booleanish | undefined | — | 向辅助技术声明控件不可操作;此属性本身不阻止点击或关闭对话框。 |
详情声明类型Booleanish | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-dropeffect | "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined | — | 已弃用的拖放语义,描述在目标上放下对象后可执行的操作。 |
详情声明类型"none" | "link" | "copy" | "execute" | "move" | "popup" | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-errormessage | string | undefined | — | 引用当前错误消息的元素 ID,配合 aria-invalid 表达无效状态。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-expanded | Booleanish | undefined | — | 描述控件自身或其控制的内容是否展开;实际展开行为由业务处理。 |
详情声明类型Booleanish | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-flowto | string | undefined | — | 引用可选阅读顺序中的后续元素,供辅助技术在用户选择时采用。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-grabbed | Booleanish | undefined | — | 已弃用的拖放状态,表示元素是否被抓取用于拖动。 |
详情声明类型Booleanish | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-haspopup | Booleanish | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | — | 声明控件可触发的交互式弹出内容类型,例如 menu 或 dialog;不自动创建弹层。 |
详情声明类型Booleanish | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-invalid | Booleanish | "grammar" | "spelling" | undefined | — | 描述输入值是否无效,或存在语法、拼写错误。 |
详情声明类型Booleanish | "grammar" | "spelling" | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-keyshortcuts | string | undefined | — | 公布业务已实现的键盘快捷键;此属性不会注册键盘监听器。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-label | string | undefined | — | 直接提供根元素的无障碍名称,例如仅图标确认按钮的操作名称。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-labelledby | string | undefined | — | 引用提供根元素无障碍名称的元素 ID,多个 ID 以空格分隔。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-level | Numberish | undefined | — | 提供标题、树项等层级结构成员从 1 开始的层级。 |
详情声明类型Numberish | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-live | "off" | "assertive" | "polite" | undefined | — | 设置实时区域更新的通知优先级:关闭自动通知、礼貌通知或立即通知。 |
详情声明类型"off" | "assertive" | "polite" | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-modal | Booleanish | undefined | — | 声明适用的对话框角色为模态;仅为语义声明,焦点限制由对话框原语实现。 |
详情声明类型Booleanish | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-multiline | Booleanish | undefined | — | 描述文本框是否接受多行输入。 |
详情声明类型Booleanish | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-multiselectable | Booleanish | undefined | — | 描述可选择集合是否允许同时选中多个子项。 |
详情声明类型Booleanish | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-orientation | "vertical" | "horizontal" | undefined | — | 描述控件采用水平还是垂直方向布局。 |
详情声明类型"vertical" | "horizontal" | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-owns | string | undefined | — | 通过元素 ID 建立 DOM 层级未表达的无障碍父子关系。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-placeholder | string | undefined | — | 为无值的输入控件提供预期内容或格式提示;不替代控件名称。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-posinset | Numberish | undefined | — | 描述列表项或树项在当前集合中从 1 开始的位置。 |
详情声明类型Numberish | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-pressed | Booleanish | "mixed" | undefined | — | 描述切换按钮的按下状态;mixed 表示混合状态,状态切换由业务管理。 |
详情声明类型Booleanish | "mixed" | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-readonly | Booleanish | undefined | — | 声明支持该状态的控件可操作但其值不能编辑。 |
详情声明类型Booleanish | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-relevant | "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined | — | 指定实时区域中哪些变化需要通知,包括新增、移除和文本变化。 |
详情声明类型"text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-required | Booleanish | undefined | — | 声明输入控件必须提供值;表单实际校验由原生约束或业务逻辑执行。 |
详情声明类型Booleanish | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-roledescription | string | undefined | — | 为现有角色提供面向用户的本地化说明。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-rowcount | Numberish | undefined | — | 提供表格、网格或树形网格的总行数,包括未呈现在 DOM 中的行。 |
详情声明类型Numberish | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-rowindex | Numberish | undefined | — | 提供表格或网格中元素从 1 开始的行位置。 |
详情声明类型Numberish | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-rowspan | Numberish | undefined | — | 提供表格或网格单元格纵跨的行数。 |
详情声明类型Numberish | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-selected | Booleanish | undefined | — | 描述选项、标签页、网格行等支持角色的选中状态。 |
详情声明类型Booleanish | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-setsize | Numberish | undefined | — | 提供列表项或树项所属集合的总项目数。 |
详情声明类型Numberish | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-sort | "none" | "ascending" | "descending" | "other" | undefined | — | 描述表格或网格表头对应数据的排序方向。 |
详情声明类型"none" | "ascending" | "descending" | "other" | undefined 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-valuemax | Numberish | undefined | — | 提供范围控件允许的最大值。 |
详情声明类型Numberish | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-valuemin | Numberish | undefined | — | 提供范围控件允许的最小值。 |
详情声明类型Numberish | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-valuenow | Numberish | undefined | — | 提供范围控件当前的数值。 |
详情声明类型Numberish | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
aria-valuetext | string | undefined | — | 以用户可理解的文本说明范围控件当前数值,例如等级名称。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#default | {} | 确认按钮的文字或图标;asChild 为真时提供承接属性和交互的单个子元素。 |
详情声明类型{}来源packages/ui/src/components/alert-dialog/AlertDialogAction.vue | ||
AlertDialogCancel
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
class可空 | ClassValue | — | 合并到取消按钮根元素的补充 CSS 类名;按钮使用 outline 变体。 |
详情声明类型ClassValue 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogCancel.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#default | {} | 取消按钮内容;激活按钮会请求关闭对话框,打开对话框时 Reka 默认尝试聚焦该按钮。 |
详情声明类型{}来源packages/ui/src/components/alert-dialog/AlertDialogCancel.vue | ||
AlertDialogDescription
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
class可空 | ClassValue | — | 合并到对话框描述元素的补充 CSS 类名。 |
详情声明类型ClassValue 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogDescription.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#default | {} | 解释待确认操作及其后果的描述内容,由 Reka 关联为对话框的无障碍描述。 |
详情声明类型{}来源packages/ui/src/components/alert-dialog/AlertDialogDescription.vue | ||
AlertDialogHeader
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
class可空 | ClassValue | — | 合并到标题和描述头部容器的补充 CSS 类名。 |
详情声明类型ClassValue 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogHeader.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#default | {} | 头部内容,通常组合 AlertDialogTitle 和 AlertDialogDescription。 |
详情声明类型{}来源packages/ui/src/components/alert-dialog/AlertDialogHeader.vue | ||
AlertDialogTitle
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
class可空 | ClassValue | — | 合并到对话框标题元素的补充 CSS 类名。 |
详情声明类型ClassValue 字面量
默认值详情
来源packages/ui/src/components/alert-dialog/AlertDialogTitle.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#default | {} | 对话框标题,由 Reka 关联为无障碍名称;应提供说明待确认操作的标题。
|
详情声明类型{}来源packages/ui/src/components/alert-dialog/AlertDialogTitle.vue | ||
Reka UI 原语
AlertDialogRoot(示例中命名为 AlertDialog)、AlertDialogTrigger 和 AlertDialogPortal 从 reka-ui 导入。上方 API 清单覆盖 BrutxUI 的七个公开子组件;AlertDialogContent 已在内部组合 Portal 和遮罩层,额外的属性及监听器会转发到内容原语,例如 aria-*、data-*、style 和 @escape-key-down。
AlertDialogCancel 使用 outline 按钮变体。AlertDialogTitle 通过默认插槽提供标题;缺少可渲染内容时显示英文占位文本 Alert,业务应提供对应语言的明确标题。
原生属性与事件
AlertDialogAction 显式继承 Reka PrimitiveProps 和 Vue ButtonHTMLAttributes 的属性。API 清单保留这些继承成员,包括 HTML 属性、ARIA 属性和 on* 事件监听器。默认根元素是 button,其类型回退为 button;使用 as 或 asChild 时,属性的实际效果取决于渲染元素。例如,媒体事件需要媒体根元素,表单事件发生在表单上,ARIA 状态须符合当前元素角色。
onClick 等监听器可在模板中写为 @click。激活 AlertDialogAction 会请求关闭对话框,异步处理函数不会延迟该关闭请求;需要业务决定关闭时机时,通过 AlertDialogRoot 的受控 open 状态管理。
继承属性的语义可查阅 HTML 按钮属性 与 RDFa 属性定义。autosave、results 等浏览器扩展的适用范围见 Safari HTML 属性参考。
可访问性
- 键盘操作:按
Escape关闭对话框;AlertDialogCancel点击后关闭对话框;AlertDialogAction确认并关闭对话框 - ARIA 属性:对话框使用语义化的
role="alertdialog"属性 - 焦点管理:对话框打开时,焦点被限制在对话框内