mirror of https://github.com/abpframework/abp.git
1 changed files with 89 additions and 0 deletions
@ -0,0 +1,89 @@ |
|||
# Modals |
|||
|
|||
## Introduction |
|||
|
|||
`abp-modal` is a main element to create a modal. |
|||
|
|||
Basic usage: |
|||
|
|||
````xml |
|||
<abp-button button-type="Primary" data-toggle="modal" data-target="#myModal">Launch modal</abp-button> |
|||
|
|||
<abp-modal centered="true" size="Large" id="myModal"> |
|||
<abp-modal-header title="Modal title"></abp-modal-header> |
|||
<abp-modal-body> |
|||
Woohoo, you're reading this text in a modal! |
|||
</abp-modal-body> |
|||
<abp-modal-footer buttons="Close"></abp-modal-footer> |
|||
</abp-modal> |
|||
```` |
|||
|
|||
|
|||
|
|||
## Demo |
|||
|
|||
See the [modals demo page](https://bootstrap-taghelpers.abp.io/Components/Modals) to see it in action. |
|||
|
|||
## Attributes |
|||
|
|||
### centered |
|||
|
|||
A value indicates the positioning of the modal. Should be one of the following values: |
|||
|
|||
* `false` (default value) |
|||
* `true` |
|||
|
|||
Example: |
|||
|
|||
````xml |
|||
<abp-alert alert-type="Warning"> |
|||
A simple warning alert—check it out! |
|||
</abp-alert> |
|||
```` |
|||
|
|||
### size |
|||
|
|||
A value indicates the size of the modal. Should be one of the following values: |
|||
|
|||
* `Default` (default value) |
|||
* `Small` |
|||
* `Large` |
|||
* `ExtraLarge` |
|||
|
|||
### static |
|||
|
|||
A value indicates if the modal will be static. Should be one of the following values: |
|||
|
|||
* `false` (default value) |
|||
* `true` |
|||
|
|||
### Additional content |
|||
|
|||
`abp-modal-footer` can have multiple buttons with alignment option. |
|||
|
|||
Add `@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal` to your page. |
|||
|
|||
Example: |
|||
|
|||
````xml |
|||
<abp-button button-type="Primary" data-toggle="modal" data-target="#myModal">Launch modal</abp-button> |
|||
|
|||
<abp-modal centered="true" size="Large" id="myModal" static="true"> |
|||
<abp-modal-header title="Modal title"></abp-modal-header> |
|||
<abp-modal-body> |
|||
Woohoo, you're reading this text in a modal! |
|||
</abp-modal-body> |
|||
<abp-modal-footer buttons="@(AbpModalButtons.Save|AbpModalButtons.Close)" button-alignment="Between"></abp-modal-footer> |
|||
</abp-modal> |
|||
```` |
|||
|
|||
### button-alignment |
|||
|
|||
A value indicates the positioning of your modal footer buttons. Should be one of the following values: |
|||
|
|||
* `Default` (default value) |
|||
* `Start` |
|||
* `Center` |
|||
* `Around` |
|||
* `Between` |
|||
* `End` |
|||
Loading…
Reference in new issue