README_RU.MD

Vue Bottom Sheet

Компонент выезжающей снизу панели material-like, так же поддерживает жест смахивания вниз

• 🎬 ДЕМО
• 📖 Documentation in english

Установка

NPM

npm install --save @webzlodimir/vue-bottom-sheet

Yarn

yarn add @webzlodimir/vue-bottom-sheet

Использование

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

Либо для использования по всему проекту добавить в main.js

import VueBottomSheet from "@webzlodimir/vue-bottom-sheet";
import Vue from "vue";

Vue.use(VueBottomSheet);

Настройки

Свойство	Тип	Описание	Пример
overlay	Boolean	Убирает затемнение	:overlay="false"
click-to-close	Boolean	Клик вне карточки закрывает компонент	:click-to-close="false"
max-width	String	Устанавливает максимальную ширину карточки компонента	max-width="640px"
max-height	String	Устанавливает максимальную высоту карточки компонента	max-height="90%"
effect	String	Устанавливает эффект появление карточки компонента	effect="fx-fadein-scale"
rounded	Boolean	Включает скругление 2 верхних углов компонента	:rounded="false"

События

Событие	Описание	Пример
opened	Срабатывает при открытии компонента	@opened=""
closed	Срабатывает при закрытии компонента	@closed=""

Список эффектов

• fx-default
• fx-fadein-scale
• fx-slide-from-right
• fx-slide-from-left

Вы можете посмотреть все эффекты на демо странице