VueBottomDialog

Simple mobile customizable dialog.

DEMO

Sandbox: https://codesandbox.io/s/2h39y

Installation

1. Install

yarn add vue-bottom-dialog
# or
npm i vue-bottom-dialog --save

2. Plug-in

import VueBottomDialog from 'vue-bottom-dialog'

Vue.use(VueBottomDialog)

3. Use in your components

Component can be controlled with a v-model.

<template>
  <vue-bottom-dialog v-model="dialog" />
</template>

<script>
  export default {
    data: () => {
        return {
          dialog: true,
        };
      },
  };
</script>

Properties

Name	Required	Type	Default	Description
height	false	Number	100	Dialog have fixed height
backgroundColor	false	String	#757575	Background color
overlayColor	false	String	rgba(255, 255, 255, 0.5)	Outside dialog background color
hideIndent	false	Boolean	false	If true, indent will be hidden
indentColor	false	String	#FFF	Color of indent
topRadius	false	String	20px	Radius of top corners

License

MIT