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