https://github.com/dreambo8563/vue-simple-drawer
A tiny Drawer component with bounced animation for Vue 🚪🎏🗄🔛
https://github.com/dreambo8563/vue-simple-drawer
component drawer scss vue
Last synced: 8 months ago
JSON representation
A tiny Drawer component with bounced animation for Vue 🚪🎏🗄🔛
- Host: GitHub
- URL: https://github.com/dreambo8563/vue-simple-drawer
- Owner: dreambo8563
- License: mit
- Created: 2019-04-16T13:29:46.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-10-18T00:50:32.000Z (about 1 year ago)
- Last Synced: 2025-03-28T16:09:17.752Z (8 months ago)
- Topics: component, drawer, scss, vue
- Language: HTML
- Homepage: https://dreambo8563.github.io/vue-simple-drawer/
- Size: 1.3 MB
- Stars: 59
- Watchers: 3
- Forks: 23
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-vue - vue-simple-drawer - A tiny Drawer component with bounced animation for Vue ` 📝 2 years ago ` (UI Layout [🔝](#readme))
- fucking-awesome-vue - vue-simple-drawer - A tiny drawer panel with bounced animation, nest supported and theme customized. directions: left/right/up/down (Components & Libraries / UI Layout)
- awesome-vue - vue-simple-drawer - A tiny drawer panel with bounced animation, nest supported and theme customized. directions: left/right/up/down (UI Layout / Tour)
- awesome-vue - vue-simple-drawer - A tiny drawer panel with bounced animation, nest supported and theme customized. directions: left/right/up/down (Components & Libraries / UI Layout)
- awesome-vue - vue-simple-drawer - A tiny drawer panel with bounced animation, nest supported and theme customized. directions: left/right/up/down (Components & Libraries / UI Layout)
README
[](https://app.codacy.com/app/dreambo8563/vue-simple-drawer?utm_source=github.com&utm_medium=referral&utm_content=dreambo8563/vue-simple-drawer&utm_campaign=Badge_Grade_Settings)
[](https://codecov.io/gh/dreambo8563/vue-simple-drawer)
[](#contributors)
[](https://travis-ci.org/dreambo8563/vue-simple-drawer) [](https://greenkeeper.io/)
[](https://snyk.io/test/github/dreambo8563/vue-simple-drawer?targetFile=package.json)
[](https://opensource.org/licenses/MIT)
[](https://app.fossa.io/projects/git%2Bgithub.com%2Fdreambo8563%2Fvue-simple-drawer?ref=badge_shield)
# vue-simple-drawer
## TODO
- [x] remove shadow for default style
- [x] add cover layer option
- [x] rename the scss vars
- [x] nest drawer?
## Install
```
npm install vue-simple-drawer --save
```
### Quick Start
```js
toggle
content here
import Drawer from "vue-simple-drawer"
export default {
name: "app",
data() {
return {
open: true
}
},
components: {
Drawer
},
methods: {
toggle() {
this.open = !this.open
}
}
}
```
### Prop Types
| Property | Type | Required? | Description |
| :----------- | :------ | :-------- | :------------------------------------------------------------------------------------------------------- |
| align | String | | One of "left", "up", "right", "down", default is 'right'. the location of the drawer. |
| closeable | Boolean | | show the x - close button, default true |
| mask | Boolean | | show the mask layer - close button, default true |
| maskClosable | Boolean | | emit 'close' event when click on mask layer, default: false |
| zIndex | Number | | z-index value for the drawer, the nest drawer's z-index will be increased automatically, default is 1000 |
### Events
| Event | Params | Required? | Description |
| :---- | :----- | :-------- | :--------------------------------------------------- |
| close | None | | will be triggered when user click the x close button | |
### Slot
| Slot Name | Description |
| :-------- | ---------------------------------------------------------------------- |
| default | the content display in the drawer which can show/hide the draw by v-if |
### Advance Guide
#### Nest Drawer
```js
Open/Close
content here
content here
content here
content here
content here
content here
content here
content here
content here
content here
...
data() {
return {
open: false,
innerOpen: false,
align: "left"
};
},
```
#### Customized Theme
- In your customized scss file (demo.scss)
```scss
$--simple-drawer-close-width: 50px;
@import "~vue-simple-drawer/src/index";
```
- import the scss to override the default theme in main.js (entry file) **after** you import the Draw component
```js
import "./demo.scss";
```
> variables
**close button style**
- \$--simple-drawer-softorange
- \$--simple-drawer-tomatored
- \$--simple-drawer-mediumblu
**close button size**
- \$--simple-drawer-close-width
**drawer background**
- \$--simple-drawer-bg-color
**drawer text color**
- \$--simple-drawer-fg-color
## License
[](https://app.fossa.io/projects/git%2Bgithub.com%2Fdreambo8563%2Fvue-simple-drawer?ref=badge_large)
## Contributors
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
