js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 20:19:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move to correct position

Browse Source
This commit is contained in:
Cory LaViska
2017-07-31 11:36:00 -04:00
parent 88224c5c05
commit 2709610f20
1 changed files with 86 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
index.html
View File

@@ -944,6 +944,92 @@ PRINT "SHOELACE IS AWESOME"
<div class="loader-bg loader-bg-big"></div>
</div>
<!--********************************************************************************************
* Switches
*********************************************************************************************-->
<h2 id="switches">
<a class="bookmark" href="#switches">#</a>
Switches
</h2>
<p>
Switches provide an alternative to standard checkboxes. Many people find them more intuitive
and easier to use, especially on mobile devices. Shoelace provides a way to create beautiful,
animated switches with pure CSS.
</p>
<p>
Because this is a pure CSS solution, there are a couple important things to remember:
</p>
<ul>
<li>
Each switch must have a unique <code>id</code>
</li>
<li>
The <code>&lt;label&gt;</code> must have a <code>for</code> attribute that references the switch <code>id</code>
</li>
<li>
The <code>&lt;label&gt;</code> must come <strong>after</strong> the checkbox, otherwise the
control won’t render
</li>
</ul>
<p>
The markup for a switch looks like this:
</p>
<pre>
&lt;span class=&quot;switch&quot;&gt;
&lt;input type=&quot;checkbox&quot; class=&quot;switch&quot; id=&quot;switch-1&quot;&gt;
&lt;label for=&quot;switch-1&quot;&gt;Option 1&lt;/label&gt;
&lt;/span&gt;
&lt;span class=&quot;switch&quot;&gt;
&lt;input type=&quot;checkbox&quot; class=&quot;switch&quot; id=&quot;switch-2&quot; checked&gt;
&lt;label for=&quot;switch-2&quot;&gt;Option 2&lt;/label&gt;
&lt;/span&gt;
</pre>
<div class="input-single">
<span class="switch">
<input type="checkbox" class="switch" id="switch-1">
<label for="switch-1">Option 1</label>
</span>
<span class="switch">
<input type="checkbox" class="switch" id="switch-2" checked>
<label for="switch-2">Option 2</label>
</span>
</div>
<p>
Use the <code>switch-small</code> and <code>switch-big</code> modifiers to change the size of
a switch.
</p>
<div class="input-single">
<span class="switch switch-small">
<input type="checkbox" class="switch" id="switch-3">
<label for="switch-3">Small</label>
</span>
<span class="switch">
<input type="checkbox" class="switch" id="switch-4">
<label for="switch-4">Normal</label>
</span>
<span class="switch switch-big">
<input type="checkbox" class="switch" id="switch-5">
<label for="switch-5">Big</label>
</span>
</div>
<p>
Disabled switches are dimmed out. To disable a switch, add the <code>disabled</code> attribute
to the checkbox (not the wrapper).
</p>
<div class="input-single">
<span class="switch">
<input type="checkbox" class="switch" disabled id="switch-6">
<label for="switch-6">Disabled</label>
</span>
</div>
<!--********************************************************************************************
* Tabs
*********************************************************************************************-->
@@ -1172,92 +1258,6 @@ PRINT "SHOELACE IS AWESOME"
</tbody>
</table>
<!--********************************************************************************************
* Switches
*********************************************************************************************-->
<h2 id="switches">
<a class="bookmark" href="#switches">#</a>
Switches
</h2>
<p>
Switches provide an alternative to standard checkboxes. Many people find them more intuitive
and easier to use, especially on mobile devices. Shoelace provides a way to create beautiful,
animated switches with pure CSS.
</p>
<p>
Because this is a pure CSS solution, there are a couple important things to remember:
</p>
<ul>
<li>
Each switch must have a unique <code>id</code>
</li>
<li>
The <code>&lt;label&gt;</code> must have a <code>for</code> attribute that references the switch <code>id</code>
</li>
<li>
The <code>&lt;label&gt;</code> must come <strong>after</strong> the checkbox, otherwise the
control won’t render
</li>
</ul>
<p>
The markup for a switch looks like this:
</p>
<pre>
&lt;span class=&quot;switch&quot;&gt;
&lt;input type=&quot;checkbox&quot; class=&quot;switch&quot; id=&quot;switch-1&quot;&gt;
&lt;label for=&quot;switch-1&quot;&gt;Option 1&lt;/label&gt;
&lt;/span&gt;
&lt;span class=&quot;switch&quot;&gt;
&lt;input type=&quot;checkbox&quot; class=&quot;switch&quot; id=&quot;switch-2&quot; checked&gt;
&lt;label for=&quot;switch-2&quot;&gt;Option 2&lt;/label&gt;
&lt;/span&gt;
</pre>
<div class="input-single">
<span class="switch">
<input type="checkbox" class="switch" id="switch-1">
<label for="switch-1">Option 1</label>
</span>
<span class="switch">
<input type="checkbox" class="switch" id="switch-2" checked>
<label for="switch-2">Option 2</label>
</span>
</div>
<p>
Use the <code>switch-small</code> and <code>switch-big</code> modifiers to change the size of
a switch.
</p>
<div class="input-single">
<span class="switch switch-small">
<input type="checkbox" class="switch" id="switch-3">
<label for="switch-3">Small</label>
</span>
<span class="switch">
<input type="checkbox" class="switch" id="switch-4">
<label for="switch-4">Normal</label>
</span>
<span class="switch switch-big">
<input type="checkbox" class="switch" id="switch-5">
<label for="switch-5">Big</label>
</span>
</div>
<p>
Disabled switches are dimmed out. To disable a switch, add the <code>disabled</code> attribute
to the checkbox (not the wrapper).
</p>
<div class="input-single">
<span class="switch">
<input type="checkbox" class="switch" disabled id="switch-6">
<label for="switch-6">Disabled</label>
</span>
</div>
<!--********************************************************************************************
* Utilities
*********************************************************************************************-->