list group tag helper docs

7 years ago · 849179e40d
parent a249b17277
commit 849179e40d
1 changed files with 269 additions and 44 deletions
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ListGroup.cshtml
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ListGroup.cshtml
@ -10,11 +10,23 @@
    </abp-style-bundle>
 }

+@section scripts {
+    <abp-script-bundle>
+        @*<abp-script src="/libs/highlight.js/lib/highlight.js" />
+            <abp-script src="/Pages/Components/highlightCode.js" />*@
+    </abp-script-bundle>
+}
+
+<link rel="stylesheet"
+      href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
+<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
+<script>hljs.initHighlightingOnLoad();</script>
+
 <h2>List Groups</h2>

 <p>Based on <a href="https://getbootstrap.com/docs/4.1/components/list-group/" target="_blank"> Bootstrap List Group</a>.</p>

-<h4># List Group Example</h4>
+<h4>Basic example</h4>

 <div class="demo-with-code">
    <div class="demo-area">
@ -25,116 +37,329 @@
            <abp-list-group-item>Morbi leo risus</abp-list-group-item>
            <abp-list-group-item>Vestibulum at eros</abp-list-group-item>
        </abp-list-group>
-
    </div>
    <div class="code-area">
-        <pre>
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
 &lt;abp-list-group&gt;
-    &lt;abp-list-group-item active=&quot;true&quot;&gt;Cras justo odio&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item&gt;Cras justo odio&lt;/abp-list-group-item&gt;
    &lt;abp-list-group-item&gt;Dapibus ac facilisis in&lt;/abp-list-group-item&gt;
    &lt;abp-list-group-item&gt;Morbi leo risus&lt;/abp-list-group-item&gt;
-    &lt;abp-list-group-item disabled=&quot;true&quot;&gt;Vestibulum at eros&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item&gt;Vestibulum at eros&lt;/abp-list-group-item&gt;
 &lt;/abp-list-group&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;ul class=&quot;list-group&quot;&gt;
+  &lt;li class=&quot;list-group-item&quot;&gt;Cras justo odio&lt;/li&gt;
+  &lt;li class=&quot;list-group-item&quot;&gt;Dapibus ac facilisis in&lt;/li&gt;
+  &lt;li class=&quot;list-group-item&quot;&gt;Morbi leo risus&lt;/li&gt;
+  &lt;li class=&quot;list-group-item&quot;&gt;Porta ac consectetur ac&lt;/li&gt;
+&lt;/ul&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
    </div>
 </div>

-<h4># List Group Flush Example</h4>
+<h4>Active & disabled items</h4>

 <div class="demo-with-code">
    <div class="demo-area">

-        <abp-list-group flush="true">
+        <abp-list-group>
            <abp-list-group-item>Cras justo odio</abp-list-group-item>
-            <abp-list-group-item>Dapibus ac facilisis in</abp-list-group-item>
+            <abp-list-group-item active="true">Dapibus ac facilisis in</abp-list-group-item>
            <abp-list-group-item>Morbi leo risus</abp-list-group-item>
-            <abp-list-group-item>Vestibulum at eros</abp-list-group-item>
+            <abp-list-group-item disabled="true">Vestibulum at eros</abp-list-group-item>
        </abp-list-group>
-
    </div>
    <div class="code-area">
-        <pre>
-&lt;abp-list-group flush=&quot;true&quot;&gt;
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-list-group&gt;
    &lt;abp-list-group-item&gt;Cras justo odio&lt;/abp-list-group-item&gt;
-    &lt;abp-list-group-item&gt;Dapibus ac facilisis in&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item active=&quot;true&quot;&gt;Dapibus ac facilisis in&lt;/abp-list-group-item&gt;
    &lt;abp-list-group-item&gt;Morbi leo risus&lt;/abp-list-group-item&gt;
-    &lt;abp-list-group-item&gt;Vestibulum at eros&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item disabled=&quot;true&quot;&gt;Vestibulum at eros&lt;/abp-list-group-item&gt;
 &lt;/abp-list-group&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;ul class=&quot;list-group&quot;&gt;
+  &lt;li class=&quot;list-group-item active&quot;&gt;Cras justo odio&lt;/li&gt;
+  &lt;li class=&quot;list-group-item&quot;&gt;Dapibus ac facilisis in&lt;/li&gt;
+  &lt;li class=&quot;list-group-item&quot;&gt;Morbi leo risus&lt;/li&gt;
+  &lt;li class=&quot;list-group-item disabled&quot;&gt;Porta ac consectetur ac&lt;/li&gt;
+&lt;/ul&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
    </div>
 </div>

-<h4># List Group Link Example</h4>
+<h4>Links and buttons</h4>

 <div class="demo-with-code">
    <div class="demo-area">

        <abp-list-group>
-            <abp-list-group-item href="#">Cras justo odio</abp-list-group-item>
+            <abp-list-group-item href="#" active="true">Cras justo odio</abp-list-group-item>
            <abp-list-group-item href="#">Dapibus ac facilisis in</abp-list-group-item>
            <abp-list-group-item href="#">Morbi leo risus</abp-list-group-item>
-            <abp-list-group-item href="#">Vestibulum at eros</abp-list-group-item>
+            <abp-list-group-item href="#" disabled="true">Vestibulum at eros</abp-list-group-item>
        </abp-list-group>
-
    </div>
    <div class="code-area">
-        <pre>
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
 &lt;abp-list-group&gt;
-    &lt;abp-list-group-item href=&quot;#&quot;&gt;Cras justo odio&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item href=&quot;#&quot; active=&quot;true&quot;&gt;Cras justo odio&lt;/abp-list-group-item&gt;
    &lt;abp-list-group-item href=&quot;#&quot;&gt;Dapibus ac facilisis in&lt;/abp-list-group-item&gt;
    &lt;abp-list-group-item href=&quot;#&quot;&gt;Morbi leo risus&lt;/abp-list-group-item&gt;
-    &lt;abp-list-group-item href=&quot;#&quot;&gt;Vestibulum at eros&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item href=&quot;#&quot; disabled=&quot;true&quot;&gt;Vestibulum at eros&lt;/abp-list-group-item&gt;
 &lt;/abp-list-group&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;list-group&quot;&gt;
+  &lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action active&quot;&gt;Cras justo odio&lt;/a&gt;
+  &lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action&quot;&gt;Dapibus ac facilisis in&lt;/a&gt;
+  &lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action&quot;&gt;Morbi leo risus&lt;/a&gt;
+  &lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action disabled&quot;&gt;Vestibulum at eros&lt;/a&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
    </div>
 </div>

-<h4># List Group Button Example</h4>
-
 <div class="demo-with-code">
    <div class="demo-area">

        <abp-list-group>
-            <abp-list-group-item tag-type="Button">Cras justo odio</abp-list-group-item>
+            <abp-list-group-item tag-type="Button" active="true">Cras justo odio</abp-list-group-item>
            <abp-list-group-item tag-type="Button">Dapibus ac facilisis in</abp-list-group-item>
            <abp-list-group-item tag-type="Button">Morbi leo risus</abp-list-group-item>
            <abp-list-group-item tag-type="Button">Vestibulum at eros</abp-list-group-item>
        </abp-list-group>
-
    </div>
    <div class="code-area">
-        <pre>
-&lt;abp-list-group flush=&quot;true&quot;&gt;
-    &lt;abp-list-group-item tag-type=&quot;Button&quot;&gt;Cras justo odio&lt;/abp-list-group-item&gt;
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-list-group&gt;
+    &lt;abp-list-group-item tag-type=&quot;Button&quot; active=&quot;true&quot;&gt;Cras justo odio&lt;/abp-list-group-item&gt;
    &lt;abp-list-group-item tag-type=&quot;Button&quot;&gt;Dapibus ac facilisis in&lt;/abp-list-group-item&gt;
    &lt;abp-list-group-item tag-type=&quot;Button&quot;&gt;Morbi leo risus&lt;/abp-list-group-item&gt;
    &lt;abp-list-group-item tag-type=&quot;Button&quot;&gt;Vestibulum at eros&lt;/abp-list-group-item&gt;
 &lt;/abp-list-group&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;list-group&quot;&gt;
+  &lt;button type=&quot;button&quot; class=&quot;list-group-item list-group-item-action active&quot;&gt;
+    Cras justo odio
+  &lt;/button&gt;
+  &lt;button type=&quot;button&quot; class=&quot;list-group-item list-group-item-action&quot;&gt;Morbi leo risus&lt;/button&gt;
+  &lt;button type=&quot;button&quot; class=&quot;list-group-item list-group-item-action&quot;&gt;Porta ac consectetur ac&lt;/button&gt;
+  &lt;button type=&quot;button&quot; class=&quot;list-group-item list-group-item-action&quot; disabled&gt;Vestibulum at eros&lt;/button&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
    </div>
 </div>

-<h4># List Group style Contextual classes Example</h4>
+<h4>Flush</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <abp-list-group flush="true">
+            <abp-list-group-item>Cras justo odio</abp-list-group-item>
+            <abp-list-group-item>Dapibus ac facilisis in</abp-list-group-item>
+            <abp-list-group-item>Morbi leo risus</abp-list-group-item>
+            <abp-list-group-item>Vestibulum at eros</abp-list-group-item>
+        </abp-list-group>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-list-group flush=&quot;true&quot;&gt;
+    &lt;abp-list-group-item&gt;Cras justo odio&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item&gt;Dapibus ac facilisis in&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item&gt;Morbi leo risus&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item&gt;Vestibulum at eros&lt;/abp-list-group-item&gt;
+&lt;/abp-list-group&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;ul class=&quot;list-group list-group-flush&quot;&gt;
+  &lt;li class=&quot;list-group-item&quot;&gt;Cras justo odio&lt;/li&gt;
+  &lt;li class=&quot;list-group-item&quot;&gt;Dapibus ac facilisis in&lt;/li&gt;
+  &lt;li class=&quot;list-group-item&quot;&gt;Morbi leo risus&lt;/li&gt;
+  &lt;li class=&quot;list-group-item&quot;&gt;Vestibulum at eros&lt;/li&gt;
+&lt;/ul&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>Contextual classes</h4>

 <div class="demo-with-code">
    <div class="demo-area">

        <abp-list-group>
-            <abp-list-group-item type="Warning">Cras justo odio</abp-list-group-item>
-            <abp-list-group-item type="Danger">Dapibus ac facilisis in</abp-list-group-item>
-            <abp-list-group-item type="Success">Morbi leo risus <span abp-badge-pill="Success">42</span></abp-list-group-item>
-            <abp-list-group-item type="Secondary">Vestibulum at eros <span abp-badge-pill="Warning">5</span></abp-list-group-item>
+            <abp-list-group-item>Cras justo odio</abp-list-group-item>
+            <abp-list-group-item type="Primary">A simple Primary list group item</abp-list-group-item>
+            <abp-list-group-item type="Secondary">A simple Secondary list group item</abp-list-group-item>
+            <abp-list-group-item type="Success">A simple Success list group item</abp-list-group-item>
+            <abp-list-group-item type="Danger">A simple Danger list group item</abp-list-group-item>
+            <abp-list-group-item type="Warning">A simple Warning list group item</abp-list-group-item>
+            <abp-list-group-item type="Info">A simple Info list group item</abp-list-group-item>
+            <abp-list-group-item type="Light">A simple Light list group item</abp-list-group-item>
+            <abp-list-group-item type="Dark">A simple Dark list group item</abp-list-group-item>
        </abp-list-group>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-list-group&gt;
+    &lt;abp-list-group-item&gt;Cras justo odio&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item type=&quot;Primary&quot;&gt;A simple Primary list group item&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item type=&quot;Secondary&quot;&gt;A simple Secondary list group item&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item type=&quot;Success&quot;&gt;A simple Success list group item&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item type=&quot;Danger&quot;&gt;A simple Danger list group item&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item type=&quot;Warning&quot;&gt;A simple Warning list group item&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item type=&quot;Info&quot;&gt;A simple Info list group item&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item type=&quot;Light&quot;&gt;A simple Light list group item&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item type=&quot;Dark&quot;&gt;A simple Dark list group item&lt;/abp-list-group-item&gt;
+&lt;/abp-list-group&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;ul class=&quot;list-group&quot;&gt;
+  &lt;li class=&quot;list-group-item&quot;&gt;Dapibus ac facilisis in&lt;/li&gt;
+  &lt;li class=&quot;list-group-item list-group-item-primary&quot;&gt;A simple primary list group item&lt;/li&gt;
+  &lt;li class=&quot;list-group-item list-group-item-secondary&quot;&gt;A simple secondary list group item&lt;/li&gt;
+  &lt;li class=&quot;list-group-item list-group-item-success&quot;&gt;A simple success list group item&lt;/li&gt;
+  &lt;li class=&quot;list-group-item list-group-item-danger&quot;&gt;A simple danger list group item&lt;/li&gt;
+  &lt;li class=&quot;list-group-item list-group-item-warning&quot;&gt;A simple warning list group item&lt;/li&gt;
+  &lt;li class=&quot;list-group-item list-group-item-info&quot;&gt;A simple info list group item&lt;/li&gt;
+  &lt;li class=&quot;list-group-item list-group-item-light&quot;&gt;A simple light list group item&lt;/li&gt;
+  &lt;li class=&quot;list-group-item list-group-item-dark&quot;&gt;A simple dark list group item&lt;/li&gt;
+&lt;/ul&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>

+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <abp-list-group>
+            <abp-list-group-item href="#">Cras justo odio</abp-list-group-item>
+            <abp-list-group-item href="#" type="Primary">A simple Primary list group item</abp-list-group-item>
+            <abp-list-group-item href="#" type="Secondary">A simple Secondary list group item</abp-list-group-item>
+            <abp-list-group-item href="#" type="Success">A simple Success list group item</abp-list-group-item>
+            <abp-list-group-item href="#" type="Danger">A simple Danger list group item</abp-list-group-item>
+            <abp-list-group-item href="#" type="Warning">A simple Warning list group item</abp-list-group-item>
+            <abp-list-group-item href="#" type="Info">A simple Info list group item</abp-list-group-item>
+            <abp-list-group-item href="#" type="Light">A simple Light list group item</abp-list-group-item>
+            <abp-list-group-item href="#" type="Dark">A simple Dark list group item</abp-list-group-item>
+        </abp-list-group>
    </div>
    <div class="code-area">
-        <pre>
-&lt;abp-list-group flush=&quot;true&quot;&gt;
-    &lt;abp-list-group-item type=&quot;Warning&quot;&gt;Cras justo odio&lt;/abp-list-group-item&gt;
-    &lt;abp-list-group-item type=&quot;Danger&quot;&gt;Dapibus ac facilisis in&lt;/abp-list-group-item&gt;
-    &lt;abp-list-group-item type=&quot;Success&quot;&gt;Morbi leo risus &lt;span abp-badge-pill=&quot;Success&quot;&gt;42&lt;/span&gt;&lt;/abp-list-group-item&gt;
-    &lt;abp-list-group-item type=&quot;Secondary&quot;&gt;Vestibulum at eros &lt;span abp-badge-pill=&quot;Warning&quot;&gt;5&lt;/span&gt;&lt;/abp-list-group-item&gt;
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-list-group&gt;
+    &lt;abp-list-group-item href=&quot;#&quot;&gt;Cras justo odio&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item href=&quot;#&quot; type=&quot;Primary&quot;&gt;A simple Primary list group item&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item href=&quot;#&quot; type=&quot;Secondary&quot;&gt;A simple Secondary list group item&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item href=&quot;#&quot; type=&quot;Success&quot;&gt;A simple Success list group item&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item href=&quot;#&quot; type=&quot;Danger&quot;&gt;A simple Danger list group item&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item href=&quot;#&quot; type=&quot;Warning&quot;&gt;A simple Warning list group item&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item href=&quot;#&quot; type=&quot;Info&quot;&gt;A simple Info list group item&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item href=&quot;#&quot; type=&quot;Light&quot;&gt;A simple Light list group item&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item href=&quot;#&quot; type=&quot;Dark&quot;&gt;A simple Dark list group item&lt;/abp-list-group-item&gt;
+&lt;/abp-list-group&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;list-group&quot;&gt;
+  &lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action&quot;&gt;Dapibus ac facilisis in&lt;/a&gt;
+  &lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action list-group-item-primary&quot;&gt;A simple primary list group item&lt;/a&gt;
+  &lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action list-group-item-secondary&quot;&gt;A simple secondary list group item&lt;/a&gt;
+  &lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action list-group-item-success&quot;&gt;A simple success list group item&lt;/a&gt;
+  &lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action list-group-item-danger&quot;&gt;A simple danger list group item&lt;/a&gt;
+  &lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action list-group-item-warning&quot;&gt;A simple warning list group item&lt;/a&gt;
+  &lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action list-group-item-info&quot;&gt;A simple info list group item&lt;/a&gt;
+  &lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action list-group-item-light&quot;&gt;A simple light list group item&lt;/a&gt;
+  &lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action list-group-item-dark&quot;&gt;A simple dark list group item&lt;/a&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>With badges</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <abp-list-group>
+            <abp-list-group-item>Cras justo odio <span abp-badge-pill="Primary">14</span></abp-list-group-item>
+            <abp-list-group-item>Dapibus ac facilisis in <span abp-badge-pill="Primary">2</span></abp-list-group-item>
+            <abp-list-group-item>Morbi leo risus <span abp-badge-pill="Primary">1</span></abp-list-group-item>
+        </abp-list-group>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-list-group&gt;
+    &lt;abp-list-group-item&gt;Cras justo odio &lt;span abp-badge-pill=&quot;Primary&quot;&gt;14&lt;/span&gt;&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item&gt;Dapibus ac facilisis in &lt;span abp-badge-pill=&quot;Primary&quot;&gt;2&lt;/span&gt;&lt;/abp-list-group-item&gt;
+    &lt;abp-list-group-item&gt;Morbi leo risus &lt;span abp-badge-pill=&quot;Primary&quot;&gt;1&lt;/span&gt;&lt;/abp-list-group-item&gt;
 &lt;/abp-list-group&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;ul class=&quot;list-group&quot;&gt;
+  &lt;li class=&quot;list-group-item&quot;&gt;
+    Cras justo odio
+    &lt;span class=&quot;badge badge-primary badge-pill&quot;&gt;14&lt;/span&gt;
+  &lt;/li&gt;
+  &lt;li class=&quot;list-group-item&quot;&gt;
+    Dapibus ac facilisis in
+    &lt;span class=&quot;badge badge-primary badge-pill&quot;&gt;2&lt;/span&gt;
+  &lt;/li&gt;
+  &lt;li class=&quot;list-group-item&quot;&gt;
+    Morbi leo risus
+    &lt;span class=&quot;badge badge-primary badge-pill&quot;&gt;1&lt;/span&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
    </div>
 </div>