Notwithstanding Precautions, Misadventure

    nativescript-vue-global-drawer

    1.2.0 • Public • Published

    NPM

    npm version

    NativeScript-Vue Global Drawer

    A Vue.js plugin that bootstrap the integration of RadSideDrawer in your NativeScript-Vue project.

    Declare your drawer once and access it everywhere through your components.

    If you need one drawer over your App pages this for you.

    Install

    npm install nativescript-ui-sidedrawer --save
    npm install nativescript-vue-global-drawer --save
    

    Usage

    In main.js

    import Vue from 'nativescript-vue'
    import NSVueGlobalDrawer from 'nativescript-vue-global-drawer'
    
    Vue.use(NSVueGlobalDrawer)
    
    new Vue({
      render: h => h('frame', [h(App)])
    }).$start()
    

    In App.vue, declare the global drawer.

    <template>
        <Page actionBarHidden="true">
            <GlobalDrawer>
                <template slot="content">
                    <Label class="drawer-header" text="Drawer"/>
                    <Label class="drawer-item" text="Item 1"/>
                    <Label class="drawer-item" text="Item 2"/>
                    <Label class="drawer-item" text="Item 3"/>
                </template>
                <template slot="frame">
                    <!--default page-->
                    <Page1/>
                </template>
            </GlobalDrawer>
        </Page>
    </template>
    

    API

    Slots

    Name Description
    content The drawer content.
    frame The default drawer page that will appear in the beginning.

    Drawer methods

    Anywhere in your components you can call these methods to control the drawer behavior.

    .$drawer.open() : void

    Open drawer.

    <Button @tap="$drawer.open()">Show</Button>
    

    .$drawer.close() : void

    Close drawer.

    <Button @tap="$drawer.close()">Close</Button>
    

    .$drawer.toggle() : void

    Toggle drawer.

    <Button @tap="$drawer.toggle()">Toggle</Button>
    

    .$drawer.enable() : void

    Enable enable.

    <Button @tap="$drawer.enable()">Enable</Button>
    

    .$drawer.disable() : void

    Disable drawer. This will disable gestures too.

    <Button @tap="$drawer.disable()">Disable</Button>
    

    .$drawer.setGestures(boolean) : void

    Enable/Disable gestures.

    <Button @tap="$drawer.setGestures(true)">Enable Gestures</Button>
    

    .$drawer.getDrawer()

    Get drawer instance.

    .$drawer.getFrame()

    Get drawer frame instance.

    .$drawer.getStatus() : boolean

    Get drawer status (enabled/disabled).

    Navigation

    To navigate inside the drawer, you have to get the drawer frame instance to use in manual navigation.

    Example:

    this.$navigateTo(Page1, {
        transition: {},
        transitionIOS: {},
        transitionAndroid: {},
        
        props: {
          foo: 'bar',
        },
        frame: this.$drawer.getFrame()
    })
    

    Events

    Event Name Description
    drawerOpened the drawer has been opened.
    drawerOpening the drawer is about to open.
    drawerClosed the drawer has been closed.
    drawerClosing the drawer is about to close.
    drawerPan the drawer is being opened by its edge gesture.

    Contributing

    Thank you for considering contributing.

    License

    MIT

    Install

    npm i nativescript-vue-global-drawer

    DownloadsWeekly Downloads

    10

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    9.69 kB

    Total Files

    7

    Last publish

    Collaborators

    • moeddami
    • npm