버튼 (Button)
v-btn 컴포넌트는 표준 HTML 버튼을 대체하며 머티리얼 디자인 테마를 따르고 다양한 옵션을 가지고 있습니다. 어떤 색상 헬퍼(color helper)든 버튼의 배경과 글자색을 조절하는데 쓰일 수 있습니다.
API
요소를 절대 위치 시킴
컴포넌트가 활성화(active)되었을때 적용되는 클래스 경고 컴포넌트에 따라 사이드 이펙트가 있을 수 있습니다. 커스텀 클래스를 추가하는 방법은 다음 과 같음 `active-class="default-class your-class"
Vue 라우터의 router-link prop
가능한 공간의 100%로 버튼을 확장
컴포넌트를 아랫쪽(bottom)으로 정렬
컨트롤에 색상을 지정
다크 테마를 적용
버튼 박스의 그림자를 없앰
라우트 아이템이 비활성화됨(disabled)
링크를 정확히 매치. 설정되지 않으면 '/'는 모든 라우트와 매치됨
Vue 라우터의 router-link prop
Makes button round
요소의 위치를 고정
버튼의 배경색을 없앰
컴포넌트의 태그가 <a>가 됩니다..
버튼이 아이콘임을 지정 - round and flat
버튼의 활성화 상태를 조절
큰 버튼
요소를 왼쪽으로 정렬
라이트 테마를 적용
로딩 아이콘 애니메이션을 추가
링크를 nuxt-link로 지정
테두리 강조 버튼
Vue 라우터의 router-link prop
요소를 오른쪽으로 정렬
Applies the v-ripple directive
버튼의 모서리가 둥글어짐
작은 버튼
컴포넌트 태그를 커스텀 태그로
target 어트리뷰트를 설정. 앵커(anchor) 태그의 경우만 작동합니다.
컴포넌트 태그가 <router-link>가 됩니다.
요소를 위쪽(top)으로 정렬
버튼의 type attribute 를 설정
표시여부를 조절 (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)
블럭 버튼은 너비가 가능한 최대값으로 확장됩니다.