Modals
| Invision Designs | https://app.invisionapp.com/d/main#/console/16496654/342077612/preview |
|---|---|
| ng2-semantic documentation | https://edcarroll.github.io/ng2-semantic-ui/#/modules/modal |
3 variations of Modals:
| size | Mobile Behaviour | Tablet Behaviour | Computer Behaviour |
|---|---|---|---|
| small | width = 300px & height = 250px | width = 300px & height = 250px | width = 300px & height = 250px |
| normal | width = 100% & max-height = 480px | width = 100% & max-height = 480px | width = 720px & max-height = 480px |
| large | Entire screen | Entire screen | Entire screen |
HTML Template:
<sui-modal
[isClosable]="true"
[size]="'normal'"
[transitionDuration]="0"
(dismissed)="whateverFunction();"
#modal>
<!--Header-->
<div class="header">
heading
</div>
<!--/Header-->
<!--Content-->
<div class="content">
content
</div>
<!--/Content-->
<!--Footer-->
<div class="actions">
<button class="ui secondary button">Secondary Button</button>
<button class="ui primary button">Primary Button</button>
</div>
<!--/Footer-->
</sui-modal>