VBanner API

Props

name	type	default
`avatar`	string	undefined
Designates a specific src image to pass to the thumbnail.
`bg-color` New in v3.4.0	string	undefined
Applies specified color to the control’s background. Used on components that also support the color prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`border`	string \| number \| boolean	false
Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border="sm"`). Find a list of the built-in border classes on the borders page.
`color`	string	undefined
Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`density`	'default' \| 'comfortable' \| 'compact'	'default'
Adjusts the vertical height used by the component.
`elevation`	string \| number	undefined
Designates an elevation applied to the component between 0 and 5. You can find more information on the elevation page.
`height`	string \| number	undefined
Sets the height for the component.
`icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	undefined
Apply a specific icon using the v-icon component.
`lines`	'one' \| 'two' \| 'three'	undefined
The amount of visible lines of text before it truncates.
`location`	Anchor	undefined
Specifies the component’s location. Can combine by using a space separated string.
`max-height`	string \| number	undefined
Sets the maximum height for the component.
`max-width`	string \| number	undefined
Sets the maximum width for the component.
`min-height`	string \| number	undefined
Sets the minimum height for the component.
`min-width`	string \| number	undefined
Sets the minimum width for the component.
`mobile`	boolean	null
Applies the mobile banner styles.
`mobile-breakpoint`	number \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'	undefined
Overrides the display configuration default screen size that the component should be considered in mobile.
`position`	'fixed' \| 'static' \| 'relative' \| 'absolute' \| 'sticky'	undefined
Sets the position for the component.
`rounded`	string \| number \| boolean	undefined
Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page.
`stacked`	boolean	false
Forces the banner actions onto a new line. This is not applicable when the banner has `lines="one"`.
`sticky`	boolean	false
Applies `position: sticky` to the component with `top: 0`. You can find more information on the MDN documentation for sticky position.
`tag`	string \| (new () => any) \| FunctionalComponent	'div'
Specify a custom tag used on the root element.
`text`	string	undefined
Specify content text for the component.
`theme`	string	undefined
Specify a theme for this component and all of its children.
`tile`	boolean	false
Removes any applied border-radius from the component.
`width`	string \| number	undefined
Sets the width for the component.

Slots

never

never

never

never

`actions`
The slot used for the action’s content such as a v-btn.
`default`
The default Vue slot.
`prepend`
Slot for icon at beginning of banner.
`text`
Slot for the component’s text content.

SASS Variables

name	default
`$banner-action-margin`	20px
`$banner-actions-line-margin-top`	20px
`$banner-background`	rgb(var(--v-theme-surface))
`$banner-border`	( $banner-border-color, $banner-border-style, $banner-border-width, $banner-border-thin-width )
`$banner-border-color`	settings.$border-color-root
`$banner-border-radius`	map.get(settings.$rounded, 0)
`$banner-border-style`	settings.$border-style-root
`$banner-border-thin-width`	thin
`$banner-border-width`	0 0 thin 0
`$banner-color`	tools.theme-color('on-surface', var(--v-high-emphasis-opacity))
`$banner-density`	('default': 0, 'comfortable': -1, 'compact': -2)
`$banner-elevation`	0
`$banner-font-size`	tools.map-deep-get(settings.$typography, 'body-medium', 'size')
`$banner-line-height`	tools.map-deep-get(settings.$typography, 'label-large', 'line-height')
`$banner-mobile-avatar-margin-end`	16px
`$banner-mobile-content-padding-end`	8px
`$banner-mobile-padding-end`	8px
`$banner-mobile-padding-start`	16px
`$banner-padding`	8px
`$banner-padding-inline-end`	8px
`$banner-padding-inline-start`	16px
`$banner-positions`	absolute fixed sticky
`$banner-prepend-margin-end`	24px
`$banner-rounded-border-radius`	settings.$border-radius-root
`$banner-stacked-padding-inline-end`	36px
`$banner-sticky-top`	0
`$banner-sticky-z-index`	1
`$banner-text-padding-end`	90px
`$banner-theme`	( $banner-background, $banner-color )
`$banner-width`	100%

#VBanner API

VBanner API