Jumbotron

El jumbotron es un componente flexible para llamar a la acción. Tiene soporte para imágenes de fondo, overlays con degradado y mucho más.

API

v-jumbotron
Nombre
active-class
Default
undefined
Type
string

La clase que se aplica cuando el componente está activo. Advertencia: Dependiendo del componente, esto puede traer efectos secundarios. Si necesitas agregar una clase personalizada encima de la default, házlo así: active-class="default-class your-class"

Nombre
append
Default
false
Type
boolean

Prop router-link del Vue Router

Nombre
color
Default
undefined
Type
string

Aplica el color especificado al control.

Nombre
dark
Default
false
Type
boolean

Aplica la variante del tema dark

Nombre
disabled
Default
false
Type
boolean

Route item deshabilitado

Nombre
exact
Default
false
Type
boolean

Coincidir con el link exactamente. Sin esto, "/" coincidirá con todas las rutas

Nombre
exact-active-class
Default
undefined
Type
string

Prop router-link del Vue Router

Nombre
gradient
Default
undefined
Type
string

Aplica un fondo de degradado. Si se utiliza con la prop src, lo colocará por encima

Nombre
height
Default
400px
Type
number | string

Configura la altura del componente

Nombre
href
Default
undefined
Type
string | object

Denotará la etiqueta del componente como <a>

Nombre
light
Default
false
Type
boolean

Aplica la variante del tema light

Nombre
nuxt
Default
false
Type
boolean

Especifica el link como un nuxt-link

Nombre
replace
Default
false
Type
boolean

Prop router-link del Vue Router

Nombre
ripple
Default
undefined
Type
boolean | object

Aplica la directiva v-ripple

Nombre
src
Default
undefined
Type
string

El src de la imagen

Nombre
tag
Default
'div'
Type
string

Especifica una etiqueta personalizada para ser usada en el componente

Nombre
target
Default
undefined
Type
string

Especifica el atributo target, sólo funciona para la etiqueta <a>

Nombre
to
Default
undefined
Type
string | object

Denotará la etiqueta del componente como <router-link>

Ejemplos

Custom color

Apply a custom background-color

Gradient

More information on writing gradients can be found here

Gradient with image

More information on writing gradients can be found here

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore