diff options
author | Yan Zhu <picturepan2@hotmail.com> | 2017-09-29 07:39:34 +0300 |
---|---|---|
committer | Yan Zhu <picturepan2@hotmail.com> | 2017-09-29 07:39:34 +0300 |
commit | 1c92a92bde8688bd0bdc4b62bf10882530241044 (patch) | |
tree | 77863d65bc2bea37cec149abc012f31b723fb1a3 /docs/components.html | |
parent | c85776603151d35904709277b0a89fcbc200bc87 (diff) |
Update the Docs
Diffstat (limited to 'docs/components.html')
-rw-r--r-- | docs/components.html | 182 |
1 files changed, 91 insertions, 91 deletions
diff --git a/docs/components.html b/docs/components.html index 53036ab..b29e04f 100644 --- a/docs/components.html +++ b/docs/components.html @@ -458,18 +458,18 @@ <span class="chip"> Bruce Banner </span> - <span class="chip"> + <div class="chip"> <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Avatar"> Thor Odinson - </span> - <span class="chip"> + </div> + <div class="chip"> <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Avatar"> Steve Rogers - </span> - <span class="chip"> + </div> + <div class="chip"> <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure> Tony Stark - </span> + </div> <span class="chip active"> Natasha Romanoff </span> @@ -537,11 +537,11 @@ <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-autocomplete-input form-input"</span>> <span class="com"><!-- autocomplete chips --></span> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-sm"</span> <span class="atn">alt</span>=<span class="atv">"Thor Odinson"</span>> Thor Odinson <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span> <span class="atn">aria-label</span>=<span class="atv">"Close"</span> <span class="atn">role</span>=<span class="atv">"button"</span>><<span class="tag">/a</span>> - <<span class="tag">/label</span>> + <<span class="tag">/div</span>> <span class="com"><!-- autocomplete real input box --></span> <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">placeholder</span>=<span class="atv">"typing here"</span>> @@ -1069,11 +1069,9 @@ <div class="column col-12"> <span class="chip"> Crime - <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a> </span> <span class="chip"> Drama - <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a> </span> <span class="chip"> Biography @@ -1085,18 +1083,18 @@ </span> </div> <div class="column col-12"> - <span class="chip"> + <div class="chip"> <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure> Tony Stark - </span> - <span class="chip"> + </div> + <div class="chip"> <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson"> Thor Odinson - </span> - <span class="chip"> + </div> + <div class="chip"> <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers"> Steve Rogers - </span> + </div> </div> </div> <div class="docs-note"> @@ -1104,16 +1102,18 @@ </div> <!-- chips --> -<pre class="code" data-lang="HTML"><code><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> - Crime +<pre class="code" data-lang="HTML"><code><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"chip"</span>>Crime<<span class="tag">/span</span>> + +<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> + Biography <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span> <span class="atn">aria-label</span>=<span class="atv">"Close"</span> <span class="atn">role</span>=<span class="atv">"button"</span>><<span class="tag">/a</span>> <<span class="tag">/span</span>> -<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-sm"</span>> Yan Zhu <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span> <span class="atn">aria-label</span>=<span class="atv">"Close"</span> <span class="atn">role</span>=<span class="atv">"button"</span>><<span class="tag">/a</span>> -<<span class="tag">/span</span>></code> +<<span class="tag">/div</span>></code> </pre> </div> @@ -1544,6 +1544,77 @@ </div> + <div id="navs" class="container"> + <h3 class="s-title"><a href="#navs" class="anchor" aria-hidden="true">#</a>Navs</h3> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <ul class="nav"> + <li class="nav-item"> + <a href="#nav">Elements</a> + </li> + <li class="nav-item active"> + <a href="#nav">Layout</a> + <ul class="nav"> + <li class="nav-item"> + <a href="#nav">Flexbox grid</a> + </li> + <li class="nav-item"> + <a href="#nav">Responsive</a> + </li> + <li class="nav-item"> + <a href="#nav">Navbar</a> + </li> + <li class="nav-item"> + <a href="#nav">Empty states</a> + </li> + </ul> + </li> + <li class="nav-item"> + <a href="#nav">Components</a> + </li> + <li class="nav-item"> + <a href="#nav">Utilities</a> + </li> + </ul> + </div> + </div> + <div class="docs-note"> + <p>Add a container element with the <code>nav</code> class. And add child elements with the <code>nav-item</code> class. The <code>nav-item</code> with the <code>active</code> class will be highlighted.</p> + </div> + +<!-- navs --> +<pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"nav"</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Elements<<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item active"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Layout<<span class="tag">/a</span>> + <<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"nav"</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Flexbox grid<<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Responsive<<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Navbar<<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Empty states<<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">/ul</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Components<<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Utilities<<span class="tag">/a</span>> + <<span class="tag">/li</span>> +<<span class="tag">/ul</span>> +</code></pre> + + </div> + <div id="pagination" class="container"> <h3 class="s-title"><a href="#pagination" class="anchor" aria-hidden="true">#</a>Pagination</h3> <div class="columns"> @@ -1836,77 +1907,6 @@ </div> - <div id="navs" class="container"> - <h3 class="s-title"><a href="#navs" class="anchor" aria-hidden="true">#</a>Navs</h3> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <ul class="nav"> - <li class="nav-item"> - <a href="#nav">Elements</a> - </li> - <li class="nav-item active"> - <a href="#nav">Layout</a> - <ul class="nav"> - <li class="nav-item"> - <a href="#nav">Flexbox grid</a> - </li> - <li class="nav-item"> - <a href="#nav">Responsive</a> - </li> - <li class="nav-item"> - <a href="#nav">Navbar</a> - </li> - <li class="nav-item"> - <a href="#nav">Empty states</a> - </li> - </ul> - </li> - <li class="nav-item"> - <a href="#nav">Components</a> - </li> - <li class="nav-item"> - <a href="#nav">Utilities</a> - </li> - </ul> - </div> - </div> - <div class="docs-note"> - <p>Add a container element with the <code>nav</code> class. And add child elements with the <code>nav-item</code> class. The <code>nav-item</code> with the <code>active</code> class will be highlighted.</p> - </div> - -<!-- navs --> -<pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"nav"</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Elements<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item active"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Layout<<span class="tag">/a</span>> - <<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"nav"</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Flexbox grid<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Responsive<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Navbar<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Empty states<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">/ul</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Components<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Utilities<<span class="tag">/a</span>> - <<span class="tag">/li</span>> -<<span class="tag">/ul</span>> -</code></pre> - - </div> - <div id="popovers" class="container"> <h3 class="s-title"><a href="#popovers" class="anchor" aria-hidden="true">#</a>Popovers</h3> <div class="docs-note"> |