2024-06-13 00:00:00 -04:00
< html >
< head >
< title > Pattern< / title >
< / head >
< body data-prismjs-copy-timeout = "1500" >
2024-07-11 21:05:34 -04:00
< h2 > What is it< / h2 >
2024-07-16 03:11:51 -04:00
< p > Switches are used to toggle application state between two mutually exclusive values. < / p >
2024-07-11 21:05:34 -04:00
< h2 > When to use it< / h2 >
2024-07-16 03:11:51 -04:00
< p > Use a switch when the user will see an immediate visible state change. Do not use a switch when the state change will affect future results. The user should not have to perform another action (search, save, etc) for the result to take affect. If the change in state does not take effect immediately, consider a checkbox. < / p >
2024-07-11 21:05:34 -04:00
< h2 > How to use it< / h2 >
2024-07-16 03:11:51 -04:00
< p > The switch label should describe what will happen when the switch is turned to the on state. Frontload labels with keywords. < / p >
< p > Include the CSS and JavaScript. An additional handler will need to be created for the actual state change. The CSS implements the visual design of the switch, which is based on the accessibility properties, which are implemented by the JavaScript.< / p >
2024-06-13 00:00:00 -04:00
< h2 > Example< / h2 >
< p class = "switch" >
2024-07-16 03:11:51 -04:00
< label for = "example-switch" > Switch label (states the on state)< / label > < span id = "example-switch" role = "switch" > < / span >
2024-06-13 00:00:00 -04:00
< / p >
< div class = "tab-group" id = "switches" >
2024-07-28 15:30:51 -04:00
< pre class = "language-html" tab = "html" > < span id = "example-id" role = "switch" > < / span > < / pre >
< pre class = "language-pug" tab = "pug" > span#example-id(role="switch")< / pre >
< pre class = "language-css" tab = "css" > [role=switch] {
2024-06-13 00:00:00 -04:00
display: -ms-inline-grid;
display: inline-grid;
2024-07-28 15:30:51 -04:00
border: 1px solid #2e51a1;
background-color: #d8d8d8;
2024-06-13 00:00:00 -04:00
border-radius: 0.75rem;
height: 1.5rem;
width: 3rem;
-webkit-transition: all 500ms;
transition: all 500ms;
}
[role=switch] > span {
display: inline-block;
background-color: white;
border-radius: 50%;
margin: 2%;
width: calc(1.5rem - 2%);
-webkit-transition: all 500ms;
transition: all 500ms;
}
[role=switch][aria-checked=true] {
2024-07-28 15:30:51 -04:00
background-color: #2e51a1;
2024-06-13 00:00:00 -04:00
}
[role=switch][aria-checked=true] > span {
margin-left: calc(1.5rem - 5%);
}< / pre >
2024-07-28 15:30:51 -04:00
< div tab = "scss" >
< pre class = "language-sass" > @import "[path to]/_switch";
@include switch;
< / pre >
< pre class = "language-sass" > //- DS2 core (c) 2024 Alexander McIlwraith
2024-07-11 21:05:34 -04:00
//- Licensed under CC BY-SA 4.0
@use "sass:math";
2024-06-13 00:00:00 -04:00
2024-07-16 03:11:51 -04:00
$switch-accent: #2e51a1 !default; // switch background when switched right (on/ true)
$switch-background: #d8d8d8 !default; // switch background when switched left (off / false)
$switch-color: white !default; // the colour of the switch
2024-06-13 00:00:00 -04:00
$switch-height: 1.5rem !default;
@mixin switch {
[role='switch'] {
display: inline-grid;
border: 1px solid $switch-accent;
background-color: $switch-background;
border-radius: math.div($switch-height, 2);
height: $switch-height;
width: #{$switch-height * 2};
transition: all 500ms;
> span {
display: inline-block;
background-color: white;
border-radius: 50%;
margin: 2%;
width: calc(#{$switch-height} - 2%);
transition: all 500ms;
}
& [aria-checked="true"] {
background-color: $switch-accent;
> span {
margin-left: calc(#{$switch-height} - 5%);
}
}
}
}< / pre >
2024-07-28 15:30:51 -04:00
< / div >
< div tab = "js" >
< pre class = "language-js" > // Note that switch is a reserved word.
import * as swtch from "[path to]]/_switch.js";
swtch.init();
< / pre >
< pre class = "language-js" > //- DS2 core (c) 2024 Alexander McIlwraith
2024-07-11 21:05:34 -04:00
//- Licensed under CC BY-SA 4.0
2024-06-13 00:00:00 -04:00
function flip(e) {
let sw = e.currentTarget;
switch(sw.getAttribute("aria-checked")) {
case "true":
sw.setAttribute("aria-checked", "false");
break;
case "false":
sw.setAttribute("aria-checked", "true");
break;
}
};
2024-07-14 16:18:52 -04:00
module.exports = {
init: (p = document) => {
p.querySelectorAll("[role='switch']").forEach((sw) => {
sw.innerHTML = "< span > < / span > ";
sw.setAttribute("aria-checked", "false");
sw.setAttribute("tabindex", "0");
sw.addEventListener("click", flip, false);
sw.addEventListener("keypress", flip, false);
})
2024-06-13 00:00:00 -04:00
}
}
2024-07-14 16:18:52 -04:00
< / pre >
2024-07-28 15:30:51 -04:00
< / div >
2024-06-13 00:00:00 -04:00
< / div >
< / body >
< / html >
