-
Notifications
You must be signed in to change notification settings - Fork 0
/
toggle.html
211 lines (197 loc) · 10.2 KB
/
toggle.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"><!--Meta data is page specific and should be assess and adjusted on a per page basis.-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortlink" href="https://beta.novascotia.ca/">
<title>Toggle switch - Forms & Services Building Blocks - Government of Nova Scotia</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"><!-- Include in all head tags -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script><!-- Include in all head tags -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script><!-- Include in all head tags -->
<script src="https://code.jquery.com/jquery-1.10.2.js"></script><!-- Not needed for service design, loads the navigation for this site -->
<link rel="stylesheet" media="all" href="https://novascotia.ca/clf/fonts/font-awesome/css/font-awesome.min.css"><!-- Include in all head tags -->
<link rel="stylesheet" media="all" href="css/saltire.css"><!-- Include in all head tags -->
<link rel="stylesheet" media="all" href="css/service-specific-styles.css"><!-- Not needed for services-->
<link rel="stylesheet" media="all" href="css/supplimentary-page-styles.css"><!-- Include in all head tags -->
<link rel="stylesheet" media="all" href="css/global-form-styles.css"><!-- Include only if forms are used-->
<link rel="stylesheet" media="all" href="css/radio-button.css"><!-- Include only if radios are used-->
<link rel="stylesheet" media="all" href="css/toggle.css"><!-- Include only if toggles are present-->
<link rel="stylesheet" media="all" href="css/checkboxes.css"><!-- Include only if checkboxes are used-->
<link rel="stylesheet" media="all" href="css/slider.css"><!-- Include only if sliders are used-->
<link rel="stylesheet" media="all" href="css/input-field-group.css"><!-- Include only if inputs are used-->
<link rel="stylesheet" media="all" href="css/select.css"><!-- Include only if selects are used-->
<link rel="stylesheet" media="all" href="css/buttons.css"><!-- Include only if buttons are used-->
<link rel="stylesheet" media="all" href="css/phase-banner.css"><!-- Include only if phase banner is used-->
<link rel="stylesheet" media="all" href="css/accordion.css"><!-- Include this only if needed -->
<link rel="stylesheet" media="all" href="css/panel.css"><!-- Include this only if needed -->
<link rel="stylesheet" media="all" href="css/date-picker.css"><!-- Include this only if needed -->
<!--[if lte IE 8]>
<script src="/core/assets/vendor/html5shiv/html5shiv.min.js?v=3.7.3"></script>
<![endif]--></head>
<body>
<div class="Site js-enabled" id="container">
<!-- -------------------------------------------------- START Skip Link --------------------------------------------------- -->
<nav class="skip-links" aria-label="Skip to main content">
<a href="#main" class="skip-to-link">Skip to main content</a>
</nav>
<!-- -------------------------------------------------- END Skip Link --------------------------------------------------- -->
<!-- -------------------------------------------------- START HEADER --------------------------------------------------- -->
<header>
<!-- START SALTIRE NS MOTHERSHIP RIBBON w FR -->
<nav id="navigation" class="ribbon" role="navigation" aria-label="Main navigation">
<div class="container">
<div class="row">
<div class="col-xs-6">
<a href="https://novascotia.ca/" hreflang="en"><img class="ribbon-img" src="https://novascotia.ca/clf/ignition/img/nsvip-en-white-flag.svg" alt="Province of Nova Scotia" /></a>
</div>
</div>
</div>
</nav>
<!-- END SALTIRE NS MOTHERSHIP RIBBON w FR -->
</header>
<!-- -------------------------------------------------- END HEADER --------------------------------------------------- -->
<!-- START Alpha Phase Banner -->
<div class="ns-phase-banner">
<div class="container">
<div class="row">
<div class="col">
<p class="ns-phase-banner__content">
<strong class="ns-tag ns-phase-banner__content__tag">
Alpha
</strong>
<span class="ns-phase-banner__text">
This is a new service that we're still developing. Try the service and <a href="https://github.com/connorscarolyns/service-pattern-library/issues">send us your comments and suggestions</a>. Your feedback will help make the service easier to use for everyone.
</span>
</p>
</div>
</div>
</div>
</div>
<!-- END Alpha Phase Banner -->
<!-- START Primary NAV -->
<div id="nav-placeholder4">
</div>
<script>
$(function(){
$("#nav-placeholder4").load("primary-nav.html");
});
</script>
<!-- End Primary NAV -->
<!--A basic page has a primary content area and an optional column for secondary information like related content.-->
<div class="container Site-content">
<main id="main"><!-- SEMANTIC MAIN TAG TO INDICATE PAGE CONTENT-->
<article><!-- SEMANTIC ARTICLE TAG TO GROUP RELATED CONTENT-->
<form name="parameters" method="GET" target="_parent">
<div class="row">
<div class="col-sm-3 col-xs-12 order-last order-sm-first">
<div id="nav-placeholder1">
</div>
<script>
$(function(){
$("#nav-placeholder1").load("nav-components.html");
});
</script>
</div>
<div class="col-sm-9 col-xs-12">
<h1>Toggle switch examples</h1><!-- SEMANTIC H1 TAG TO RELAY PAGE TITLE ONLY 1 PER PAGE-->
<section class="row">
<div class="col-md-12 col-xs-12">
<h2>Toggle switch</h2>
<p>Toggle switches should change the state of something and take immediate effect and should not require the user to click Save or Submit to apply the new state.</p>
<p>They are great used for on and off options.</p>
<div class="exampleDisplay">
<div class="ns-form-group ns-toggle--ui-switch">
<h3 class="ns-label-wrapper">
<div class="ns-label" for="event-name">
Automatic text notifications
</div>
</h3>
<input type="checkbox" id="demo5" class="ns-toggle__input">
<label class="ns-toggle__label" for="demo5">
<div class="ns-toggle__disabled-msg" data-checked="Pending" data-unchecked="Completed"></div>
<span class="ns-toggle__screenreader">Automatic text notifications</span>
<div class="ns-toggle-option-LEFT mr-2" aria-hidden="true">
On
</div>
<div class="ns-toggle-switch" role="presentation" aria-hidden="true"></div>
<div class="ns-toggle-option-RIGHT ml-2" aria-hidden="true">
Off
</div>
</label>
</div>
</div>
</div><!-- / example col -->
</section><!--/row-->
<section class="row">
<div class="col-md-12 col-xs-12">
<h2>Toggle switch disabled</h2>
<p>The disabled state of the toggle switch displays a mesage text depending on the toggle state.</p>
<div class="exampleDisplay">
<div class="ns-form-group ns-toggle--ui-switch">
<h3 class="ns-label-wrapper">
<div class="ns-label" for="event-name">
Automatic text notifications
</div>
</h3>
<input type="checkbox" id="demo6" class="ns-toggle__input" disabled>
<label class="ns-toggle__label" for="demo6">
<div class="ns-toggle__disabled-msg" data-checked="This switch is turned off and disabled" data-unchecked="This switch is turned on and disabled"></div>
<span class="ns-toggle__screenreader">View dashboard as activity stream</span>
<div class="ns-toggle-option-LEFT mr-2" aria-hidden="true">
On
</div>
<div class="ns-toggle-switch" role="presentation" aria-hidden="true"></div>
<div class="ns-toggle-option-RIGHT ml-2" aria-hidden="true">
Off
</div>
</label>
</fieldset>
<!-- end NS toggle -->
</div>
</div><!-- / example col -->
</section><!--/row-->
<section class="row">
<div class="col-md-12 col-xs-12">
<h2>Toggle switch with alert</h2>
<div class="exampleDisplay">
<div class="ns-form-group ns-fieldset-message-warning ns-toggle--ui-switch">
<h3 class="ns-label-wrapper">
<div class="ns-label" for="event-name">
Automatic text notifications
</div>
</h3>
<span id="changed-name-error" class="ns--message ns-warning-message field-validation-error has-warning">
<i class="fa fa-exclamation-triangle error-indicator errorAlert" aria-hidden="true"></i>
<span class="ns-visually-hidden">Error:</span> You will not be notified when changes occur
</span>
<input type="checkbox" id="demo7" class="ns-toggle__input" checked="checked">
<label class="ns-toggle__label" for="demo7">
<div class="ns-toggle__disabled-msg" data-checked="Pending" data-unchecked="Completed"></div>
<span class="ns-toggle__screenreader">Automatic text notifications</span>
<div class="ns-toggle-option-LEFT mr-2" aria-hidden="true">
On
</div>
<div class="ns-toggle-switch" role="presentation" aria-hidden="true"></div>
<div class="ns-toggle-option-RIGHT ml-2" aria-hidden="true">
Off
</div>
</label>
</div>
</div>
</div><!-- / example col -->
</section><!--/row-->
</div><!-- /col-xs-8 -->
</div><!--/row-->
</form>
</article>
</main>
</div><!-- /container -->
<!-- START FOOTER -->
<footer id="footer" class="footer" role="contentinfo">
<div class="container">
</div>
</footer>
<!-- END FOOTER -->
</div>
</body>
</html>