버튼 : 플로팅 액션 버튼 (Buttons: Floating Action Button)

v-btn 컴포넌트는 플로팅 액션버튼에 사용됩니다. 이는 어플리케이션에 주요 액션 포인트를 제공합니다. v-speed-dial 컴포넌트와 결합하면 사용자가 사용할 수 있는 기능들을 다양한 그룹으로 만들 수 있습니다.

사용법

플로팅 액션 버튼을 구성요소에 결합하면 어플리케이션에서 장려되는 액션을 강조할 수 있습니다. 대부분의 경우 기본 크기가 사용되지만, 다른 요소와의 조화를 위해 small 변형이 있습니다.


API

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

요소를 절대 위치 시킴

이름
bottom
디폴트
false
타입
boolean

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

이름
direction
디폴트
'top'
타입
string

스피드다이얼 내용이 보여지는 방향. 가능한 값은 top, bottom, left, right.

이름
fixed
디폴트
false
타입
boolean

요소의 위치를 고정

이름
left
디폴트
false
타입
boolean

요소를 왼쪽으로 정렬

이름
mode
디폴트
undefined
타입
string

트랜지션 모드를 설정(transition-group 에는 적용되지 않음)

이름
open-on-hover
디폴트
false
타입
boolean

마우스가 올려졌을때 (hover) 엽니다.

이름
origin
디폴트
undefined
타입
string

트랜지션 중심(origin)을 설정

이름
right
디폴트
false
타입
boolean

요소를 오른쪽으로 정렬

이름
top
디폴트
false
타입
boolean

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

이름
transition
디폴트
'scale-transition'
타입
string

컴포넌트 트랜지션을 설정. 내장 트랜지션과 사용자 트랜지션 모두 가능

이름
value
디폴트
undefined
타입
any

표시여부를 조절 (Controls visibility)

예제

작은 버튼 (Small variant)

더 나은 화면 구성을 위해 리스트 아바타에 맞는 작은 버튼을 사용합니다.


애니메이션 (Display animation)

처음 보여질때, 플로팅 액션 버튼은 스크린 위로 애니매이션 효과와 함께 나타납니다. 여기서 v-show 와 함께 v-fab-transition이 사용되었습니다. 또한 Vuetify 에서 재공하는 또는 직접 만든 커스텀 트랜지션을 사용할 수도 있습니다.


가로 화면 (Lateral screens)

버튼의 기본 액션을 바꿀땐, 바뀌는 것을 강조하기 위한 트랜지션을 사용하는 것이 권장됩니다. 이를 위해 key prop에 Vue 트랜지션 시스템을 전환을 지시하기 위한 일련의 데이터를 연결합니다. 커스텀 트랜지션을 사용할 수 있지만 이때 mode prop 을 out-in으로 설정해야 합니다.


FAB(플로팅 액션 버튼)와 스피드 다이얼 (FAB with speed-dial)

스피드다이얼(speed-dial) 컴포넌트는 FAB 경험을 정확히 원하는 대로 커스터마이즈 할 수 있는 강력한 API 를 가지고 있습니다.