Jumbotron

Jumbotron представляет собой гибкий вызов компонента действия. Поддержка фоновых изображений, наложения градиента и многое другое.

API

v-jumbotron
Имя
active-class
По умолчанию
undefined
Тип
string

Класс связан, когда компонент активен. warning В зависимости от компонента это может вызвать побочные эффекты. Если вам нужно добавить собственный класс поверх значения по умолчанию, просто выполните active-class="default-class your-class"

Имя
append
По умолчанию
false
Тип
boolean

Vue Router router-link

Имя
color
По умолчанию
undefined
Тип
string

Применяет заданный цвет к элементу управления

Имя
dark
По умолчанию
false
Тип
boolean

Применяет тёмный вариант темы

Имя
disabled
По умолчанию
false
Тип
boolean

Элемент маршрута отключён

Имя
exact
По умолчанию
false
Тип
boolean

Точно сопоставьте ссылку. Без этого «/» будет соответствовать каждому маршруту

Имя
exact-active-class
По умолчанию
undefined
Тип
string

Vue Router router-link

Имя
gradient
По умолчанию
undefined
Тип
string

Применение градиентного фона. Если используется с src prop, наложите его

Имя
height
По умолчанию
400px
Тип
number | string

Установка высоты компонента

Имя
href
По умолчанию
undefined
Тип
string | object

Обозначает тег компонента <a>

Имя
light
По умолчанию
false
Тип
boolean

Применяет светлый вариант темы

Имя
nuxt
По умолчанию
false
Тип
boolean

Указывает, что ссылка является nuxt-link

Имя
replace
По умолчанию
false
Тип
boolean

Vue Router router-link

Имя
ripple
По умолчанию
undefined
Тип
boolean | object

Применяет директиву v-ripple

Имя
src
По умолчанию
undefined
Тип
string

Img src

Имя
tag
По умолчанию
'div'
Тип
string

Укажите настраиваемый тег для использования в компоненте

Имя
target
По умолчанию
undefined
Тип
string

Укажите целевой атрибут, работает только с тегом привязки.

Имя
to
По умолчанию
undefined
Тип
string | object

Обозначает тег компонента <router-link>

Примеры

Пользовательский цвет

Применение специального фонового цвета

Градиент

Более подробную информацию о градиентах можно найти здесь

Градиент с изображением

Более подробную информацию о градиентах можно найти здесь

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