버튼 (Button)

v-btn 컴포넌트는 표준 HTML 버튼을 대체하며 머티리얼 디자인 테마를 따르고 다양한 옵션을 가지고 있습니다. 어떤 색상 헬퍼(color helper)든 버튼의 배경과 글자색을 조절하는데 쓰일 수 있습니다.

사용법


API

v-btn
이름
absolute
디폴트
false
타입
boolean

요소를 절대 위치 시킴

이름
active-class
디폴트
'v-btn--active'
타입
string

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

이름
append
디폴트
false
타입
boolean

Vue 라우터의 router-link prop

이름
block
디폴트
false
타입
boolean

가능한 공간의 100%로 버튼을 확장

이름
bottom
디폴트
false
타입
boolean

컴포넌트를 아랫쪽(bottom)으로 정렬

이름
color
디폴트
undefined
타입
string

컨트롤에 색상을 지정

이름
dark
디폴트
false
타입
boolean

다크 테마를 적용

이름
depressed
디폴트
false
타입
boolean

버튼 박스의 그림자를 없앰

이름
disabled
디폴트
false
타입
boolean

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

이름
exact
디폴트
false
타입
boolean

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

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

Vue 라우터의 router-link prop

이름
fab
디폴트
false
타입
boolean

Makes button round

이름
fixed
디폴트
false
타입
boolean

요소의 위치를 고정

이름
flat
디폴트
false
타입
boolean

버튼의 배경색을 없앰

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

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

이름
icon
디폴트
false
타입
boolean

버튼이 아이콘임을 지정 - round and flat

이름
input-value
디폴트
undefined
타입
any

버튼의 활성화 상태를 조절

이름
large
디폴트
false
타입
boolean

큰 버튼

이름
left
디폴트
false
타입
boolean

요소를 왼쪽으로 정렬

이름
light
디폴트
false
타입
boolean

라이트 테마를 적용

이름
loading
디폴트
false
타입
boolean

로딩 아이콘 애니메이션을 추가

이름
nuxt
디폴트
false
타입
boolean

링크를 nuxt-link로 지정

이름
outline
디폴트
false
타입
boolean

테두리 강조 버튼

이름
replace
디폴트
false
타입
boolean

Vue 라우터의 router-link prop

이름
right
디폴트
false
타입
boolean

요소를 오른쪽으로 정렬

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

Applies the v-ripple directive

이름
round
디폴트
false
타입
boolean

버튼의 모서리가 둥글어짐

이름
small
디폴트
false
타입
boolean

작은 버튼

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

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

이름
target
디폴트
undefined
타입
string

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

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

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

이름
top
디폴트
false
타입
boolean

요소를 위쪽(top)으로 정렬

이름
type
디폴트
'button'
타입
string

버튼의 type attribute 를 설정

이름
value
디폴트
undefined
타입
any

표시여부를 조절 (Controls visibility)

예제

플랫 (Flat)

평평한 플랫 버튼은 박스 그림자와 배경이 없습니다. 마우스 포인터를 버튼 컨테이너 위에 올려야만 (Only on hover) 버튼 형태가 보입니다.


Raised

Raised 버튼은 클릭할때 박스의 그림자가 커집니다. 버튼의 기본 스타일입니다.


Depressed

Depressed 버튼은 여전히 배경색을 관리하지만 박스 그림자가 없습니다.


버튼 드롭다운 변형 (Button Dropdown Variants)

Button dropdowns are regular selects with additional styling.


아이콘 (Icon)

아이콘은 버튼의 주요 컨텐츠로 사용될 수 있습니다.


플로팅 (Floating)

플로팅 버튼(Floating buttons)은 둥글고 보통 아이콘을 포함합니다.


로더 (Loaders)

loading prop을 사용해서 사용자에게 어떤 것이 진행되고 있다는 것을 알릴 수 있습니다. 기본적으로는 v-progress-circular가 사용되지만 커스터마이즈 할 수 있습니다.


크기조절 (Sizing)

여러 시나리오에 따른 다양한 크기 옵션이 있습니다.


테두리 강조 (Outline)

테두리가 강조된 버튼(Outline buttons)의 테두리(border) 색은 현재 적용된 색에서 상속됩니다.


둥근 버튼 (Round)

둥근 버튼(Rounded buttons)은 둥근 모서리를 가지고 있을 뿐 보통 버튼과 똑같이 작동합니다.


블럭 (Block)

블럭 버튼은 너비가 가능한 최대값으로 확장됩니다.