Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

A NativeScript-Vue component for creating multiple side drawers (4 sides supported)

License

NotificationsYou must be signed in to change notification settings

nativescript-vue/nativescript-vue-multi-drawer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

A plugin which provides a drawer component that supports multiple drawers.

All drawers are optional, and can be configured individually.

Features:

  • drawers on left, right, top and bottom
  • swipe to open
  • swipe to close
  • tap outside to close
  • progressively dim main content as the drawer is opened

Quick Start

$ npm i --save nativescript-vue-multi-drawer
// main.jsimport Vue from 'nativescript-vue'...+ import MultiDrawer from 'nativescript-vue-multi-drawer'+ Vue.use(MultiDrawer)

Optionally set default options by passingoptions when installing the plugin:

Vue.use(MultiDrawer,{// override any option here// for example enable debug modedebug:true})

For the available options checkthe source of defaultOptions

<MultiDrawer>  <StackLayoutslot="left">    <Labeltext="Im in the left drawer" />    </StackLayout>  <StackLayoutslot="right">    <Labeltext="Im in the right drawer" />    </StackLayout>  <StackLayoutslot="top">    <Labeltext="Im in the top drawer" />    </StackLayout>  <StackLayoutslot="bottom">    <Labeltext="Im in the bottom drawer" />    </StackLayout>    <Frame /><!-- main content goes into the default slot--></MultiDrawer>

The component will only enable drawers that have contents in them, so if you only need a left and a right side drawer, you can just remove the top and bottom slots and it will work as expected.

Opening a drawer from code

Assign a ref to the Drawer component

<MultiDrawerref="drawer" />

And usethis.$refs.drawer.open(side) whereside is a string:left,right,top orbottom.

Using v-model to toggle the drawer

The drawer can be opened through v-model. This is useful as it allows controlling the drawer state with Vue's reactivity system. For example, the value of v-model could easily come from a vuex store.

<MultiDrawerv-model="drawerState" />
exportdefault{data(){return{drawerState:false// closed}},methods:{doStuff(){// do stuffthis.drawerState='left'// this will open the left drawer}}}

About

A NativeScript-Vue component for creating multiple side drawers (4 sides supported)

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project

  •  

Packages

No packages published

Contributors4

  •  
  •  
  •  
  •  
[8]ページ先頭
©2009-2025 Movatter.jp