Browse Source

modal tag helper docs

pull/670/head
Yunus Emre Kalkan 8 years ago
parent
commit
61cd8bd061
  1. 60
      framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Modals.cshtml

60
framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Modals.cshtml

@ -15,34 +15,64 @@
<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/modal/" target="_blank"> Bootstrap Modal</a>.</p>
<h4># Modal Example</h4>
<h4>Example</h4>
<div class="demo-with-code">
<div class="demo-area">
<abp-button button-type="Success" data-toggle="modal" data-target="#myModal">Launch modal</abp-button>
<abp-modal id="myModal">
<abp-modal-header title="Header"></abp-modal-header>
<abp-button button-type="Primary" data-toggle="modal" data-target="#myModal">Launch modal</abp-button>
<abp-modal centered="true" size="Large" id="myModal">
<abp-modal-header title="Modal title"></abp-modal-header>
<abp-modal-body>
Body
Woohoo, you're reading this text in a modal!
</abp-modal-body>
<abp-modal-footer buttons="@(AbpModalButtons.Save|AbpModalButtons.Close)"></abp-modal-footer>
</abp-modal>
</div>
<div class="code-area">
<pre>
&lt;abp-modal id=&quot;myModal&quot;&gt;
&lt;abp-modal-header title=&quot;Header&quot;&gt;&lt;/abp-modal-header&gt;
<abp-tabs>
<abp-tab title="Tag Helper">
<pre><code>
&lt;abp-button button-type=&quot;Primary&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myModal&quot;&gt;Launch modal&lt;/abp-button&gt;
&lt;abp-modal centered=&quot;true&quot; size=&quot;Large&quot; id=&quot;myModal&quot;&gt;
&lt;abp-modal-header title=&quot;Modal title&quot;&gt;&lt;/abp-modal-header&gt;
&lt;abp-modal-body&gt;
Body
Woohoo, you're reading this text in a modal!
&lt;/abp-modal-body&gt;
&lt;abp-modal-footer buttons=&quot;(AbpModalButtons.Save|AbpModalButtons.Close)&quot;&gt;&lt;/abp-modal-footer&gt;
&lt;/abp-modal&gt;
</pre>
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;!-- Button trigger modal --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; data-toggle=&quot;modal&quot; data-target=&quot;#exampleModal&quot;&gt;
Launch demo modal
&lt;/button&gt;
&lt;!-- Modal --&gt;
&lt;div class=&quot;modal fade&quot; id=&quot;exampleModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;exampleModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog modal-dialog-centered modal-lg&quot; role=&quot;document&quot;&gt;
&lt;div class=&quot;modal-content&quot;&gt;
&lt;div class=&quot;modal-header&quot;&gt;
&lt;h5 class=&quot;modal-title&quot; id=&quot;exampleModalLabel&quot;&gt;Modal title&lt;/h5&gt;
&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
&lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-body&quot;&gt;
...
&lt;/div&gt;
&lt;div class=&quot;modal-footer&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;Save&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>

Loading…
Cancel
Save