Vuetify

商店

企业版

v-alert 组件用于通过使用上下文类型图标和颜色向用户传达重要信息。这些默认类型有 4 种变量:successinfowarningerror。 默认图标可代表每种类型所传达的不同意思。 也可以自定义提示框的许多部分,例如 border, icon, 和 color 以适应几乎所有情况。

最简单形式的提示框显示消息时是一个扁平的 sheets of paper

Options

从下面选择您想要的组件,并查看可用的属性、插槽、事件和函数。

下面是一些简单到复杂的例子。

type 属性提供 4 种默认的 v-alert 样式:success, info, warning, 和 error。每个样式都提供默认图标和颜色。默认颜色可通过 Vuetify's theme 进行全局配置。

border 属性支持将一个简单的边框添加到提示框的 4 个边。这可以和 color, dark, type 这些属性一起使用来为提示框提供强调作用。

colored-border prop 会移除警报背景,以突出 border prop 。如果设置了 type,它将使用类型的默认颜色。如果没有设置 colortype,颜色将默认为所应用的主题的反色(黑色代表浅色,白色/灰色代表深色)。

dense 属性会降低提示框的高度来制造出一个简单且紧凑的风格。如果和 border 属性一起使用,那么边界高度也会一起降低来保持风格统一。

dismissible 属性将会在提示框的尾部添加一个关闭按钮。点击此按钮将会将它的值设置为 false 且隐藏提示框。你也能够通过绑定 v-model 的值为 true 来恢复提示框。关闭图标会自动应用 aria-label,可以通过修改 close-label 属性或者改变本地设置 close 的值来进行更改它。浏览 Internationalization page 来了解如何全局修改你本地设置。

icon 属性允许你在提示框的开头添加图标。如果提供了 type,那么将会覆盖默认类型的图标。 此外设置 icon 属性为 false 将会完全移除图标。

outlined 属性将会反转提示框的风格,它会继承当前应用的 color 并应用与文本和边框且将其背景透明化。

prominent 属性通过增加高度并向图标施加光晕来提供更明显的提示。当同时应用 prominentdense 时,提示框将会呈现出普通的风格但是会 prominent 图标特效。

text 属性是一个简单的提示框变量,它对所提供的颜色使用不透明的背景。 类似于其他样式的属性,text 可与 dense, prominentoutlined 等其他属性结合使用,以创建独特的定制组件。

transition 属性可让你向提示框应用一个过渡,该动画在隐藏和显示组件时可见。你可以在 Vuetify's prebuilt transitions 浏览更多信息或者查看如何 create your own

通过将 colordismissibleborderelevationiconcolored-border props 组合在一起,你可以创建时尚的自定义提醒,比如这个 twitter 通知。

默认情况下,v-alert 被分配到 alertWAI-ARIA 作用,这表示提示框是一个活动区域,包含重要且通常对时间敏感的信息。当使用 dismissible 属性时,关闭图标将会接受相应的 aria-label。可以通过修改 close-label 属性来修改它或者全局自定义 Internationalization 默认值来修改 close 属性。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!