-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
130 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,130 @@ | ||
| ## v-model | ||
| Pass a Boolean value to the ```v-model``` directive to open and close the modal window. | ||
|
|
||
| ## Props | ||
| <table class="table table-bordered"> | ||
| <thead> | ||
| <tr> | ||
| <th>Prop</th> | ||
| <th>Description</th> | ||
| <th>Type</th> | ||
| <th>Default</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>title</td> | ||
| <td>The title of the modal element</td> | ||
| <td>String</td> | ||
| <td><em>Empty</em></td> | ||
| </tr> | ||
| <tr> | ||
| <td>baseZindex</td> | ||
| <td>The z-index style attribute of the modal window</td> | ||
| <td>Number</td> | ||
| <td>1051</td> | ||
| </tr> | ||
| <tr> | ||
| <td>wrapperClass</td> | ||
| <td>Extra CSS classes for the modal wrapper</td> | ||
| <td>String</td> | ||
| <td><em>Empty</em></td> | ||
| </tr> | ||
| <tr> | ||
| <td>bgClass</td> | ||
| <td>Extra CSS classes for the modal backdrop</td> | ||
| <td>String</td> | ||
| <td><em>Empty</em></td> | ||
| </tr> | ||
| <tr> | ||
| <td>modalClass</td> | ||
| <td>Extra CSS classes for the modal element</td> | ||
| <td>String</td> | ||
| <td><em>Empty</em></td> | ||
| </tr> | ||
| <tr> | ||
| <td>modalStyle</td> | ||
| <td>Extra CSS styles for the modal element</td> | ||
| <td>Object</td> | ||
| <td><em>Empty</em></td> | ||
| </tr> | ||
| <tr> | ||
| <td>inClass</td> | ||
| <td>Animation class for the modal intro</td> | ||
| <td>String</td> | ||
| <td>vm-fadeIn</td> | ||
| </tr> | ||
| <tr> | ||
| <td>outClass</td> | ||
| <td>Animation class for the modal outro</td> | ||
| <td>String</td> | ||
| <td>vm-fadeOut</td> | ||
| </tr> | ||
| <tr> | ||
| <td>bgInClass</td> | ||
| <td>Animation class for the modal backdrop intro</td> | ||
| <td>String</td> | ||
| <td>vm-fadeIn</td> | ||
| </tr> | ||
| <tr> | ||
| <td>bgOutClass</td> | ||
| <td>Animation class for the modal backdrop outro</td> | ||
| <td>String</td> | ||
| <td>vm-fadeOut</td> | ||
| </tr> | ||
| <tr> | ||
| <td>appendTo</td> | ||
| <td>Element (selector) in which the modal is to be inserted to, e.g '#modal-host'<br /> <strong>This option should not be changed at runtime</strong></td> | ||
| <td>String</td> | ||
| <td>body</td> | ||
| </tr> | ||
| <tr> | ||
| <td>live</td> | ||
| <td>Controls whether the modal renders dynamically or stays hidden in the DOM<br /> <strong>This option should not be changed at runtime</strong></td> | ||
| <td>Boolean</td> | ||
| <td>false</td> | ||
| </tr> | ||
| <tr> | ||
| <td>enableClose</td> | ||
| <td>Controls whether the modal window is closable or not</td> | ||
| <td>Boolean</td> | ||
| <td>true</td> | ||
| </tr> | ||
| <tr> | ||
| <td>basedOn</td> | ||
| <td>Opens and closes the modal window, this is used by <code>v-model</code> internally.</td> | ||
| <td>Boolean</td> | ||
| <td>false</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| ## Slots | ||
| ### Default | ||
| The default slot to use for the content of the modal. | ||
|
|
||
| ### titlebar | ||
| The slot to use for overriding the titlebar of the modal | ||
|
|
||
| Default value: | ||
| ``` vue | ||
| <div class="vm-titlebar"> | ||
| <h3 class="vm-title">{{title}}</h3> | ||
| <button | ||
| type="button" | ||
| class="vm-btn-close" | ||
| v-if="enableClose" | ||
| @click.prevent="close"> | ||
| </button> | ||
| </div> | ||
| ``` | ||
|
|
||
| ### content | ||
| The slot to use for overriding the content of the modal | ||
|
|
||
| Default value: | ||
| ``` vue | ||
| <div class="vm-content"> | ||
| <slot></slot> | ||
| </div> | ||
| ``` |