Update switch - set to done

This commit is contained in:
2024-07-16 03:11:51 -04:00
parent fa708175b7
commit ce98e0c488
6 changed files with 30 additions and 21 deletions

View File

@@ -27,7 +27,7 @@
},
{
name: "switch",
status: "in-progress",
status: "complete",
core: true,
},
{

View File

@@ -5,20 +5,26 @@ extends ../../../core/_master-pattern
block content
+h(0)
p Switches are used to toggle application state between two mutually exlusive values.
p Switches are used to toggle application state between two mutually exclusive values.
+h(1)
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.
+h(2)
p The switch label should describe what will happen when the switch is turned to the on state. Frontload labels with keywords.
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.
h2 Example
p.switch
label(for="example-switch") Switch label
label(for="example-switch") Switch label (states the on state)
span#example-switch(role="switch")
div#switches.tab-group
pre.language-html(data-tab="html")
include _switch.pug
pre.language-pug(data-tab="pug")
include switch.pug
include _switch.pp
pre.language-css(data-tab="css")
include switch.css
pre.language-css(data-tab="scss")