strong-arc
Version:
A visual suite for the StrongLoop API Platform
81 lines (80 loc) • 2.75 kB
HTML
<section class="popovers module">
<h2 ng-click="clickModule()">Popovers</h2>
<article ng-show="show">
<section>
<h4>Popovers (contextual)</h4>
<ul class="contextual">
<li>
Informational
<sl-popover-info
icon="sl-icon sl-icon-question-mark"
hideonpageclick="true">
<h4>Title here</h4>
<div class="body">
<p>Here is some example text.</p>
<p>...and here is some example text.</p>
</div>
</sl-popover-info>
</li>
<li>
<span class="ui-msg-inline-error">Informational error</span>
<sl-popover-info
class="error"
icon="sl-icon sl-icon-question-mark"
hideonpageclick="true">
<h4>Ruh-roh...</h4>
<div class="body">
<p>Now you've done it!</p>
</div>
</sl-popover-info>
</li>
<li>
<a href ng-click="showClickableInfo = !showClickableInfo" class="ui-popover-trigger">Informational (clickable label)</a>
<sl-popover-info
icon="sl-icon sl-icon-question-mark"
showontrue="showClickableInfo"
hideonpageclick="true">
<h4>Title here</h4>
<div class="body">
<p>Here is some example text.</p>
<p>...and here is some example text.</p>
</div>
</sl-popover-info>
</li>
<li>
Medium sized popup (.medium)
<sl-popover-info
classes="medium"
icon="sl-icon sl-icon-question-mark"
hideonpageclick="true"
onshow="doSomethingOnShow()"
secondarybuttontext="Something"
secondarybuttonaction="clickedSecondaryButton()">
<h4>Medium popup</h4>
<div class="body">
Anything goes here.
Optional 'onshow' event and 'secondaryButton'.
</div>
</sl-popover-info>
</li>
<li>
Contextual help
<sl-popover-help name="composer"></sl-popover-help>
</li>
<li>
Contextual modal dialog
<button class="ui-btn accessory text-left" style="width:40rem"
popover-template="contextModal.templateUrl"
popover-placement="{{contextModal.position}}"
ng-click="setupHidePopover($event)">
{{contextModal.name}} is {{contextModal.value}} (click to edit)
</button>
</li>
<li>
Modal dialog
<button class="ui-btn small" ng-click="showModal()">Show Modal</button>
</li>
</ul>
</section>
</article>
</section>