The bottom sheet is a modified v-dialog that slides from the bottom of the screen, similar to a v-bottom-navigation. Whereas a bottom navigation component is for buttons and specific application level actions, a bottom sheet can contain anything.

Here we display an example list of actions that could be present in an application.


제공되는 Props, Slots, Events 와 함수들을 이용하여 원하는 컴포넌트를 직접 구현해 보세요.

간단한 예재부터 복잡한 예제까지 아래를 참고해서 앱 개발을 시작해 보세요.

Persistent bottom sheets can't be closed by clicking outside them.

Bottom sheets can be controlled using v-model. You can use it to close them or if you can't use activator slot.

Bottom sheets can be inset, reducing their maximum width on desktop to 70%. This can be further reduced manually using the width prop.

Using a inset bottom sheet, you can make practical components such as this simple music player.

By combining a functional list into a bottom sheet, you can create a simple 'open in' component.

더 읽을 준비 되었나요? 그렇다면 아래 설명서를 더 읽어보세요!

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!