CODEWITHSUNDEEP
vuetify.jsv-navigation-drawer
bruce
bruce

Reputation: 69

Vuetify 3 bottom v-navigation-drawer with tabs and scrollable content not closing on swipe down

I am using Vuetify 3 to create a bottom sheet for mobile using v-navigation-drawer with location="bottom" prop.

Everything works fine up to this point with swipe-down to close the bottom sheet. When I add touchstart, touchmove, touchend event listeners, all get triggered as expected.

But when I try to add a Tab component as per the documentation with some overflow content, the bottom sheet overflow scrolls on swipe up and down and tab navigation works on swipe left and right. I believe this is because of v-window is inside the drawer. Here when I add the above event listeners, touchstart does not get triggered inside the bottom sheet.

I want to implement the swipe-down to close behaviour (following the finger position) to the bottom sheet tab navigation that has overflow content. The bottom sheet will open on toggle, scrolls up and down on swipe up and down, switches tabs on swipe left and right and closes on swipe down further.

But without touchstart event it is impossible for me to go forward with this feature. (I'm planning to get the swipe direction and build the logic when to pull down the bottom sheet)

What am I missing here? Is there any other way to implement this?

CodePen link to what I tried. (Toggle device emulation)

Upvotes: 0

Views: 1249

Answers (1)

Alexander Gelzer
Alexander Gelzer

Reputation: 31

add touchless to draver

  <v-navigation-drawer
    v-model="app.drawer"
    touchless
    app
  >

Upvotes: 0

Related Questions