07 v_modal

Props

• label: String - The label for the modal.
• title: String - The title of the modal.
• css: { type: String, default: "xd-button xd-gray0 xd-border" } - CSS classes for the button.
• icon: { type: String, default: "fa-angle-right" } - Icon class for the button.
• type: { type: String, default: "stdModal" } - Type of the modal.
  • stdModal
  • sideMobile
• disabled: Boolean - Disables the modal if set to true.
• modalstyle: Object - Custom styles for the modal.

  {
    'width': '50vw',
    'height': '100vh',
    'max-height': '100vh',
    'margin-right': 0,
    'margin-top': 0,
    'margin-bottom': 0,
    'border': 0,
    'border-left': '3px solid var(--xd-border)'
  }
  

Events

• @close: Triggered when the modal is closed.
• @open: Triggered when the modal is open.

Snippet

To close the dialog:

<a @click="document.querySelector('dialog').close();" class="xd-button xd-gray0 xd-border">
  <i class="fa fa-fw fa-close"></i>
</a>

Examples

Basic usage example:

<v_modal label="Info">
  <template slot="header">Header</template>
  Hello World
</v_modal>

show/hide from code

Show if property system.openModal is true

  <v_modal v-if="system.openModal" @close="system.openModal=false">
    <template slot="header">Header</template>
    Hello World
  </v_modal>