https://github.com/johncalvinroberts/wepy-com-paper-drawer

https://github.com/johncalvinroberts/wepy-com-paper-drawer

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/johncalvinroberts/wepy-com-paper-drawer
• Owner: johncalvinroberts
• License: mit
• Created: 2018-05-20T18:49:01.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-05-20T20:35:15.000Z (over 6 years ago)
• Last Synced: 2024-10-08T17:58:56.790Z (3 months ago)
• Language: JavaScript
• Size: 5.86 KB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-wepy - wepy-com-paper-drawer: 基于wepy的简洁帅气drawer组件

README

        
# 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


![left-drawer](https://user-images.githubusercontent.com/11850362/40283131-1e496a18-5cac-11e8-8b19-d2fe913ad26c.gif)


‘right’ mode


![right-drawer](https://user-images.githubusercontent.com/11850362/40283134-1ebefc60-5cac-11e8-9c0e-54460a9d4f05.gif)


‘bottom’ mode


![bottom-drawer](https://user-images.githubusercontent.com/11850362/40283128-1d933a9a-5cac-11e8-88bc-220ac482e38a.gif)


‘full’ mode


![full-drawer](https://user-images.githubusercontent.com/11850362/40283130-1e0afb7a-5cac-11e8-93b7-e4617abaa5d4.gif)


## Usage

### installation

```

npm install wepy-com-paper-drawer --save

```

### Importing the component

For example, on a page `index.wpy`

```javascript

// index.wpy

    

    // Slot, put your WXML content of the drawer here

    

    import wepy from 'wepy'

    import Drawer from 'wepy-com-paper-drawer'

    export default class Index extends wepy.page {

        components = {

            drawer: Drawer

        }

        data = {

            left: "left"

        }

    }

```

### 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

    

		// slot

    

```

#### mode

The direction & style of the drawer.

Default set to `left`, available options: `left`, `right`, `bottom`, `full`

```javascript

    

		// slot

    

```

#### closeCLass

Set a custom class to the ‘x’ close icon 

```javascript

    

		// slot

    

```

#### displayClose

Remove the ‘x’ close icon if needed

```javascript

    

		// slot

    

```