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.
Выберите нужный компонент ниже и посмотрите доступные параметры, слоты, события и функции.
When used inside of v-main, will calculate top based upon application v-toolbar and v-system-bar.
Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). You can find list of built in classes on the colors page.
Применить в компоненте тёмную тему. Вы можете найти больше информации в документации Material Design для [тёмных тем оформления] (https://material.io/design/color/dark-theme.html).
Designates an elevation applied to the component between 0 and 24. You can find more information on the elevation page.
Sets the height for the component.
Определяет конкретную иконку.
Designates a specific icon color.
Applies the light theme variant to the component.
Sets the maximum height for the component.
Sets the maximum width for the component.
Sets the minimum height for the component.
Sets the minimum width for the component.
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.
Controls whether the component is visible or hidden.
Sets the width for the component.
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
}Слот Vue по умолчанию.
The slot used for the icon's content.
Controls whether the component is visible or hidden.
(): 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;Ниже приведена коллекция простых и сложных примеров.
Однострочный VBanner используется для небольшого количества текста, желательно его использовать для больших экранов. Также, вы можете установить свойство sticky для того, чтобы баннер всегда оставался вверху экрана (примечание: это не работает в IE11). Вы можете узнать больше о position: sticky здесь.
Two-line VBanner can store larger amount of data, use it for big messages.
Слот для иконки позволяет вам задать пользовательские размеры, цвет и другие параметры иконки.
VBanner запускает событие click:icon при нажатии на иконку, даже если она находится в слоте.
the actions slot has dismiss function in its scope, you can use it to easily dismiss banner.
Готовы к большему? Продолжить чтение с: