• full height
• full width
• animation
• resize
• position

• header
• default(use without name)
• footer

• fullHeight type Boolean; default: false; set 100% height to drawer container
• fullWidth type Boolean; default: false; set 100% height to drawer container
• animation type Boolean; default: false; start stop animation
• isVisible type Boolean; default: true; control show/hide of drower. This is the only one required - property. It must be passed always.
• opacity type Boolean; default: true; set opacity to animation
• resizable type Boolean; default: false; enable resizing to drawer
• closeOnEscape type Boolean; default: true; close drawer on escape
• closeOnClick type Boolean; default: true; close drawer on click outside of it
• stickyToTop type Boolean; default: false; show drower of the top of the page
• stickyToBottom type Boolean; default: false; show drower of the bottom of the page
• animationDirection type String; default: 'rtl' animation direction btt ->bottom to top, rtl-> rigth to left
• animationSpeed type String; default: 0.4s; set speed of animation in seconds
• padding type String; default: 0 0 0 0 set padding to drawer
• margin type String; default: 0 0 0 0 set margin to drawer
• position type String; default: 'absolute' set position to drawer
• minWidth type Number; default:100 set min width to drawer in px

How to install

npm install --save @researchmetrics/ui-drawer

Basic Usage

<template>
    <div class="container">
        <drawer width="28.57rem" :config="drawerConfig">
        <div slot="header">
          
        </div>
        <div>
         
        </div>
        <div  slot="footer">

        </div>
      </drawer>
    </div>
</template>

<script>
    //import component
    import drawer from "@researchmetrics/ui-drawer";
    //import css
    import "@researchmetrics/ui-drawer/dist/ui-drawer.css";

    export default {
        components: {
            drawer
        },
        data() {
            return {
                drawerConfig: {
                    fullHeight: false,              //set 100% height to drawer container
                    fullWidth: false,               //set 100% height to drawer container
                    animation: true,                //start stop animation
                    isVisible: false,               //control show/hide of drower. This is the only one required property. It must be passed always.
                    opacity: false,                 //set opacity to animation
                    resizable: true,                //enable resizing to drawer
                    closeOnEscape: true,            //close drawer on escape
                    closeOnClick: true,             //close drawer on click outside of it 
                    stickyToTop: false,             //show drower of the top of the page
                    stickyToBottom: true,           //show drower of the bottom of the page
                    animationDirection: 'btt',      //animation direction btt ->bottom to top, rtl-> rigth to left
                    animationSpeed: '0.4s',         //set speed of animation in seconds
                    padding: '0 0 0 0',             //set padding to drawer
                    margin: '0 0 0 0',              //set margin to drawer
                    position: 'fixed',              //set position to drawer
                    minWidth: 400                   //set min width to drawer in px
                },
             }
        }
    };
</script>

1. Drawer config must always contain isVisible property.