1.3.6 • Published 2 years ago

@nya4om/bottom-sheet v1.3.6

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years 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

2 years ago

1.3.4

2 years ago

1.3.3

2 years ago

1.2.3

2 years ago

1.2.2

2 years ago

1.2.1

2 years ago

1.2.0

2 years ago

0.2.1

2 years ago

0.2.0

2 years ago

0.1.0

2 years ago