The v-banner component is used as middle-interruptive message to user with 1-2 actions. It comes in 2 variations, single-line and multi-line (implicit). These can have icons which you can use with your message and actions.
Wählen Sie unten Ihren gewünschte Komponente aus und sehen Sie die verfügbaren Attribute, Slots, Ereignisse und Funktionen.
When used inside of v-main, will calculate top based upon application v-toolbar and v-system-bar.
Wendet eine bestimmte Farbe für die Steuerung an - es kann der Name der Materialfarbe sein (zum Beispiel success oder purple) oder css-Farben (#033 oder rgba(255, 0, 0, 0.5)). Sie finden eine Liste der eingebauten Klassen auf der Farbseite.
Wendet die dunkle Theme-Variante für die Komponente an. Mehr Informationen zur Material Design Dokumentation für dunkle Themes.
Legt eine Höhe für die Komponente zwischen 0 und 24 fest. Weitere Informationen finden Sie auf der Höhenseite.
Legt die Höhe für den Component fest.
Definiert ein bestimmtes Icon.
Designates a specific icon color.
Wendet die helle Theme-Variante für die Komponente an.
Legt die maximale Höhe für den Component fest.
Legt die maximale Breite für den Component fest.
Legt die mindest Höhe für den Component fest.
Legt die mindest Breite für den Component fest.
Removes elevation (box-shadow) and adds a thin border.
Designates the border-radius applied to the component. You can find more information on the Border Radius page.
Applies a large border radius on the top left and bottom right of the card.
Forces the banner onto a single line.
Applies position: sticky to the component (Evergreen browsers only). You can find more information on the MDN documentation for sticky position.
Specify a custom tag used on the root element.
Removes the component's border-radius.
Legt fest, ob die Komponente sichtbar oder versteckt ist.
Legt die Breite für den Component fest.
The slot used for the action's content such as a v-btn. The dismiss function in this slots scope, when invoked, will close the banner.
{
dismiss: (): void
}Der Standard-Vue Slot.
The slot used for the icon's content.
Legt fest, ob die Komponente sichtbar oder versteckt ist.
(): void8px !default;90px !default;0 !default;8px !default;0 !default;8px !default;16px !default;20px !default;12px !default;24px !default;10px !default;36px !default;16px !default;16px !default;map-get($rounded, 'xl') $banner-border-radius !default;24px !default;16px !default;Unten finden Sie eine Sammlung einfacher bis komplexer Beispiele.
Single-line VBanner is used for small amount of information and is recommended for desktop only implementations. You can optionally enable the sticky prop to ensure the content is pinned to the screen (note: does not work in IE11). You can find more information about sticky positioning here.
Two-line VBanner can store larger amount of data, use it for big messages.
The icon slot allows you to to explicitly control the content and functionality within it.
VBanner emits click:icon event on icon click, even with custom icon slot.
the actions slot has dismiss function in its scope, you can use it to easily dismiss banner.