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,