diff options
Add Avatars badge support
1 files changed, 31 insertions, 17 deletions
| -rw-r--r-- | docs/components.html | 48 |
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 <<span class="tag">/span</span>> -<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"badge"</span> <span class="atn">data-badge</span>=<span class="atv">"88"</span>> +<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"badge"</span> <span class="atn">data-badge</span>=<span class="atv">"8"</span>> Notifications <<span class="tag">/span</span>> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn badge"</span> <span class="atn">data-badge</span>=<span class="atv">"88"</span>> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn badge"</span> <span class="atn">data-badge</span>=<span class="atv">"8"</span>> Button <<span class="tag">/button</span>> + +<<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar badge"</span> <span class="atn">data-badge</span>=<span class="atv">"8"</span> <span class="atn">data-initial</span>=<span class="atv">"YZ"</span>> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-3.png"</span> <span class="atn">alt</span>=<span class="atv">"YZ"</span> /> +<<span class="tag">/figure</span>> </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 @@ <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bar-item"</span> <span class="atn">role</span>=<span class="atv">"progressbar"</span> <span class="atn">style</span>=<span class="atv">"width:25%;"</span> <span class="atn">aria-valuenow</span>=<span class="atv">"25"</span> <span class="atn">aria-valuemin</span>=<span class="atv">"0"</span> <span class="atn">aria-valuemax</span>=<span class="atv">"100"</span>><<span class="tag">/div</span>> <<span class="tag">/div</span>> +<span class="com"><!-- multi-bars --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bar"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bar-item tooltip"</span> <span class="atn">data-tooltip</span>=<span class="atv">"25%"</span> <span class="atn">style</span>=<span class="atv">"width:25%;"</span>>25%<<span class="tag">/div</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bar-item"</span> <span class="atn">style</span>=<span class="atv">"width:15%;background:#818bd5;"</span>>15%<<span class="tag">/div</span>> @@ -442,12 +454,14 @@ </section> <!-- slider bars example --> -<pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bar bar-slider"</span>> +<pre class="code" data-lang="HTML"><code><span class="com"><!-- slider --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bar bar-slider"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bar-item"</span> <span class="atn">role</span>=<span class="atv">"progressbar"</span> <span class="atn">style</span>=<span class="atv">"width:25%;"</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"bar-slider-btn"</span> <span class="atn">role</span>=<span class="atv">"slider"</span>><<span class="tag">/button</span>> <<span class="tag">/div</span>> <<span class="tag">/div</span>> +<span class="com"><!-- range slider --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bar bar-slider"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bar-item"</span> <span class="atn">role</span>=<span class="atv">"progressbar"</span> <span class="atn">style</span>=<span class="atv">"width:15%;"</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"bar-slider-btn"</span> <span class="atn">role</span>=<span class="atv">"slider"</span>><<span class="tag">/button</span>> @@ -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"> |