Skip to content

Commit 2416e31

Browse files
dreambo8563dreambo8563
committed
feat(1.0.0): nest drawer and update docs
1 parent c8d6cb4 commit 2416e31

8 files changed

+87
-7
lines changed

Diff for: ‎README.md

+70-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
- [x] remove shadow for default style
88
- [x] add cover layer option
99
- [x] rename the scss vars
10-
- [ ] nest drawer?
10+
- [x] nest drawer?
1111

1212
## Install
1313

@@ -67,3 +67,72 @@ export default {
6767
| Slot Name | Description |
6868
| :-------- | ---------------------------------------------------------------------- |
6969
| default | the content display in the drawer which can show/hide the draw by v-if |
70+
71+
### Advance Guide
72+
73+
#### Nest Drawer
74+
75+
```js
76+
<button @click="toggle">Open/Close</button>
77+
<Drawer @close="toggle" :align="align" :closeable="true">
78+
<div v-if="open">
79+
<span @click="innerOpen=true">
80+
content here
81+
content here
82+
content here
83+
content here
84+
content here
85+
content here
86+
content here
87+
</span>
88+
<Drawer @close="innerOpen=false" :align="align" :closeable="true">
89+
<div v-if="innerOpen">
90+
content here
91+
content here
92+
content here
93+
</div>
94+
</Drawer>
95+
</div>
96+
</Drawer>
97+
98+
...
99+
100+
data() {
101+
return {
102+
open: false,
103+
innerOpen: false,
104+
align: "left"
105+
};
106+
},
107+
```
108+
109+
#### Customized Theme
110+
111+
- In your customized scss file (demo.scss)
112+
113+
```scss
114+
$--simple-drawer-close-width: 50px;
115+
@import "~vue-simple-drawer/src/index";
116+
```
117+
118+
- import the scss to override the default theme in main.js (entry file) before you import the Draw component
119+
120+
```js
121+
import "./demo.scss"
122+
```
123+
124+
> variables
125+
126+
**close button style**
127+
128+
- \$--simple-drawer-softorange
129+
- \$--simple-drawer-tomatored
130+
- \$--simple-drawer-mediumblu
131+
132+
**close button size**
133+
134+
- \$--simple-drawer-close-width
135+
136+
**drawer background**
137+
138+
- \$--simple-drawer-bg-color

Diff for: ‎docs/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/vue-simple-drawer/favicon.ico><title>vue-simple-drawer</title><link href=/vue-simple-drawer/js/app.bb16141a.js rel=preload as=script><link href=/vue-simple-drawer/js/chunk-vendors.c6e5b2fc.js rel=preload as=script></head><body><noscript><strong>We're sorry but vue-simple-drawer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vue-simple-drawer/js/chunk-vendors.c6e5b2fc.js></script><script src=/vue-simple-drawer/js/app.bb16141a.js></script></body></html>
1+
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/vue-simple-drawer/favicon.ico><title>vue-simple-drawer</title><link href=/vue-simple-drawer/js/app.6b01e456.js rel=preload as=script><link href=/vue-simple-drawer/js/chunk-vendors.c6e5b2fc.js rel=preload as=script></head><body><noscript><strong>We're sorry but vue-simple-drawer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vue-simple-drawer/js/chunk-vendors.c6e5b2fc.js></script><script src=/vue-simple-drawer/js/app.6b01e456.js></script></body></html>

Diff for: ‎docs/js/app.6b01e456.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎docs/js/app.6b01e456.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎docs/js/app.bb16141a.js

-2
This file was deleted.

Diff for: ‎docs/js/app.bb16141a.js.map

-1
This file was deleted.

Diff for: ‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-simple-drawer",
3-
"version": "0.1.9",
3+
"version": "1.0.0",
44
"author": "dreambo8563",
55
"main": "dist/vue-simple-drawer.umd.min.js",
66
"private": false,

Diff for: ‎src/App.vue

+12-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,17 @@
2424

2525
<button @click="toggle">Open/Close</button>
2626
<Drawer @close="toggle" :align="align" :closeable="true">
27-
<div v-if="open">content here</div>
27+
<div v-if="open">
28+
<span @click="innerOpen = true">
29+
content here content here content here content here content here
30+
content here content here
31+
</span>
32+
<Drawer @close="innerOpen = false" :align="align" :closeable="true">
33+
<div v-if="innerOpen">
34+
content here content here content here
35+
</div>
36+
</Drawer>
37+
</div>
2838
</Drawer>
2939
</div>
3040
</template>
@@ -37,6 +47,7 @@ export default {
3747
data() {
3848
return {
3949
open: false,
50+
innerOpen: false,
4051
align: "left"
4152
};
4253
},

0 commit comments

Comments
 (0)