1.0.6 • Published 6 months ago
@craydel-v3/craydel-drawer v1.0.6
CraydelDrawer
Installation
Get the latest version by NPM:
$ npm i @craydel-v3/craydel-drawerComponent 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
}
}