@craydel-v3/craydel-drawer

CraydelDrawer

Installation

Get the latest version by NPM:

$ npm i @craydel-v3/craydel-drawer

Component Import

Import the module chosen directly in your component

<script>
  import CraydelDrawer from "@craydel-v3/craydel-drawer/src/CraydelDrawer.vue";

  export default {
  components: {CraydelDrawer}
}
</script>

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.
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
close	Emitted when the drawer is closed.
back	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"
        @close="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
  }
}