wepy-com-paper-drawer
Advanced tools
Comparing version
{ | ||
"name": "wepy-com-paper-drawer", | ||
"version": "1.0.0", | ||
"version": "1.0.1", | ||
"description": "Wepy paper UI drawer component", | ||
@@ -5,0 +5,0 @@ "main": "drawer.wpy", |
@@ -1,1 +0,87 @@ | ||
# STUFF | ||
# wepy-com-paper-drawer | ||
A useful drawer/sheet component for use in [wepyjs](https://github.com/wepyjs/wepy), a Vue-like framework for building WeChat mini programs. | ||
## What it looks like | ||
‘left’ mode | ||
 | ||
‘right’ mode | ||
 | ||
‘bottom’ mode | ||
 | ||
‘full’ mode | ||
 | ||
## Usage | ||
### installation | ||
``` | ||
npm install wepy-com-paper-drawer --save | ||
``` | ||
### Importing the component | ||
For example, on a page `index.wpy` | ||
```javascript | ||
// index.wpy | ||
<template> | ||
<drawer :mode.sync="left"> | ||
// Slot, put your WXML content of the drawer here | ||
</drawer> | ||
</template> | ||
<script> | ||
import wepy from 'wepy' | ||
import Drawer from 'wepy-com-paper-drawer' | ||
export default class Index extends wepy.page { | ||
components = { | ||
drawer: Drawer | ||
} | ||
data = { | ||
left: "left" | ||
} | ||
} | ||
</script> | ||
``` | ||
### Showing the drawer | ||
Inside of a `@tap` handler (or anywhere in a wepy component or page), you could invoke the drawer to display, i.e. show the drawer by calling the /toggle/ function | ||
```javascript | ||
// index.wpy | ||
this.$invoke('drawer', 'toggle', null) | ||
``` | ||
### Props | ||
There are four props exposed on `wepy-com-paper-drawer` | ||
#### open | ||
Default set to `true` | ||
```javascript | ||
<drawer :open.sync="customOpen"> | ||
// slot | ||
</drawer> | ||
``` | ||
#### mode | ||
The direction & style of the drawer. | ||
Default set to `left`, available options: `left`, `right`, `bottom`, `full` | ||
```javascript | ||
<drawer :mode.sync="bottom"> | ||
// slot | ||
</drawer> | ||
``` | ||
#### closeCLass | ||
Set a custom class to the ‘x’ close icon | ||
```javascript | ||
<drawer :closeClass.sync="customCloseClass"> | ||
// slot | ||
</drawer> | ||
``` | ||
#### displayClose | ||
Remove the ‘x’ close icon if needed | ||
```javascript | ||
<drawer :displayClose.sync="hasDisplayClose"> | ||
// slot | ||
</drawer> | ||
``` |
9815
29.26%88
8700%