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
  }
}