modal tag helper docs

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>