mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
227 lines
9.3 KiB
HTML
227 lines
9.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<meta name="description" content="These pure CSS switches can be used as a checkbox replacement.">
|
||
<link rel="icon" href="../source/img/favicon.png">
|
||
<link rel="stylesheet" href="../dist/shoelace.css">
|
||
<link rel="stylesheet" href="../source/css/_docs.css">
|
||
<link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
|
||
<title>Switches</title>
|
||
</head>
|
||
<body>
|
||
|
||
<header id="head" class="text-center">
|
||
<h1>
|
||
<a href="../index.html">
|
||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||
</a>
|
||
</h1>
|
||
<p class="text-secondary text-small">
|
||
A back to the basics CSS starter kit. For when you don’t need the whole boot.
|
||
</p>
|
||
</header>
|
||
|
||
<main id="wrap">
|
||
<nav id="nav">
|
||
<a href="installing.html">Installing</a>
|
||
<a href="customizing.html">Customizing</a>
|
||
<a href="content.html">Content</a>
|
||
<a href="alerts.html">Alerts</a>
|
||
<a href="badges.html">Badges</a>
|
||
<a href="buttons.html">Buttons</a>
|
||
<a href="dropdowns.html">Dropdowns</a>
|
||
<a href="forms.html">Forms</a>
|
||
<a href="loaders.html">Loaders</a>
|
||
<a href="progress-bars.html">Progress Bars</a>
|
||
<a href="switches.html">Switches</a>
|
||
<a href="tabs.html">Tabs</a>
|
||
<a href="tables.html">Tables</a>
|
||
<a href="utilities.html">Utilities</a>
|
||
<a href="grid-system.html">Grid System</a>
|
||
<a href="icons.html">Icons</a>
|
||
<a href="browser-support.html">Browser Support</a>
|
||
<a href="attribution.html">Attribution</a>
|
||
</nav>
|
||
|
||
<div id="content">
|
||
<h2 id="switches">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><label></code> must have a <code>for</code> attribute that references the switch <code>id</code></li>
|
||
<li>The <code><label></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><code class="lang-html"><span class="switch">
|
||
<input type="checkbox" class="switch" id="switch-1">
|
||
<label for="switch-1">Switch 1</label>
|
||
</span>
|
||
|
||
<span class="switch">
|
||
<input type="checkbox" class="switch" id="switch-2" checked>
|
||
<label for="switch-2">Switch 2</label>
|
||
</span>
|
||
</code></pre>
|
||
<div class="input-single">
|
||
<span class="switch">
|
||
<input type="checkbox" class="switch" id="switch-1">
|
||
<label for="switch-1">Switch 1</label>
|
||
</span>
|
||
|
||
<span class="switch">
|
||
<input type="checkbox" class="switch" id="switch-2" checked>
|
||
<label for="switch-2">Switch 2</label>
|
||
</span>
|
||
</div>
|
||
|
||
<p>Use the <code>switch-[xs|sm|lg|xl]</code> modifiers to change the size of a switch.</p>
|
||
<pre><code class="lang-html"><span class="switch switch-xs">
|
||
<input type="checkbox" class="switch" id="switch-xs">
|
||
<label for="switch-xs">XS</label>
|
||
</span>
|
||
|
||
<span class="switch switch-sm">
|
||
<input type="checkbox" class="switch" id="switch-sm">
|
||
<label for="switch-sm">SM</label>
|
||
</span>
|
||
|
||
<span class="switch">
|
||
<input type="checkbox" class="switch" id="switch-default">
|
||
<label for="switch-default">Default</label>
|
||
</span>
|
||
|
||
<span class="switch switch-lg">
|
||
<input type="checkbox" class="switch" id="switch-lg">
|
||
<label for="switch-lg">LG</label>
|
||
</span>
|
||
|
||
<span class="switch switch-xl">
|
||
<input type="checkbox" class="switch" id="switch-xl">
|
||
<label for="switch-xl">XL</label>
|
||
</span>
|
||
</code></pre>
|
||
<div class="input-single">
|
||
<span class="switch switch-xs">
|
||
<input type="checkbox" class="switch" id="switch-xs">
|
||
<label for="switch-xs">XS</label>
|
||
</span>
|
||
|
||
<span class="switch switch-sm">
|
||
<input type="checkbox" class="switch" id="switch-sm">
|
||
<label for="switch-sm">SM</label>
|
||
</span>
|
||
|
||
<span class="switch">
|
||
<input type="checkbox" class="switch" id="switch-default">
|
||
<label for="switch-default">Default</label>
|
||
</span>
|
||
|
||
<span class="switch switch-lg">
|
||
<input type="checkbox" class="switch" id="switch-lg">
|
||
<label for="switch-lg">LG</label>
|
||
</span>
|
||
|
||
<span class="switch switch-xl">
|
||
<input type="checkbox" class="switch" id="switch-xl">
|
||
<label for="switch-xl">XL</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>
|
||
<pre><code class="lang-html"><span class="switch">
|
||
<input type="checkbox" class="switch" disabled id="switch-disabled">
|
||
<label for="switch-disabled">Disabled</label>
|
||
</span>
|
||
</code></pre>
|
||
<div class="input-single">
|
||
<span class="switch">
|
||
<input type="checkbox" class="switch" disabled id="switch-disabled">
|
||
<label for="switch-disabled">Disabled</label>
|
||
</span>
|
||
</div>
|
||
|
||
|
||
<h3 id="variations">Variations</h3>
|
||
<p>Use the <code>switch-*</code> modifier to create variations.</p>
|
||
<pre><code class="lang-html"><span class="switch switch-secondary">...</span>
|
||
<span class="switch switch-success">...</span>
|
||
<span class="switch switch-info">...</span>
|
||
<span class="switch switch-warning">...</span>
|
||
<span class="switch switch-danger">...</span>
|
||
<span class="switch switch-light">...</span>
|
||
<span class="switch switch-dark">...</span>
|
||
</code></pre>
|
||
<p><span class="switch switch-secondary">
|
||
<input type="checkbox" class="switch" id="variation-secondary" checked>
|
||
<label for="variation-secondary">Secondary</label>
|
||
</span></p>
|
||
<p><span class="switch switch-success">
|
||
<input type="checkbox" class="switch" id="variation-success" checked>
|
||
<label for="variation-success">Success</label>
|
||
</span></p>
|
||
<p><span class="switch switch-info">
|
||
<input type="checkbox" class="switch" id="variation-info" checked>
|
||
<label for="variation-info">Info</label>
|
||
</span></p>
|
||
<p><span class="switch switch-warning">
|
||
<input type="checkbox" class="switch" id="variation-warning" checked>
|
||
<label for="variation-warning">Warning</label>
|
||
</span></p>
|
||
<p><span class="switch switch-danger">
|
||
<input type="checkbox" class="switch" id="variation-danger" checked>
|
||
<label for="variation-danger">Danger</label>
|
||
</span></p>
|
||
<p><span class="switch switch-light">
|
||
<input type="checkbox" class="switch" id="variation-light" checked>
|
||
<label for="variation-light">Light</label>
|
||
</span></p>
|
||
<p><span class="switch switch-dark">
|
||
<input type="checkbox" class="switch" id="variation-dark" checked>
|
||
<label for="variation-dark">Dark</label>
|
||
</span></p>
|
||
|
||
</div>
|
||
</main>
|
||
|
||
<footer id="foot">
|
||
<a href="../index.html">
|
||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||
</a>
|
||
<p class="text-small text-secondary">
|
||
Shoelace.css 1.0.0-beta16 ·
|
||
© A Beautiful Site, LLC
|
||
</p>
|
||
|
||
<p class="mar-y-sm text-center">
|
||
<a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
|
||
<a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
|
||
<a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
|
||
<a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
|
||
</p>
|
||
<p>
|
||
<a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
|
||
<a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
|
||
</p>
|
||
</footer>
|
||
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
|
||
<script src="../dist/shoelace.js"></script>
|
||
<script>
|
||
$(function() {
|
||
// Highlight current nav item
|
||
$('#nav a').each(function() {
|
||
if(this.pathname === location.pathname) {
|
||
$(this).addClass('current');
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||
</body>
|
||
</html>
|