diff options
Add Filters code example #232
3 files changed, 29 insertions, 17 deletions
| -rw-r--r-- | docs/elements.html | 18 | ||||
| -rw-r--r-- | docs/experimentals.html | 24 | ||||
| -rw-r--r-- | docs/utilities.html | 4 |
diff --git a/docs/elements.html b/docs/elements.html index ba51922..a677bea 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -555,11 +555,7 @@ <div class="columns"> <div class="column col-xs-12"> <button class="btn loading-inline">default button</button> - </div> - <div class="column col-xs-12"> <button class="btn btn-primary">primary button</button> - </div> - <div class="column col-xs-12"> <button class="btn btn-link">link button</button> </div> </div> @@ -575,11 +571,7 @@ <div class="columns"> <div class="column col-xs-12"> <button class="btn disabled" tabindex="-1">default disabled</button> - </div> - <div class="column col-xs-12"> <button class="btn btn-primary" disabled tabindex="-1">primary disabled</button> - </div> - <div class="column col-xs-12"> <button class="btn btn-link" disabled tabindex="-1">link disabled</button> </div> </div> @@ -591,11 +583,7 @@ <div class="columns"> <div class="column col-xs-12"> <button class="btn loading">default button</button> - </div> - <div class="column col-xs-12"> <button class="btn btn-primary loading">primary button</button> - </div> - <div class="column col-xs-12"> <button class="btn btn-link loading">link button</button> </div> </div> @@ -617,11 +605,11 @@ <div class="columns"> <div class="column"> <button class="btn btn-primary btn-lg">large <i class="icon icon-arrow-down"></i></button> - <button class="btn btn-primary btn-lg">large</button> + <button class="btn btn-primary btn-lg">large button</button> <button class="btn btn-primary">normal <i class="icon icon-arrow-down"></i></button> - <button class="btn btn-primary">normal</button> + <button class="btn btn-primary">normal button</button> <button class="btn btn-primary btn-sm">small <i class="icon icon-arrow-down"></i></button> - <button class="btn btn-primary btn-sm">small</button> + <button class="btn btn-primary btn-sm">small button</button> </div> </div> <div class="docs-note"> diff --git a/docs/experimentals.html b/docs/experimentals.html index fa80a10..7008acb 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -648,6 +648,30 @@ </div> </div> +<!-- filters example --> +<pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter"</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"tag-all"</span> <span class="atn">class</span>=<span class="atv">"filter-tag"</span> <span class="atn">name</span>=<span class="atv">"filter-radio"</span> <span class="atn">hidden</span> <span class="atn">checked</span> /> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"tag-action"</span> <span class="atn">class</span>=<span class="atv">"filter-tag"</span> <span class="atn">name</span>=<span class="atv">"filter-radio"</span> <span class="atn">hidden</span> /> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"tag-roleplaying"</span> <span class="atn">class</span>=<span class="atv">"filter-tag"</span> <span class="atn">name</span>=<span class="atv">"filter-radio"</span> <span class="atn">hidden</span> /> + + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter-nav"</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"chip"</span> <span class="atn">for</span>=<span class="atv">"tag-all"</span>>All<<span class="tag">/label</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"chip"</span> <span class="atn">for</span>=<span class="atv">"tag-action"</span>>Action<<span class="tag">/label</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"chip"</span> <span class="atn">for</span>=<span class="atv">"tag-roleplaying"</span>>Roleplaying<<span class="tag">/label</span>> + <<span class="tag">/div</span>> + + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter-body"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter-item card"</span> <span class="atn">data-tag</span>=<span class="atv">"tag-action"</span>> + <span class="com"><!-- Filter item content --></span> + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter-item card"</span> <span class="atn">data-tag</span>=<span class="atv">"tag-roleplaying"</span>> + <span class="com"><!-- Filter item content --></span> + <<span class="tag">/div</span>> + <span class="com"><!-- Filter items --></span> + <<span class="tag">/div</span>> +<<span class="tag">/div</span>> +</code></pre> + </div> <div id="meters" class="container"> diff --git a/docs/utilities.html b/docs/utilities.html index 1f1b9d7..c6a4c3f 100644 --- a/docs/utilities.html +++ b/docs/utilities.html @@ -428,7 +428,7 @@ <div id="loading" class="container"> <h3 class="s-title"><a href="#loading" class="anchor" aria-hidden="true">#</a>Loading</h3> <div class="docs-note"> - <p>Loading indicator is used for loading or updating. Also, you can add the <code>loading</code> class to buttons for loading status. Add the <code>btn-lg</code> class for large size. </p> + <p>Loading indicator is used for loading or updating. Also, you can add the <code>loading</code> class to buttons for loading status.</p> </div> <div class="columns"> <div class="column col-12 text-center"> @@ -436,7 +436,7 @@ </div> </div> <div class="docs-note"> - <p>Add the <code>btn-lg</code> class for large size. </p> + <p>Add the <code>loading-lg</code> class for large size. </p> </div> <div class="columns"> <div class="column col-12 text-center"> |