This article gives you all you need to implement v2.0 Gaia-style switches in your own app.
Live sample
The following gives you an idea of what the rendered switches would look like:
Code
Here is the code you'll need.
CSS
<link href="(your styles folder)/style/switches.css" rel="stylesheet" type="text/css">
The CSS can be found in the Gaia project 2.0 branch under shared/style/switches.css. Copy this into your own project, along with the associated resources.
HTML
Note: The CSS inside the <style> element isn't needed for the implementation: it is just for the purposes of this example.
<!doctype html>
<html>
<head>
<link href="https://mdn.github.io/gaia-2.0-bb/switches.css" rel="stylesheet" type="text/css">
<link href="https://gaia-components.github.io/gaia-icons/gaia-icons-embedded.css" rel="stylesheet" type="text/css">
<style>
html, body {
margin: 0;
padding: 0;
font-size: 10px;
font-family: sans-serif;
background-color: #fff;
}
body {
background: none;
}
h2.bb-docs {
font-size: 1.8rem;
font-weight: lighter;
color: #666;
margin: -1px 0 0;
background-color: #f5f5f5;
padding: 0.4rem 0.4rem 0.4rem 3rem;
border: solid 1px #e8e8e8;
}
label {
margin-left: 2rem;
}
</style>
</head>
<body role="application">
<p dir="ltr">
<label>
<input type="checkbox"
onchange="document.documentElement.dir = this.checked ? 'rtl' : 'ltr'">
RTL mode
</label>
</p>
<h2 class="bb-docs">Checkbox, commonly used in edit mode</h2>
<label class="pack-checkbox">
<input type="checkbox" checked>
<span></span>
</label>
<label class="pack-checkbox">
<input type="checkbox">
<span></span>
</label>
<label class="pack-checkbox danger">
<input type="checkbox" checked>
<span></span>
</label>
<label class="pack-checkbox danger">
<input type="checkbox">
<span></span>
</label>
<h2 class="bb-docs">Radio, commonly used in settings</h2>
<label class="pack-radio">
<input type="radio" name="example" checked>
<span></span>
</label>
<label class="pack-radio">
<input type="radio" name="example">
<span></span>
</label>
<label class="pack-radio danger">
<input type="radio" name="example2" checked>
<span></span>
</label>
<label class="pack-radio danger">
<input type="radio" name="example2">
<span></span>
</label>
<h2 class="bb-docs">Switch, commonly used in settings</h2>
<label class="pack-switch">
<input type="checkbox" checked>
<span></span>
</label>
<label class="pack-switch">
<input type="checkbox">
<span></span>
</label>
</body>
</html>
Document Tags and Contributors
Tags:
Contributors to this page:
chrisdavidmills,
chrisdavidmills-github
Last updated by:
chrisdavidmills,