Skip to end of metadata
Go to start of metadata
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 = 100% & 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>