diff options
1 files changed, 146 insertions, 26 deletions
| -rw-r--r-- | docs/components.html | 172 |
diff --git a/docs/components.html b/docs/components.html index 8accdec..c21c079 100644 --- a/docs/components.html +++ b/docs/components.html @@ -116,7 +116,7 @@ Tony Stark <button class="btn btn-clear"></button> </div> - <div class="chip is-selected"> + <div class="chip active"> Natasha Romanoff <button class="btn btn-clear"></button> </div> @@ -148,7 +148,7 @@ <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers" /> </div> <div class="tile-content"> - Steve Rogers + <mark>S</mark>teve Roger<mark>s</mark> </div> </div> </a> @@ -158,7 +158,7 @@ <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #A2A8E1;"></figure> </div> <div class="tile-content"> - Tony Stark + Tony <mark>S</mark>tark </div> </div> </a> @@ -179,7 +179,7 @@ <span class="com"><!-- autocomplete input container --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-autocomplete-input"</span>> <span class="com"><!-- autocomplete chips --></span> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip is-selected"</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"</span> <span class="atn">alt</span>=<span class="atv">"Thor Odinson"</span> /> Thor Odinson <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span>><<span class="tag">/button</span>> @@ -439,16 +439,13 @@ </div> <div class="column col-6 col-xs-12"> <div class="card"> + <div class="card-image"> + <img class="img-responsive" src="img/osx-yosemite.jpg" /> + </div> <div class="card-header"> - <div class="tile tile-centered"> - <div class="tile-content"> - <div class="tile-title">Google I/O</div> - <div class="tile-meta">Software and hardware</div> - </div> - <div class="tile-action"> - <button class="btn btn-primary"><i class="icon icon-playlist_add"></i></button> - </div> - </div> + <button class="btn btn-primary float-right"><i class="icon icon-playlist_add"></i></button> + <div class="card-title">Google I/O</div> + <div class="card-meta">Software and hardware</div> </div> <div class="card-body"> An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond. @@ -485,7 +482,7 @@ <p><strong>Chips</strong> are complex entities in small blocks. </p> </section> <div class="columns"> - <div class="column col-9 col-xs-12"> + <div class="column col-12"> <div class="chip"> Crime <button class="btn btn-clear"></button> @@ -503,20 +500,20 @@ <button class="btn btn-clear"></button> </div> </div> - <div class="column col-9 col-xs-12"> + <div class="column col-12"> <div class="chip"> <figure class="avatar" data-initial="TS" style="background-color: #5764c6;"></figure> Tony Stark - <button class="btn btn-clear"></button> + <span class="chip-meta">Iron Man</span> </div> <div class="chip"> <img src="img/avatar-1.png" class="avatar" /> Thor Odinson - <button class="btn btn-clear"></button> </div> <div class="chip"> <img src="img/avatar-4.png" class="avatar" /> Steve Rogers + <span class="chip-meta">American Captain</span> </div> </div> </div> @@ -667,7 +664,7 @@ <p>A <strong>menu</strong> is a vertical list of links or buttons for actions and navigation.</p> </section> <div class="columns"> - <div class="column col-xs-6"> + <div class="column col-xs-12"> <ul class="menu"> <li class="menu-item"> <div class="tile tile-centered"> @@ -698,7 +695,7 @@ </ul> </div> - <div class="column col-xs-6"> + <div class="column col-xs-12"> <ul class="menu"> <li class="menu-header"> <span class="menu-header-text"> @@ -906,7 +903,7 @@ </section> <header id="breadcrumbs" class="text-center"><h4>Breadcrumbs</h4></header> <div class="columns"> - <div class="column col-9 col-sm-12"> + <div class="column col-6 col-sm-12"> <ul class="breadcrumb"> <li class="breadcrumb-item"> <a href="#breadcrumbs"> @@ -919,8 +916,21 @@ </a> </li> <li class="breadcrumb-item"> + Change avatar + </li> + </ul> + </div> + <div class="column col-6 col-sm-12"> + <ul class="breadcrumb"> + <li class="breadcrumb-item"> <a href="#breadcrumbs"> - Change avatar + Home + </a> + </li> + <li class="breadcrumb-item"> + Search result: + <a href="#breadcrumbs"> + Spectre </a> </li> </ul> @@ -944,16 +954,14 @@ <<span class="tag">/a</span>> <<span class="tag">/li</span>> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"breadcrumb-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - Change avatar - <<span class="tag">/a</span>> + Change avatar <<span class="tag">/li</span>> <<span class="tag">/ul</span>></code> </pre> <header id="tabs" class="text-center"><h4>Tabs</h4></header> <div class="columns"> - <div class="column col-xs-12"> + <div class="column col-6 col-xs-12"> <ul class="tab"> <li class="tab-item active"> <a href="#tabs"> @@ -970,9 +978,14 @@ Radio </a> </li> + <li class="tab-item"> + <a href="#tabs"> + Store + </a> + </li> </ul> </div> - <div class="column col-xs-12"> + <div class="column col-6 col-xs-12"> <ul class="tab tab-block"> <li class="tab-item active"> <a href="#tabs"> @@ -1067,6 +1080,58 @@ <<span class="tag">/ul</span>></code> </pre> + <div class="columns"> + <div class="column col-12"> + <ul class="tab"> + <li class="tab-item active"> + <a href="#tabs"> + 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"> + Store + </a> + </li> + <li class="tab-item tab-action"> + <div class="input-group input-inline"> + <input class="form-input input-sm" type="text" placeholder="search" /> + <button class="btn btn-primary btn-sm input-group-btn">Search</button> + </div> + </li> + </ul> + </div> + </div> + <section class="notes"> + <p>You could add a search box or buttons inside a tab. Add the class <code>tab-action</code> to the <code>tab-item</code>. </p> + </section> +<!-- tabs with badges example --> +<pre> +<code class="code lang-html" data-lang="HTML"><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"tab"</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item active"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"badge"</span> <span class="atn">data-badge</span>=<span class="atv">"9"</span>> + Music + <<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item tab-action"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"input-group input-inline"</span>> + <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input input-sm"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">placeholder</span>=<span class="atv">"search"</span> /> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary btn-sm input-group-btn"</span>>Search<<span class="tag">/button</span>> + <<span class="tag">/div</span>> + <<span class="tag">/li</span>> +<<span class="tag">/ul</span>></code> +</pre> + <header id="pagination" class="text-center"><h4>Pagination</h4></header> <div class="columns"> <div class="column col-xs-12"> @@ -1155,6 +1220,43 @@ <<span class="tag">/li</span>> <<span class="tag">/ul</span>></code> </pre> + <div class="columns"> + <div class="column col-12"> + <ul class="pagination"> + <li class="page-item page-prev"> + <a href="#pagination"> + <p class="page-item-meta">Previous</p> + <h3 class="page-item-title">Getting started</h3> + </a> + </li> + <li class="page-item page-next"> + <a href="#pagination"> + <p class="page-item-meta">Next</p> + <h3 class="page-item-title">Layout</h3> + </a> + </li> + </ul> + </div> + </div> + <div class="notes"> + <p>You could use previous and next pagination to navigate. </p> + </div> +<!-- pagination example --> +<pre> +<code class="code lang-html" data-lang="HTML"><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"pagination"</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item page-prev"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> + <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"page-item-meta"</span>>Previous<<span class="tag">/p</span>> + <<span class="tag">h3</span> <span class="atn">class</span>=<span class="atv">"page-item-title"</span>>Getting started<<span class="tag">/h3</span>> + <<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item page-next"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> + <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"page-item-meta"</span>>Next<<span class="tag">/p</span>> + <<span class="tag">h3</span> <span class="atn">class</span>=<span class="atv">"page-item-title"</span>>Layout<<span class="tag">/h3</span>> + <<span class="tag">/a</span>> + <<span class="tag">/li</span>></code> +</pre> <header id="navs" class="text-center"><h4>Navs</h4></header> <div class="columns"> @@ -1475,6 +1577,24 @@ <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn tooltip tooltip-right"</span> <span class="atn">data-tooltip</span>=<span class="atv">"Lorem ipsum dolor sit amet"</span>>right tooltip<<span class="tag">/button</span>></code> </pre> </section> + + <section class="container"> + <div class="divider"></div> + <ul class="pagination"> + <li class="page-item page-prev"> + <a href="layout.html"> + <p class="page-item-meta">Previous</p> + <h3 class="page-item-title">Layout</h3> + </a> + </li> + <li class="page-item page-next"> + <a href="utilities.html"> + <p class="page-item-meta">Next</p> + <h3 class="page-item-title">Utilities</h3> + </a> + </li> + </ul> + </section> </div> </section> </section> |