mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-07-30 18:40:28 +02:00
Code Issues Releases Wiki Activity

Documented switch component

Browse Source 
Added usage documentation for switch component, only thing missing now is the addition of the customization documentation.
This commit is contained in:
Angelos Chalaris
2017-06-08 23:14:43 +03:00
parent f95c23f271
commit acf9e37fdb
27 changed files with 145 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
docs/quick_reference.html
View File

@@ -434,6 +434,28 @@
<li>Remember to use <code>&lt;label&gt;</code> elements for every single one of your checkbox or radio buttons</li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Switches <a href="https://codepen.io/chalarangelo/pen/rwxBPv" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre>&lt;div class=&quot;input-group&quot;&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;switch1&quot; tabindex=&quot;0&quot;&gt;
&lt;label for=&quot;switch1&quot; class=&quot;switch&quot;&gt;Checkbox switch&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;input-group&quot;&gt;
&lt;input type=&quot;radio&quot; id=&quot;radswitch1&quot; tabindex=&quot;0&quot; name=&quot;radio-group-1&quot;&gt;
&lt;label for=&quot;radswitch1&quot; class=&quot;switch&quot;&gt;Radio switch&lt;/label&gt;
&lt;/div&gt;</pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul style="text-align:justify">
<li>Use the same structure as checkboxes and radios, add <code>.switch</code> to the <code>&lt;label&gt;</code> element</li>
<li>Add <code><span class="fore-secondary">tabindex</span>=<span class="fore-primary">&quot;0&quot;</span></code> to the <code>&lt;input&gt;</code> element for accessibility</li>
<li>You can add two <code>&lt;label&gt;</code> elements inside the <code>.input-group</code>, the first one containing the text and the second one the <code>.switch</code> component to reverse the switch's layout</li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">