@craydel/craydel-drawer NPM

CraydelDrawer

Installation

Get the latest version by NPM:

$ npm i @craydel/craydel-drawer

Register Plugin

If you use the plugin API, the component will be registered as a global component just like when including it with the script tag, but you won't need to re-register it through the components property in your own components.

Create the plugin file e.g craydel-components.js file.

// craydel-components.js
import Vue from 'vue'
import CraydelDrawer from '@craydel/craydel-drawer/src/CraydelDrawer.vue'

const Components = {
  CraydelDrawer,
};

Object.keys(Components).forEach(name => {
  Vue.component(name, Components[name]);
});

export default Components;

Next reference the plugin file in your nuxt.config.js

// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
  '~/plugins/craydel-components.js'
]

Props

Name	Type	Default	Description
show-drawer	boolean	false	Controls whether the component is visible or hidden.
show-back	boolean	false	Control whether the back button is visible or hidden.
hide-overlay	boolean	false	Hides the display of the overlay.
hide-footer	boolean	false	Hides the display of the drawer's footer.
hide-header	boolean	false	Hides the display of the drawer's header.
permanent	boolean	false	The drawer remains visible regardless of screen size.
disable-clicking-outside	boolean	false	Disables clicking outside the drawer to close it.
no-shadow	boolean	false	Removes the shadow from the drawer.

Events

Name	Description
hideDrawer	Emitted when the drawer is closed.
goBack	Emitted when the back button is clicked.

Slots

Name	Description
header	A slot at the top of the drawer used to show the title of the drawer.
footer	A slot at the bottom of the drawer used to show footer content such as a submit button.

Usage

An example showing a drawer with a form.

<v-btn @click="show_drawer = true">Open drawer</v-btn>

<craydel-drawer
        :show-drawer="show_drawer"
        @hideDrawer="show_drawer = false">

  <template v-slot:header>
    User details
  </template>

  <div ref="drawer_top" class="drawer__content">
    <form>
      <div class="form-group">
        <label class="field-label" for="full_name">Full name</label>
        <craydel-text-field
                id="full_name"
        ></craydel-text-field>
      </div>
      <div class="form-group">
        <label class="field-label" for="age">Age</label>
        <craydel-text-field
                id="age"
        ></craydel-text-field>
      </div>
      <div class="form-group">
        <label class="field-label" for="email">Email</label>
        <craydel-text-field
                id="email"
                type="email"
        ></craydel-text-field>
      </div>
    </form>
  </div>

  <template v-slot:footer>
    <v-btn block class="btn btn-primary" @click="submitDetails">Submit</v-btn>
  </template>

</craydel-drawer>

data() {
  return {
    show_drawer: false
  }
}

vuetify drawer vue nuxt

@everything-registry/sub-chunk-202 @craydel/craydel-request-document

1.0.1

8 months ago

1.0.0

8 months ago