search

vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.74k stars 6.95k forks source link

[Feature Request] Component - Sheets: side #20122

Open darkbasic opened 3 months ago

darkbasic commented 3 months ago

Problem to solve

Currently Vuetify is lacking Side sheet from Material Design Ui component. I would like to be able to use Side sheet component in my own projects. It would save me time if this is available in the UI components so I could quickly build my projects.

There was a similar issue which has been closed in favor of v-navigation-drawer, but I don't think that's a viable alternative because of the lack of the activator slot. It would make for a bad pattern to implement most side sheets use cases.

Proposed solution

Add Sheets:side to Vuetify UI components (basically a v-navigation-drawer with the activator slot). Alternatively just add the activator slot to v-navigation-drawer. v-bottom-sheet covers a similar use case and has the activator slot.

darkbasic commented 3 months ago

Another reason why v-navigation-drawer isn't up to the task: https://github.com/vuetifyjs/vuetify/issues/20128

darkbasic commented 2 months ago

Another issue with v-navigation-drawer is that sometimes it positions itself relative to its parent rather than the whole page: image

This doesn't happen with v-bottom-sheet.

mirocklez commented 2 months ago

It will add a lot of value - for filter sections, quick previews and etc. 👍

darkbasic commented 2 months ago

This is a quick and dirty CSS to transform v-bottom-sheet into v-side-sheet until it gets implemented in vuetify:

.v-bottom-sheet > .v-bottom-sheet__content.v-overlay__content {
  left: unset !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  max-height: unset !important;
  width: 30% !important;
  max-width: unset !important;
}

.bottom-sheet-transition-enter-from {
  transform: translateX(100%) !important;
}
.bottom-sheet-transition-leave-to {
  transform: translateX(100%) !important;
}

I've made a ready to use SideSheet component based on v-bottom-sheet with additional support for initialData here: https://stackoverflow.com/questions/78730081/vue-3-generic-components-how-to-use-a-scoped-slot-with-a-generic-data-type-infe

darkbasic commented 2 months ago

Please be aware of the following v-bottom-sheet issues if you decide to use it as a base for the side sheet: https://github.com/vuetifyjs/vuetify/issues/20136 https://github.com/vuetifyjs/vuetify/issues/20137