Die Komponente v-alert wird verwendet, um wichtige Informationen an den Benutzer über die Verwendung kontextabhängigen Typen Symbole und Farbe zu übermitteln. Es gibt 4 Variationen: Erfolg, info, Warnung und Fehler. Standardsymbole werden zugewiesen, die helfen, verschiedene Aktionen zu repräsentieren. Viele Teile eines Alarms, wie z. B. border, icon und color können auch so angepasst werden, dass sie nahezu jeder Situation entsprechen.
Alarme in ihrer einfachsten Form ist ein flaches stück Paper, auf dem eine Nachricht anzeigezeigt wird.
Wählen Sie unten Ihren gewünschte Komponente aus und sehen Sie die verfügbaren Attribute, Slots, Ereignisse und Funktionen.
Unten finden Sie eine Sammlung einfacher bis komplexer Beispiele.
The type prop provides 4 default v-alert styles: success, info, warning, and error. Each of these styles provide a default icon and color. The default colors can be configured globally by customizing Vuetify's theme.
Das border (Rand) Attribut fügt auf eine der 4 Seiten der Alarmmeldung einen einfachen Rand hinzu. Dies kann mit Attributen wie color, dark und type kombiniert werden, um dem Alarm anzupassen.
Das colored-border Attribut entfernt den Alarmhintergrund, um das border Attribut zu unterstreichen. Wenn ein type gesetzt ist, wird die Standardfarbe des entsprechenden typs verwendet. Wenn keine color oder type gesetzt ist, wird die Farbe standardmäßig auf die invertierte Farbe des angewendeten Themes (schwarz für hell und weiß/grau für dunkel) gesetzt.
Das dense Attribut verringert die Höhe des Alarms, um einen einfachen und kompakten Stil zu schaffen. In Kombination mit dem border Attribut wird die Grenzdicke reduziert, um mit dem Stil konsistent zu bleiben.
The dismissible prop adds a close button to the end of the alert component. Clicking this button will set its value to false and effectively hide the alert. You can restore the alert by binding v-model and setting it to true. The close icon automatically has an aria-label applied that can be changed by modifying the close-label prop or changing close value in your locale. For more information on how to global modify your locale settings, navigate to the Internationalization page.
The icon prop allows you to add an icon to the beginning of the alert component. If a type is provided, this will override the default type icon. Additionally setting the icon prop to false will remove the icon altogether.
The outlined prop inverts the style of an alert, inheriting the currently applied color, applying it to the text and border, and making its background transparent.
The prominent prop provides a more pronounced alert by increasing the height and applying a halo to the icon. When applying both prominent and dense together, the alert will take on the appearance of a normal alert but with the prominent icon effects.
The text prop is a simple alert variant that applies a reduced opacity background of the provided color. Similar to other styled props, text can be combined with other props like dense, prominent, and outlined to create a unique and customized component.
The transition prop allows you to apply a transition to the alert which is viewable when the component hides and shows. For more information, you can checkout any of Vuetify's prebuilt transitions or review how to create your own.
By combining color, dismissible, closeIcon, border, elevation, icon, and colored-border props you can create stylish custom alerts such as this twitter notification.
By default, v-alert components are assigned the WAI-ARIA role of alert which denotes that the alert "is a live region with important and usually time-sensitive, information." When using the dismissible prop the close icon will receive a corresponding aria-label. This value can be modified by changing either the close-label prop or globally through customizing the Internationalization's default value for the close property.