Dialog Box

GITHUB

To create full featured dialog element (alert, confirm, custom messages) use this component.


Code:

  
HTML
<fvDialog v-model="dialog"> <!-- Dialog Contents --> </fvDialog>
  
Javascript
export default { data () { return { dialog: false } } }

Examples:





Notes:

  • If you want to create modal dialog, pass value prop via :value and if you dont, pass it via v-model.
  • fvDialog is really developer friendly. You can put any contents you want into this and create your custom in/out animation.
  • fvDialog tries to keep focus inside. Basicly the last focusable element inside will focus on open, but element with [autofocus] attr has higher prority.

API:

NameTypeDefaultDescription
value
Boolean
false
Visibility of dialog.
animation
String
'fv-fade'
A CSS class to handle opening and closing animation (will directly set to Vue.js transition name)