1.3.6 • Published 11 months ago

@nya4om/bottom-sheet v1.3.6

Weekly downloads
-
License
MIT
Repository
-
Last release
11 months ago

Example

Bottom Sheet on Vue

Size Downloads Version

A nice clean and touch-friendly bottom sheet component based on Vue.js

Installation

NPM

npm install --save @nya4om/bottom-sheet

Yarn

yarn add @nya4om/bottom-sheet

Usage

<template>
  <bottom-sheet ref="myBottomSheet">
    <h1>Lorem Ipsum</h1>
    <h2>What is Lorem Ipsum?</h2>
    <p>
      <strong>Lorem Ipsum</strong> is simply dummy text
    </p>
  </bottom-sheet>
</template>
<script>
import  BottomSheet from "@nya4om/bottom-sheet";
export default {
  components: {
    BottomSheet
  },
  methods: {
    open() {
      this.$refs.myBottomSheet.open();
    },
    close() {
      this.$refs.myBottomSheet.close();
    }
  }
}
</script>

Or add to main.js for use throughout the project

import BottomSheet from "@nya4om/bottom-sheet";
import Vue from "vue";

Vue.use(BottomSheet);

Props

PropTypeDescriptionExample
max-widthStringSet max-width of component cardmax-width="100%"
max-heightNumberSet max-height of component card on pxmax-height="600"
roundedStringRound the top two corners of the sheet:rounded="12px 12px 0 0"
swipe-ableBooleanEnable or disable swipe to close:swipe-able="false"
overlay-colorStringSet overlay color:overlay-color="rgba(0, 0, 0, 0.40)"
background-scrollableBooleanEnable scroll:background-scrollable="true"
background-clickableBooleanEnable background click, doesn't work if click-to-close=true:background-clickable="true"

Events

EventDescriptionExample
openedFire when card component is opened@opened=""
closedFire when card component is closed@closed=""
1.3.6

11 months ago

1.3.4

11 months ago

1.3.3

11 months ago

1.2.3

11 months ago

1.2.2

11 months ago

1.2.1

11 months ago

1.2.0

11 months ago

0.2.1

11 months ago

0.2.0

11 months ago

0.1.0

11 months ago