The v-btn component replaces the standard html button with a material design theme and a multitude of options. Any color helper class can be used to alter the background or text color.
Buttons in their simplest form contain uppercase text, a slight elevation, hover effect, and a ripple effect on click.
제공되는 Props, Slots, Events 와 함수들을 이용하여 원하는 컴포넌트를 직접 구현해 보세요.
Applies position: absolute to the component.
Configure the active CSS class applied when the link is active. You can find more information about the active-class prop on the vue-router documentation.
Setting append prop always appends the relative path to the current path. You can find more information about the append prop on the vue-router documentation.
Expands the button to 100% of available space.
Aligns the component towards the bottom.
Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). You can find list of built in classes on the colors page.
Applies the dark theme variant to the component. You can find more information on the Material Design documentation for dark themes.
Removes the button box shadow.
Removes the ability to click or target the component.
Designates an elevation applied to the component between 0 and 24. You can find more information on the elevation page.
Exactly match the link. Without this, '/' will match every route. You can find more information about the exact prop on the vue-router documentation.
Configure the active CSS class applied when the link is active with exact match. You can find more information about the exact-active-class prop on the vue-router documentation.
Designates the button as a floating-action-button - round.
Applies position: fixed to the component.
Sets the height for the component.
Designates the component as anchor and applies the href attribute.
Designates the button as icon - round and flat
Controls the button's active state.
Makes the component large.
Aligns the component towards the left. This should be used with the absolute or fixed props.
Applies the light theme variant to the component.
Designates that the component is a link. This is automatic when using the href or to prop.
로딩 아이콘 애니메이션을 추가
Sets the maximum height for the component.
Sets the maximum width for the component.
Sets the minimum height for the component.
Sets the minimum width for the component.
Specifies the link is a nuxt-link. For use with the nuxt framework.
Makes the background transparent and applies a thin border.
Setting replace prop will call router.replace() instead of router.push() when clicked, so the navigation will not leave a history record. You can find more information about the replace prop on the vue-router documentation.
Don't blur on click.
Aligns the component towards the right. This should be used with the absolute or fixed props.
Applies a large border radius on the button.
Applies a large border radius on the top left and bottom right of the card.
Makes the component small.
Specify a custom tag used on the root element.
Designates the target attribute. This should only be applied when using the href prop.
Makes the background transparent.
Removes the component's border-radius.
Denotes the target route of the link. You can find more information about the to prop on the vue-router documentation.
Aligns the content towards the top.
Set the button's type attribute
The value used when the component is selected in a group. If not provided, the index will be used.
Sets the width for the component.
Makes the component extra large.
Makes the component extra small.
The default Vue slot.
Custom loader
Event that is emitted when the component is clicked
Event0.18 !default;$border-radius-root !default;0.24 !default;map-deep-merge(
(
'x-small': .625rem,
'small': .75rem,
'default': .875rem,
'large': .875rem,
'x-large': 1rem
),
$btn-font-sizes
);500 !default;0.08 !default;18px !default;12px !default;.0892857143em !default;thin !default;28px !default;map-deep-merge(
(
'x-small': 20,
'small': 28,
'default': 36,
'large': 44,
'x-large': 52
),
$btn-sizes
);uppercase !default;opacity 0.2s map-get($transition, 'ease-in-out') !default;0.28s !default;map-get($transition, 'fast-out-slow-in') !default;map-deep-merge(
(
'x-small': 18,
'small': 24,
'default': 24,
'large': 28,
'x-large': 32
),
$fab-icon-sizes
);map-deep-merge(
(
'x-small': 32,
'small': 40,
'default': 56,
'large': 64,
'x-large': 72
),
$fab-sizes
);v-btn is the only component that behaves differently when using the dark prop. Normally components use the dark prop to denote that they have a dark colored background and need their text to be white. While this will work for v-btn, it is advised to only use the prop when the button IS ON a colored background due to the disabled state blending in with white backgrounds. If you need white text, simply add the white--text class.
간단한 예재부터 복잡한 예제까지 아래를 참고해서 앱 개발을 시작해 보세요.
Text buttons have no box shadow and no background. Only on hover is the container for the button shown.
Raised 버튼은 클릭할때 박스의 그림자가 커집니다. 버튼의 기본 스타일입니다.
Depressed 버튼은 여전히 배경색을 관리하지만 박스 그림자가 없습니다.
Button dropdowns are regular selects with additional styling.
아이콘은 버튼의 주요 컨텐츠로 사용될 수 있습니다.
Floating buttons are rounded and usually contain an icon.
여러 시나리오에 따른 다양한 크기 옵션이 있습니다.
Outlined buttons inherit their borders from the current color applied.
둥근 버튼(Rounded buttons)은 일반적인 버튼과 같습니다. 모서리가 둥글다는 것만 빼면요!
타일 버튼(Tile buttons)도 역시 일반적인 버튼과 같습니다. 모서리에 각이 져있을 뿐이에요!
블럭 버튼은 너비가 가능한 최대값으로 확장됩니다.
loading prop을 사용해서 사용자에게 어떤 것이 진행되고 있다는 것을 알릴 수 있습니다. 기본적으로는 v-progress-circular가 사용되지만 커스터마이즈 할 수 있습니다.
더 읽을 준비 되었나요? 그렇다면 아래 설명서를 더 읽어보세요!