@a.izzheurov/vue-bottom-sheet-fm
v1.35.0
Published
![Example](https://anyprinter.ru/logo.jpg)
Downloads
7
Maintainers
Readme
Vue Bottom Sheet
A nice clean and touch-friendly bottom sheet component based on Vue.js and Hammer.js
- :clapper: Demo
- :open_book: Документация на русском
Installation
NPM
npm install --save @webzlodimir/vue-bottom-sheet
Yarn
yarn add @webzlodimir/vue-bottom-sheet
Usage
<template>
<vue-bottom-sheet ref="myBottomSheet">
<h1>Lorem Ipsum</h1>
<h2>What is Lorem Ipsum?</h2>
<p>
<strong>Lorem Ipsum</strong> is simply dummy text
</p>
</vue-bottom-sheet>
</template>
<script>
import VueBottomSheet from "@webzlodimir/vue-bottom-sheet";
export default {
components: {
VueBottomSheet
},
methods: {
open() {
this.$refs.myBottomSheet.open();
},
close() {
this.$refs.myBottomSheet.close();
}
}
}
</script>
Or add to main.js for use throughout the project
import VueBottomSheet from "@webzlodimir/vue-bottom-sheet";
import Vue from "vue";
Vue.use(VueBottomSheet);
Props
| Prop | Type | Description | Example |
| ------------- | ------------- | ------------- | ------------- |
| overlay | Boolean | Remove back overlay | :overlay="false"
|
| click-to-close | Boolean | Click outside card to close | :click-to-close="false"
|
| max-width | String | Set max-width of component card | max-width="640px"
|
| max-height | String | Set max-height of component card | max-height="90%"
|
| effect | String | Set effect for component card | effect="fx-fadein-scale"
|
| rounded | Boolean | Round the top two corners of the sheet | :rounded="false"
|
| is-full-screen | Boolean | Enable or disable full-screen mode | :is-full-screen="true"
|
| swipe-able | Boolean | Enable or disable swipe to close | :swipe-able="false"
|
| overlay-color | String | Set overlay color with opacity | :overlay-color="#0000004D"
|
| background-scrollable | Boolean | Enable scroll | :background-scrollable="true"
|
| background-clickable | Boolean | Enable background click, doesn't work if click-to-close=true
| :background-clickable="true"
|
Events
| Event | Description | Example | | ------------- | ------------- | ------------- | | opened | Fire when card component is opened | @opened="" | | closed | Fire when card component is closed | @closed="" |
List of effects
- fx-default
- fx-fadein-scale
- fx-slide-from-right
- fx-slide-from-left
You can see all the effects on the demo page