Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.


3 variations of Modals:

sizeMobile BehaviourTablet BehaviourComputer Behaviour
smallwidth = 300px  & height = 250pxwidth = 300px  & height = 250pxwidth = 300px  & height = 250px
normalwidth = 100% & max-height = 480pxwidth = 100% & max-height = 480pxwidth =
100%
720px & max-height = 480px
largeEntire screenEntire screenEntire screen

HTML Template:

Code Block
languagexml
linenumberstrue
<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>

...