Skip to content

Commit 81d0dd8

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Updating overflow preview
1 parent a7da979 commit 81d0dd8

File tree

5 files changed

+51
-25
lines changed

5 files changed

+51
-25
lines changed

‎docs/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@
33
function gtag() { dataLayer.push(arguments); }
44
gtag('js', new Date());
55

6-
gtag('config', 'UA-XXXXXXXXX-X');</script><meta name="base" content="https://webdevnerdstuff.github.io/vuetify-resize-drawer/"><meta name="charset" content="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="keywords" content="vuetify-resize-drawer, vuetifyResizeDrawer, v-resize-drawer, vResizeDrawer, vuetify, navigation drawer, v-navigation-drawer, vNavigationDrawer, api, drawer, resize, resizable, vue, vue2, component, javascript, webdevnerdstuff, wdns"><meta name="description" content="The vuetify-resize-drawer component extends the functionality of the v-navigation-drawer so that it is resizable by the user."><meta name="author" content="WebDevNerdStuff & Bunnies... lots and lots of bunnies! <webdevnerdstuff@gmail.com> (https://webdevnerdstuff.com)"><meta name="robots" content="index, follow"><meta name="googlebot" content="index, follow"><meta name="rating" content="General"><meta name="theme-color" content="#21252a"><meta name="og:type" content="website"><meta name="og:title" content="Vuetify Resize Drawer"><meta name="og:image" content="https://webdevnerdstuff.github.io/vuetify-resize-drawer/images/vuetify-resize-drawer-social.jpg"><meta name="og:image:alt" content="The vuetify-resize-drawer component extends the functionality of the v-navigation-drawer so that it is resizable by the user."><meta name="og:image:width" content="1200"><meta name="og:image:height" content="630"><meta name="og:description" content="The vuetify-resize-drawer component extends the functionality of the v-navigation-drawer so that it is resizable by the user."><meta name="og:site_name" content="Vuetify Resize Drawer"><meta name="og:locale" content="en_US"></head><body><noscript><strong>We're sorry but Vuetify Resize Drawer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script><script defer="defer" src="vuetify-resize-drawer.js?12cceac7c231424b7f32"></script></body></html>
6+
gtag('config', 'UA-XXXXXXXXX-X');</script><meta name="base" content="https://webdevnerdstuff.github.io/vuetify-resize-drawer/"><meta name="charset" content="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="keywords" content="vuetify-resize-drawer, vuetifyResizeDrawer, v-resize-drawer, vResizeDrawer, vuetify, navigation drawer, v-navigation-drawer, vNavigationDrawer, api, drawer, resize, resizable, vue, vue2, component, javascript, webdevnerdstuff, wdns"><meta name="description" content="The vuetify-resize-drawer component extends the functionality of the v-navigation-drawer so that it is resizable by the user."><meta name="author" content="WebDevNerdStuff & Bunnies... lots and lots of bunnies! <webdevnerdstuff@gmail.com> (https://webdevnerdstuff.com)"><meta name="robots" content="index, follow"><meta name="googlebot" content="index, follow"><meta name="rating" content="General"><meta name="theme-color" content="#21252a"><meta name="og:type" content="website"><meta name="og:title" content="Vuetify Resize Drawer"><meta name="og:image" content="https://webdevnerdstuff.github.io/vuetify-resize-drawer/images/vuetify-resize-drawer-social.jpg"><meta name="og:image:alt" content="The vuetify-resize-drawer component extends the functionality of the v-navigation-drawer so that it is resizable by the user."><meta name="og:image:width" content="1200"><meta name="og:image:height" content="630"><meta name="og:description" content="The vuetify-resize-drawer component extends the functionality of the v-navigation-drawer so that it is resizable by the user."><meta name="og:site_name" content="Vuetify Resize Drawer"><meta name="og:locale" content="en_US"></head><body><noscript><strong>We're sorry but Vuetify Resize Drawer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script><script defer="defer" src="vuetify-resize-drawer.js?ca96866f318af43aaa93"></script></body></html>

‎docs/vuetify-resize-drawer.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.vue‎

Lines changed: 30 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -67,10 +67,10 @@
6767
<v-resize-drawer
6868
app
6969
v-model="drawer"
70-
name="ResizeDrawer"
7170
clipped
7271
fixed
7372
:stateless="drawerOptions.stateless"
73+
:overflow="drawerOptions.overflow"
7474
:touchless="drawerOptions.touchless"
7575
:mini-variant="drawerOptions.miniVariant"
7676
:mini-variant-width="drawerOptions.miniVariantWidth"
@@ -109,6 +109,17 @@
109109
</header>
110110

111111
<Menu :drawerOptions="drawerOptions" />
112+
113+
<v-card
114+
class="overflow-content d-flex justify-center align-center"
115+
color="primary"
116+
dark
117+
elevation="10"
118+
min-width="300"
119+
width="300"
120+
>
121+
<v-card-title>Overflow Content</v-card-title>
122+
</v-card>
112123
</v-resize-drawer>
113124

114125
<!-- ====================================================== Main Container -->
@@ -164,10 +175,11 @@ export default {
164175
dark: false,
165176
drawer: true,
166177
drawerOptions: {
167-
// color: undefined,
168-
// dark: false,
169-
// handlePosition: 'center',
170-
// light: false,
178+
color: undefined,
179+
dark: false,
180+
handlePosition: 'center',
181+
light: false,
182+
overflow: false,
171183
resizable: true,
172184
right: false,
173185
stateless: false,
@@ -361,6 +373,19 @@ html {
361373
}
362374
}
363375
376+
.overflow-content {
377+
right: -315px;
378+
position: fixed;
379+
top: 5px;
380+
}
381+
382+
.v-navigation-drawer--right {
383+
.overflow-content {
384+
left: -315px;
385+
right: initial;
386+
}
387+
}
388+
364389
.name-item:not(:hover):not(:focus) span {
365390
opacity: 0;
366391
}

‎src/components/VResizeDrawer.vue‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -104,14 +104,10 @@ export default {
104104
type: Object,
105105
required: true,
106106
},
107-
name: {
108-
type: String,
109-
required: true,
110-
},
111107
width: {
112108
type: String,
113109
required: false,
114-
default: '75%',
110+
default: '256px',
115111
},
116112
// Updated //
117113
handlePosition: {
@@ -501,6 +497,8 @@ export default {
501497
<style lang="scss" scoped>
502498
.v-resize-drawer {
503499
&.v-navigation-drawer--overflow {
500+
overflow: visible;
501+
504502
::v-deep .v-navigation-drawer__content {
505503
overflow: visible;
506504
}

‎src/components/documentation/Props.vue‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,9 @@
1414
target="_blank"
1515
>Navigation Drawer</a
1616
>
17-
behind the scenes. Most props that work for the Vuetify Navigation
18-
Drawer are supported. For a list of those props, you can find them
17+
behind the scenes. Most props that work for the
18+
<code>v-navigation-drawer</code> are supported. For a list of those
19+
props, you can find them
1920
<a
2021
href="https://vuetifyjs.com/en/api/v-navigation-drawer/#props"
2122
target="_blank"
@@ -24,10 +25,12 @@
2425
</v-col>
2526
</v-row>
2627

27-
<v-row>
28-
<v-col>
29-
Additional props that are supported (or have different defaults) by
30-
Vuetify Resize Drawer:
28+
<v-row id="additional-props">
29+
<v-col cols="12">
30+
<h3 :class="classes.h3">
31+
<a href="#additional-props" :class="classes.headerA">#</a>
32+
Additional props
33+
</h3>
3134
</v-col>
3235
</v-row>
3336

@@ -118,12 +121,12 @@
118121
</v-col>
119122

120123
<v-col cols="12" sm="12" md="6">
121-
<v-text-field
122-
label="paddingTop"
123-
type="number"
124-
v-model="options.paddingTop"
125-
>
126-
</v-text-field>
124+
<v-switch
125+
:label="`overflow: ${options.overflow}`"
126+
dense
127+
inset
128+
v-model="options.overflow"
129+
></v-switch>
127130
</v-col>
128131

129132
<v-col cols="12" sm="12" md="6">

0 commit comments

Comments
 (0)