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-14 16:18:52 -04:00
|
|
|
<p>Switches are used to toggle application state between two mutually exlusive values. </p>
|
2024-07-11 21:05:34 -04:00
|
|
|
<h2>When to use it</h2>
|
|
|
|
|
<h2>How to use it</h2>
|
2024-06-13 00:00:00 -04:00
|
|
|
<h2>Example</h2>
|
|
|
|
|
<p class="switch">
|
|
|
|
|
<label for="example-switch">Switch label</label><span id="example-switch" role="switch"></span>
|
|
|
|
|
</p>
|
|
|
|
|
<div class="tab-group" id="switches">
|
|
|
|
|
<pre class="language-html" data-tab="html"><span id="example-id" role="switch"></span></pre>
|
|
|
|
|
<pre class="language-pug" data-tab="pug">span#example-id(role="switch")</pre>
|
|
|
|
|
<pre class="language-css" data-tab="css">[role=switch] {
|
|
|
|
|
display: -ms-inline-grid;
|
|
|
|
|
display: inline-grid;
|
2024-07-12 23:35:29 -04:00
|
|
|
border: 1px solid var(--colour-blue);
|
|
|
|
|
background-color: var(--colour-grey-xl);
|
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-12 23:35:29 -04:00
|
|
|
background-color: var(--colour-blue);
|
2024-06-13 00:00:00 -04:00
|
|
|
}
|
|
|
|
|
[role=switch][aria-checked=true] > span {
|
|
|
|
|
margin-left: calc(1.5rem - 5%);
|
|
|
|
|
}</pre>
|
2024-07-11 21:05:34 -04:00
|
|
|
<pre class="language-css" data-tab="scss">//- DS2 core (c) 2024 Alexander McIlwraith
|
|
|
|
|
//- Licensed under CC BY-SA 4.0
|
|
|
|
|
|
|
|
|
|
@use "sass:math";
|
2024-06-13 00:00:00 -04:00
|
|
|
|
2024-07-12 23:35:29 -04:00
|
|
|
$switch-accent: var(--colour-blue) !default; // switch background when switched right (on/ true)
|
|
|
|
|
$switch-background: var(--colour-grey-xl) !default; // switch background when switched left (off / false)
|
|
|
|
|
$switch-color: var(--colour-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-11 21:05:34 -04:00
|
|
|
<pre class="language-js" data-tab="js">//- DS2 core (c) 2024 Alexander McIlwraith
|
|
|
|
|
//- 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-06-13 00:00:00 -04:00
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
