From 78e146ff17306ab3810fbf5902cc4c0c66fdaf9e Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Fri, 31 Mar 2017 02:10:00 +0800
Subject: Add Avatars badge support

---
 docs/components.html | 48 +++++++++++++++++++++++++++++++-----------------
 1 file changed, 31 insertions(+), 17 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 7ea90dd..51de9b2 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -335,21 +335,28 @@
             <p>If there is no <code>data-badge</code> or the attribute is not specified, the badge will appear as a dot.</p>
           </section>
           <div class="columns">
-            <div class="column col-xs-6">
+            <div class="column col-sm-12">
               <button class="btn badge" data-badge="">Button</button>
-            </div>
-            <div class="column col-xs-6">
               <button class="btn badge" data-badge="8">Button</button>
             </div>
-            <div class="column col-xs-6">
+            <div class="column col-sm-12">
               <button class="btn btn-primary badge" data-badge="">Button</button>
-            </div>
-            <div class="column col-xs-6">
               <button class="btn btn-primary badge" data-badge="8">Button</button>
             </div>
+            <div class="column col-sm-12">
+              <figure class="avatar avatar-xl badge" data-badge="8" data-initial="YZ">
+                <img src="img/avatar-1.png" alt="YZ" />
+              </figure>
+              <figure class="avatar avatar-lg badge" data-badge="8" data-initial="YZ">
+                <img src="img/avatar-2.png" alt="YZ" />
+              </figure>
+              <figure class="avatar badge" data-badge="8" data-initial="YZ">
+                <img src="img/avatar-3.png" alt="YZ" />
+              </figure>
+            </div>
           </div>
           <section class="notes">
-            <p>Badges support <code>button</code> elements as well. </p>
+            <p>Badges support <code>button</code> and <code>avatars</code> elements as well. </p>
           </section>
 
 <!-- badges example -->
@@ -357,13 +364,17 @@
   Notifications
 &lt;<span class="tag">/span</span>&gt;
 
-&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;badge&quot;</span> <span class="atn">data-badge</span>=<span class="atv">&quot;88&quot;</span>&gt;
+&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;badge&quot;</span> <span class="atn">data-badge</span>=<span class="atv">&quot;8&quot;</span>&gt;
   Notifications
 &lt;<span class="tag">/span</span>&gt;
 
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn badge&quot;</span> <span class="atn">data-badge</span>=<span class="atv">&quot;88&quot;</span>&gt;
+&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn badge&quot;</span> <span class="atn">data-badge</span>=<span class="atv">&quot;8&quot;</span>&gt;
   Button
 &lt;<span class="tag">/button</span>&gt;
+
+&lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;avatar badge&quot;</span> <span class="atn">data-badge</span>=<span class="atv">&quot;8&quot;</span> <span class="atn">data-initial</span>=<span class="atv">&quot;YZ&quot;</span>&gt;
+  &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-3.png&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;YZ&quot;</span> /&gt;
+&lt;<span class="tag">/figure</span>&gt;
 </code></pre>
 
         </section>
@@ -371,7 +382,7 @@
         <section id="bars" class="container">
           <header class="text-center"><h3>Bars</h3></header>
           <section class="notes">
-            <p><strong>Bars</strong> represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 <code>progress</code> and <code>meter</code> elements.</p>
+            <p><strong>Bars</strong> represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 <code>progress</code>, <code>meter</code> and <code>input range</code> elements.</p>
           </section>
           <div class="columns">
             <div class="column col-8 col-xs-12">
@@ -407,6 +418,7 @@
   &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar-item&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;progressbar&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;width:25%;&quot;</span> <span class="atn">aria-valuenow</span>=<span class="atv">&quot;25&quot;</span> <span class="atn">aria-valuemin</span>=<span class="atv">&quot;0&quot;</span> <span class="atn">aria-valuemax</span>=<span class="atv">&quot;100&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
 &lt;<span class="tag">/div</span>&gt;
 
+<span class="com">&lt;!-- multi-bars --&gt;</span>
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar&quot;</span>&gt;
   &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar-item tooltip&quot;</span> <span class="atn">data-tooltip</span>=<span class="atv">&quot;25%&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;width:25%;&quot;</span>&gt;25%&lt;<span class="tag">/div</span>&gt;
   &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar-item&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;width:15%;background:#818bd5;&quot;</span>&gt;15%&lt;<span class="tag">/div</span>&gt;
@@ -442,12 +454,14 @@
           </section>
 
 <!-- slider bars example -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar bar-slider&quot;</span>&gt;
+<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- slider --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar bar-slider&quot;</span>&gt;
   &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar-item&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;progressbar&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;width:25%;&quot;</span>&gt;
     &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;bar-slider-btn&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;slider&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
   &lt;<span class="tag">/div</span>&gt;
 &lt;<span class="tag">/div</span>&gt;
 
+<span class="com">&lt;!-- range slider --&gt;</span>
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar bar-slider&quot;</span>&gt;
   &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar-item&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;progressbar&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;width:15%;&quot;</span>&gt;
     &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;bar-slider-btn&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;slider&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
@@ -995,7 +1009,7 @@
           </section>
           <header id="breadcrumbs" class="text-center"><h4>Breadcrumbs</h4></header>
           <div class="columns">
-            <div class="column col-6 col-sm-12">
+            <div class="column col-6 col-md-12">
               <ul class="breadcrumb">
                 <li class="breadcrumb-item">
                   <a href="#breadcrumbs">
@@ -1012,7 +1026,7 @@
                 </li>
               </ul>
             </div>
-            <div class="column col-6 col-sm-12">
+            <div class="column col-6 col-md-12">
               <ul class="breadcrumb">
                 <li class="breadcrumb-item">
                   <a href="#breadcrumbs">
@@ -1052,7 +1066,7 @@
 
           <header id="tabs" class="text-center"><h4>Tabs</h4></header>
           <div class="columns">
-            <div class="column col-6 col-xs-12">
+            <div class="column col-6 col-sm-12">
               <ul class="tab">
                 <li class="tab-item active">
                   <a href="#tabs">
@@ -1076,7 +1090,7 @@
                 </li>
               </ul>
             </div>
-            <div class="column col-6 col-xs-12">
+            <div class="column col-6 col-sm-12">
               <ul class="tab tab-block">
                 <li class="tab-item active">
                   <a href="#tabs">
@@ -1118,7 +1132,7 @@
 </code></pre>
 
           <div class="columns">
-            <div class="column col-xs-12">
+            <div class="column col-sm-12">
               <ul class="tab">
                 <li class="tab-item active">
                   <a href="#tabs" class="badge" data-badge="9">
@@ -1137,7 +1151,7 @@
                 </li>
               </ul>
             </div>
-            <div class="column col-xs-12">
+            <div class="column col-sm-12">
               <ul class="tab tab-block">
                 <li class="tab-item active">
                   <a href="#tabs" class="badge" data-badge="9">
-- 
cgit v1.3.1-23-gd82d