Skip to content

Latest commit

 

History

History
57 lines (54 loc) · 1.81 KB

modal.md

File metadata and controls

57 lines (54 loc) · 1.81 KB

Modal

Usage

The modal

Use the v-model to get the modal' invoker.

  • the invoker needs to have a unique name in the data
  • the invoker doesn't need to be previously declared in the data
<s-modal v-model="myModal1">
  ...
</s-modal>

Outside of the modal

The invoker can be used outside of the modal to open it.

<s-button @click="myModal1(click)">Open!</s-button>

The invoker can be called with a function as argument or no argument and will return a promise.

Inside of the modal

Inside of the modal, a code just has to call the invoker with a string argument that will be the "return value" of the modal.

<s-button @click="myModal1('send')">Send!</s-button>

As modal is commanded, the directive command can be used as a shortcut to the simple case @click="xxxModal(command) is :

<s-button v-command:send>Send!</s-button>

Programatically

Invoking the modal will return a promise that will fail if the given command is 'cancel' and succeed for other values giving the command as a value

The specified call-back function will be called only in case of promise resolution (when the command is not 'cancel')

Slots

A header slot can be given. If not, a header property can be given.

Properties

  • header: string to display if no header slot is given

Programmatic classes:

  • inverted: boolean
  • blurring: boolean
  • detachable: boolean
  • autofocus: boolean
  • observeChanges: boolean
  • allowMultiple: boolean
  • keyboardShortcuts: boolean
  • offset: number
  • closable: boolean
  • //TODO: dimmerSettings?
  • transition: string
  • duration: number
  • queue: boolean

Content classes :

  • scrolling
  • image

Events

  • visible
  • hidden
  • set-callback: sets the v-model