v-alert
组件用于通过使用上下文类型图标和颜色向用户传达重要信息。这些默认类型有 4 种变量:success,info,warning 和 error。 默认图标可代表每种类型所传达的不同意思。 也可以自定义提示框的许多部分,例如 border
, icon
, 和 color
以适应几乎所有情况。
下面是一些简单到复杂的例子。
type 属性提供 4 种默认的 v-alert
样式:success, info, warning, 和 error。每个样式都提供默认图标和颜色。默认颜色可通过 Vuetify's theme 进行全局配置。
border 属性支持将一个简单的边框添加到提示框的 4 个边。这可以和 color, dark, type 这些属性一起使用来为提示框提供强调作用。
colored-border prop 会移除警报背景,以突出 border prop 。如果设置了 type,它将使用类型的默认颜色。如果没有设置 color 或 type,颜色将默认为所应用的主题的反色(黑色代表浅色,白色/灰色代表深色)。
dense 属性会降低提示框的高度来制造出一个简单且紧凑的风格。如果和 border 属性一起使用,那么边界高度也会一起降低来保持风格统一。
dismissible 属性将会在提示框的尾部添加一个关闭按钮。点击此按钮将会将它的值设置为 false 且隐藏提示框。你也能够通过绑定 v-model 的值为 true 来恢复提示框。关闭图标会自动应用 aria-label
,可以通过修改 close-label 属性或者改变本地设置 close 的值来进行更改它。浏览 Internationalization page 来了解如何全局修改你本地设置。
icon 属性允许你在提示框的开头添加图标。如果提供了 type,那么将会覆盖默认类型的图标。 此外设置 icon 属性为 false 将会完全移除图标。
outlined 属性将会反转提示框的风格,它会继承当前应用的 color 并应用与文本和边框且将其背景透明化。
prominent 属性通过增加高度并向图标施加光晕来提供更明显的提示。当同时应用 prominent 和 dense 时,提示框将会呈现出普通的风格但是会 prominent 图标特效。
text 属性是一个简单的提示框变量,它对所提供的颜色使用不透明的背景。 类似于其他样式的属性,text 可与 dense, prominent 和 outlined 等其他属性结合使用,以创建独特的定制组件。
transition 属性可让你向提示框应用一个过渡,该动画在隐藏和显示组件时可见。你可以在 Vuetify's prebuilt transitions 浏览更多信息或者查看如何 create your own。
通过将 color、dismissible、border、elevation、icon 和 colored-border props 组合在一起,你可以创建时尚的自定义提醒,比如这个 twitter 通知。
默认情况下,v-alert
被分配到 alert 的 WAI-ARIA 作用,这表示提示框是一个活动区域,包含重要且通常对时间敏感的信息。当使用 dismissible 属性时,关闭图标将会接受相应的 aria-label
。可以通过修改 close-label 属性来修改它或者全局自定义 Internationalization 默认值来修改 close 属性。