CraydelDrawer
Installation
Get the latest version by NPM:
$ npm i @craydel/craydel-drawerRegister 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
}
}