Skip to content

Commit

Permalink
Add Filters code example picturepan2#232
Browse files Browse the repository at this point in the history
  • Loading branch information
@picturepan2
picturepan2 committed Aug 16, 2017
1 parent afb32d1 commit f9e4d64
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 17 deletions.
18 changes: 3 additions & 15 deletions docs/elements.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -555,11 +555,7 @@ <h3 class="s-title"><a href="#buttons" class="anchor" aria-hidden="true">#</a>Bu
<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>
Expand All @@ -575,11 +571,7 @@ <h3 class="s-title"><a href="#buttons" class="anchor" aria-hidden="true">#</a>Bu
<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>
Expand All @@ -591,11 +583,7 @@ <h3 class="s-title"><a href="#buttons" class="anchor" aria-hidden="true">#</a>Bu
<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>
Expand All @@ -617,11 +605,11 @@ <h4 class="s-subtitle">Button sizes</h4>
<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">
Expand Down
24 changes: 24 additions & 0 deletions docs/experimentals.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -648,6 +648,30 @@ <h3 class="s-title"><a href="#filters" class="anchor" aria-hidden="true">#</a>Fi
</div>
</div>

<!-- filters example -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;filter&quot;</span>&gt;
&lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;radio&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;tag-all&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;filter-tag&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;filter-radio&quot;</span> <span class="atn">hidden</span> <span class="atn">checked</span> /&gt;
&lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;radio&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;tag-action&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;filter-tag&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;filter-radio&quot;</span> <span class="atn">hidden</span> /&gt;
&lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;radio&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;tag-roleplaying&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;filter-tag&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;filter-radio&quot;</span> <span class="atn">hidden</span> /&gt;

&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;filter-nav&quot;</span>&gt;
&lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;tag-all&quot;</span>&gt;All&lt;<span class="tag">/label</span>&gt;
&lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;tag-action&quot;</span>&gt;Action&lt;<span class="tag">/label</span>&gt;
&lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;tag-roleplaying&quot;</span>&gt;Roleplaying&lt;<span class="tag">/label</span>&gt;
&lt;<span class="tag">/div</span>&gt;

&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;filter-body&quot;</span>&gt;
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;filter-item card&quot;</span> <span class="atn">data-tag</span>=<span class="atv">&quot;tag-action&quot;</span>&gt;
<span class="com">&lt;!-- Filter item content --&gt;</span>
&lt;<span class="tag">/div</span>&gt;
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;filter-item card&quot;</span> <span class="atn">data-tag</span>=<span class="atv">&quot;tag-roleplaying&quot;</span>&gt;
<span class="com">&lt;!-- Filter item content --&gt;</span>
&lt;<span class="tag">/div</span>&gt;
<span class="com">&lt;!-- Filter items --&gt;</span>
&lt;<span class="tag">/div</span>&gt;
&lt;<span class="tag">/div</span>&gt;
</code></pre>

</div>

<div id="meters" class="container">
Expand Down
4 changes: 2 additions & 2 deletions docs/utilities.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -428,15 +428,15 @@ <h3 class="s-title"><a href="#divider" class="anchor" aria-hidden="true">#</a>Di
<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">
<div class="loading"></div>
</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">
Expand Down

0 comments on commit f9e4d64

Please sign in to comment.