점보트론 (Jumbotron)

점포트론은 유연한 액션컴포넌트 입니다. 배경 이미지와 그래디언트 오버레이, 그리고 여러가지를 지원합니다.

사용법


API

v-jumbotron
이름
active-class
디폴트
undefined
타입
string

컴포넌트가 활성화(active)되었을때 적용되는 클래스 경고 컴포넌트에 따라 사이드 이펙트가 있을 수 있습니다. 커스텀 클래스를 추가하는 방법은 다음 과 같음 `active-class="default-class your-class"

이름
append
디폴트
false
타입
boolean

Vue 라우터의 router-link prop

이름
color
디폴트
undefined
타입
string

컨트롤에 색상을 지정

이름
dark
디폴트
false
타입
boolean

다크 테마를 적용

이름
disabled
디폴트
false
타입
boolean

라우트 아이템이 비활성화됨(disabled)

이름
exact
디폴트
false
타입
boolean

링크를 정확히 매치. 설정되지 않으면 '/'는 모든 라우트와 매치됨

이름
exact-active-class
디폴트
undefined
타입
string

Vue 라우터의 router-link prop

이름
gradient
디폴트
undefined
타입
string

그래디언트 배경을 적용 src prop과 함께 쓰이면 src 를 대체합니다.

이름
height
디폴트
400px
타입
number | string

컴포넌트의 높이를 설정

이름
href
디폴트
undefined
타입
string | object

컴포넌트의 태그가 <a>가 됩니다..

이름
light
디폴트
false
타입
boolean

라이트 테마를 적용

이름
nuxt
디폴트
false
타입
boolean

링크를 nuxt-link로 지정

이름
replace
디폴트
false
타입
boolean

Vue 라우터의 router-link prop

이름
ripple
디폴트
undefined
타입
boolean | object

Applies the v-ripple directive

이름
src
디폴트
undefined
타입
string

이미지 소스 (img src)

이름
tag
디폴트
'div'
타입
string

컴포넌트 태그를 커스텀 태그로

이름
target
디폴트
undefined
타입
string

target 어트리뷰트를 설정. 앵커(anchor) 태그의 경우만 작동합니다.

이름
to
디폴트
undefined
타입
string | object

컴포넌트 태그가 <router-link>가 됩니다.

예제

커스텀 색상 (Custom color)

커스텀 배경색을 적용해보세요.


그래디언트 (Gradient)

그래디언트를 작성하기 위한 더 자세한 정보는 여기에서 찾을 수 있습니다.


그래디언트와 이미지 (Gradient with image)

그래디언트를 작성하기 위한 더 자세한 정보는 여기에서 찾을 수 있습니다.