버튼 (Button)

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

사용법


API

v-btn

예제

플랫 (Flat)

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


Raised

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


Depressed

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


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

Button dropdowns are regular selects with additional styling.


버튼 토글 (Button Toggle)

토글 버튼은 선택된 속성에 따라 본질적으로 라디오(radio) 나 체크박스(checkbox) 스타일입니다. 이 컴포넌트는 v-toolbar 컴포넌트와 호환됩니다.


아이콘 (Icon)

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


플로팅 (Floating)

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


로더 (Loaders)

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


크기조절 (Sizing)

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


테두리 강조 (Outline)

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


둥근 버튼 (Round)

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


블럭 (Block)

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


In toolbarNew in v1.1

Easily integrate customized button solutions with a v-toolbar