fix badge issue on tabs

1 files changed, 64 insertions, 0 deletions

diff --git a/index.html b/index.html
index b9ac5aa..39551b9 100644
--- a/index.html
+++ b/index.html
@@ -1661,6 +1661,70 @@
     &lt;<span class="tag">/li</span>&gt;
 &lt;<span class="tag">/ul</span>&gt;
 </pre>
+            <div class="columns">
+                <div class="column">
+                    <ul class="tab">
+                        <li class="tab-item active">
+                            <a href="#tabs" class="badge" data-badge="9">
+                                Music
+                            </a>
+                        </li>
+                        <li class="tab-item">
+                            <a href="#tabs">
+                                Playlists
+                            </a>
+                        </li>
+                        <li class="tab-item">
+                            <a href="#tabs">
+                                Radio
+                            </a>
+                        </li>
+                        <li class="tab-item">
+                            <a href="#tabs">
+                                Connect
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="column">
+                    <ul class="tab tab-block">
+                        <li class="tab-item active">
+                            <a href="#tabs" class="badge" data-badge="9">
+                                Music
+                            </a>
+                        </li>
+                        <li class="tab-item">
+                            <a href="#tabs">
+                                Playlists
+                            </a>
+                        </li>
+                        <li class="tab-item">
+                            <a href="#tabs">
+                                Radio
+                            </a>
+                        </li>
+                        <li class="tab-item">
+                            <a href="#tabs">
+                                Connect
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <section class="notes">
+                <p>If you need <code>badges</code> on tabs, you can add badge class to the element within <code>tab-item</code>. </p>
+            </section>
+
+            <!-- tabs with badges example -->
+<pre class="code lang-html">
+&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;tab tab-block&quot;</span>&gt;
+    &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;tab-item active&quot;</span>&gt;
+        &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;badge&quot;</span> <span class="atn">data-badge</span>=<span class="atv">&quot;9&quot;</span>&gt;
+            Music
+        &lt;<span class="tag">/a</span>&gt;
+    &lt;<span class="tag">/li</span>&gt;
+&lt;<span class="tag">/ul</span>&gt;
+</pre>
 
             <header id="pagination" class="text-center"><h5>pagination</h5></header>
             <div class="columns">