Dialog

Introduction to using the Dialog component

A Dialog is a strong interaction between a webpage and the user. When this component is displayed, it will attract all of the user's attention, so it is generally used in very important places or in situations where you want the user to be fully focused.

Basic usage

<bpa-button @click="isBpaDialogVisible = true">
  Open Dialog
</bpa-button>

<bpa-dialog :visible.sync="isBpaDialogVisible">
  Content
</bpa-dialog>

Custom header and footer

<bpa-dialog
  :visible.sync="isBpaDialogVisible"
  header="custom header text"
  footer="custom footer text"
>
  Content
</bpa-dialog>

<bpa-dialog
  :visible.sync="isBpaDialogVisible"
>
  <template v-slot:header>
    <mark>custom header Html</mark>
  </template>
  Content
  <template v-slot:footer>
    <mark>custom footer Html</mark>
  </template>
</bpa-dialog>

Clicking the outside overlay does not close the dialog

<bpa-dialog :clickoutside="false">
  Content
</bpa-dialog>

Attributes

Name	Value	Type	Default	Required	Note
id		String	random
header	{ text } or template	String
footer	{ text } or template	String
visible		Boolean	false
clickoutside		Boolean	true

Demo