The v-snackbar component is used to display a quick message to a user. Snackbars support positioning, removal delay, and callbacks.
제공되는 Props, Slots, Events 와 함수들을 이용하여 원하는 컴포넌트를 직접 구현해 보세요.
Applies position: absolute to the component.
Respects boundaries of—and will not overlap with—other app components like v-app-bar, v-navigation-drawer, and v-footer.
Aligns the component towards the bottom.
Positions the snackbar in the center of the screen, (x and y axis).
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.
Apply a custom class to the snackbar content
Applies the dark theme variant to the component. You can find more information on the Material Design documentation for dark themes.
Designates an elevation applied to the component between 0 and 24. You can find more information on the elevation page.
Sets the height for the component.
Aligns the component towards the left.
Applies the light theme variant to the component.
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.
Gives the snackbar a larger minimum height.
Removes elevation (box-shadow) and adds a thin border.
Aligns the component towards the right.
Designates the border-radius applied to the component. You can find more information on the Border Radius page.
Applies a large border radius on the top left and bottom right of the card.
Specify a custom tag used on the root element.
Applies the defined color to text and a low opacity background of the same.
Removes the component's border-radius.
스낵바가 자동으로 숨겨질때 까지 걸리는 시간
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.
Stacks snackbar content on top of the actions (button).
Sets the width for the component.
Used to bind styles to v-btn to match MD2 specification.
{
attrs: object
}The default Vue slot.
연결된 모델을 업데이트 (The updated bound model)
boolean1 !default;8px !default;#333333 !default;$border-radius-root !default;0 !default;0 !default;0 8px !default;hsla(0, 0%, 100%, .87) !default;0 !default;map-deep-get($headings, 'body-2', 'size') !default;map-deep-get($headings, 'body-2', 'weight') !default;map-deep-get($headings, 'body-2', 'letter-spacing') !default;map-deep-get($headings, 'body-2', 'line-height') !default;14px 16px !default;map-deep-get($headings, 'body-2', 'text-transform') !default;0 !default;6 !default;$snackbar-content-font-size !default;0 !default;68px !default;0 !default;map-get($rounded, 'xl') $snackbar-border-radius !default;0 !default;.8 !default;8px !default;0 !default;initial !default;8px !default;$snackbar-content-max-width !default;48px !default;$snackbar-content-min-width !default;0 !default;1000 !default;간단한 예재부터 복잡한 예제까지 아래를 참고해서 앱 개발을 시작해 보세요.
The multi-line property extends the height of the v-snackbar to give you a little more room for content.
The timeout property lets you customize the delay before the v-snackbar is hidden.
The vertical property allows you to stack the content of your v-snackbar.
Apply different styles to the snackbar using props such as text, shaped, outlined, and more.