Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 10 Next »

Invision Designshttps://app.invisionapp.com/d/main#/console/16496654/342077612/preview
ng2-semantic documentationhttps://edcarroll.github.io/ng2-semantic-ui/#/modules/modal

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% & max-height = 480px
largeEntire screenEntire screenEntire 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>
  • No labels