The v-btn component can be used as a floating action button. This provides an application with a main point of action. Combined with the v-speed-dial component, you can create a diverse set of functions available for your users.
Floating action buttons can be attached to material to signify a promoted action in your application. The default size will be used in most cases, whereas the small variant can be used to maintain continuity with similar sized elements.
제공되는 Props, Slots, Events 와 함수들을 이용하여 원하는 컴포넌트를 직접 구현해 보세요.
Applies position: absolute to the component.
Aligns the component towards the bottom.
스피드다이얼 내용이 보여지는 방향. 가능한 값은 top, bottom, left, right.
Applies position: fixed to the component.
Aligns the component towards the left.
Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation for transition modes.
마우스가 올려졌을때 (hover) 엽니다.
Sets the transition origin on the element. You can find more information on the MDN documentation for transition origin.
Aligns the component towards the right.
Aligns the content towards the top.
Sets the component transition. Can be one of the built in transitions or one your own.
Controls whether the component is visible or hidden.
When used, will activate the component when clicked (or hover for specific components). This manually stops the event propagation. Without this slot, if you open the component through its model, you will need to manually stop the event propagation
The default Vue slot.
6px !default;16px !default;1 !default;간단한 예재부터 복잡한 예제까지 아래를 참고해서 앱 개발을 시작해 보세요.
더 나은 화면 구성을 위해 리스트 아바타에 맞는 작은 버튼을 사용합니다.
처음 보여질때, 플로팅 액션 버튼은 스크린 위로 애니매이션 효과와 함께 나타납니다. 여기서 v-show 와 함께 v-fab-transition이 사용되었습니다. 또한 Vuetify 에서 재공하는 또는 직접 만든 커스텀 트랜지션을 사용할 수도 있습니다.
스피드다이얼(speed-dial) 컴포넌트는 FAB 경험을 정확히 원하는 대로 커스터마이즈 할 수 있는 강력한 API 를 가지고 있습니다.
버튼의 기본 액션을 바꿀땐, 바뀌는 것을 강조하기 위한 트랜지션을 사용하는 것이 권장됩니다. 이를 위해 key prop에 Vue 트랜지션 시스템을 전환을 지시하기 위한 일련의 데이터를 연결합니다. 커스텀 트랜지션을 사용할 수 있지만 이때 mode prop 을 out-in으로 설정해야 합니다.