Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit 625aa51

Browse files
amsheehanamsheehan
authored
feat(switch): Implement css switch component (#235)
1 parent eaeb2de commit 625aa51

File tree

10 files changed

+425
-0
lines changed

10 files changed

+425
-0
lines changed

‎demos/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
<li><a href="list.html">List</a></li>
3939
<li><a href="select.html">Select</a></li>
4040
<li><a href="simple-menu.html">Menu (simple)</a></li>
41+
<li><a href="switch.html">Switch</a></li>
4142
<li><a href="radio.html">Radio</a></li>
4243
<li><a href="ripple.html">Ripple</a></li>
4344
<li><a href="snackbar.html">Snackbar</a></li>

‎demos/switch.html

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Copyright 2016 Google Inc. All rights reserved.
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
https://www.apache.org/licenses/LICENSE-2.0
8+
Unless required by applicable law or agreed to in writing, software
9+
distributed under the License is distributed on an "AS IS" BASIS,
10+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11+
See the License for the specific language governing permissions and
12+
limitations under the License
13+
-->
14+
<html>
15+
<head>
16+
<meta charset="utf-8">
17+
<title>MDC Switch Demo</title>
18+
<meta name="viewport" content="width=device-width, initial-scale=1">
19+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
20+
<style>
21+
/* Make the demo look a little bit better */
22+
section {
23+
margin-bottom: 0.5rem;
24+
margin: 16px;
25+
padding: 40px;
26+
background-color: #eee;
27+
}
28+
29+
h2 {
30+
margin: 0;
31+
margin-bottom: 20px;
32+
}
33+
34+
label {
35+
font-size: 16px;
36+
}
37+
38+
.mdc-theme--dark {
39+
background-color: #333;
40+
}
41+
42+
.mdc-theme--dark > h2 {
43+
color: white;
44+
}
45+
46+
.mdc-theme--dark > label {
47+
color: white;
48+
}
49+
</style>
50+
<script src="assets/material-components-web.css.js" charset="utf-8"></script>
51+
</head>
52+
<body class="mdc-typography">
53+
<main>
54+
<h1>MDC Switch - CSS Only</h1>
55+
56+
<section>
57+
<h2>Switch on Light Theme</h2>
58+
<div class="mdc-switch">
59+
<input type="checkbox" id="basic-switch" class="mdc-switch__native-control" />
60+
<div class="mdc-switch__background">
61+
<div class="mdc-switch__knob"></div>
62+
</div>
63+
</div>
64+
<label for="basic-switch" class="mdc-switch-label">off/on</label>
65+
</section>
66+
<section>
67+
<h2>Switch on Light Theme - Disabled</h2>
68+
<div class="mdc-switch">
69+
<input type="checkbox"
70+
id="basic-switch--disabled"
71+
class="mdc-switch__native-control"
72+
disabled />
73+
<div class="mdc-switch__background">
74+
<div class="mdc-switch__knob"></div>
75+
</div>
76+
</div>
77+
<label for="basic-switch--disabled" class="mdc-switch-label">off/on</label>
78+
</section>
79+
80+
<section class="mdc-theme--dark">
81+
<h2>Switch on Dark Theme</h2>
82+
<div class="mdc-switch">
83+
<input type="checkbox"
84+
id="basic-switch--dark"
85+
class="mdc-switch__native-control"/>
86+
<div class="mdc-switch__background">
87+
<div class="mdc-switch__knob"></div>
88+
</div>
89+
</div>
90+
<label for="basic-switch--dark" class="mdc-switch-label">off/on</label>
91+
</section>
92+
93+
<section class="mdc-theme--dark">
94+
<h2>Switch on Light Theme - Disabled</h2>
95+
<div class="mdc-switch">
96+
<input type="checkbox"
97+
id="basic-switch--dark--disabled"
98+
class="mdc-switch__native-control"
99+
disabled />
100+
<div class="mdc-switch__background">
101+
<div class="mdc-switch__knob"></div>
102+
</div>
103+
</div>
104+
<label for="basic-switch--dark--disabled" class="mdc-switch-label">off/on</label>
105+
</section>
106+
107+
</main>
108+
<script src="assets/material-components-web.js" charset="utf-8"></script>
109+
</body>
110+
</html>

‎packages/material-components-web/material-components-web.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
@import "@material/ripple/mdc-ripple";
3131
@import "@material/select/mdc-select";
3232
@import "@material/snackbar/mdc-snackbar";
33+
@import "@material/switch/mdc-switch";
3334
@import "@material/textfield/mdc-textfield";
3435
@import "@material/theme/mdc-theme";
3536
@import "@material/typography/mdc-typography";

‎packages/material-components-web/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"@material/ripple": "^0.1.2",
2828
"@material/select": "^0.2.0",
2929
"@material/snackbar": "^0.1.2",
30+
"@material/switch": "^0.1.0",
3031
"@material/textfield": "^0.2.0",
3132
"@material/theme": "^0.1.1",
3233
"@material/typography": "^0.1.1"

‎packages/mdc-switch/README.md

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# MDC Switch
2+
3+
The MDC Switch component is a spec-aligned switch component adhering to the
4+
[Material Design Switch requirements](https://material.io/guidelines/components/selection-controls.html#selection-controls-switch).
5+
It works without JavaScript.
6+
7+
## Installation
8+
9+
```
10+
npm install --save @material/switch
11+
```
12+
13+
## Usage
14+
15+
```html
16+
<div class="mdc-switch">
17+
<input type="checkbox" id="basic-switch" class="mdc-switch__native-control" />
18+
<div class="mdc-switch__background">
19+
<div class="mdc-switch__knob"></div>
20+
</div>
21+
</div>
22+
<label for="basic-switch" class="mdc-switch-label">off/on</label>
23+
```
24+
25+
### Disabled
26+
```html
27+
<div class="mdc-switch mdc-switch--disabled">
28+
<input type="checkbox" id="another-basic-switch" class="mdc-switch__native-control" disabled />
29+
<div class="mdc-switch__background">
30+
<div class="mdc-switch__knob"></div>
31+
</div>
32+
</div>
33+
<label for="another-basic-switch" class="mdc-switch-label">off/on</label>
34+
```
35+
36+
## Classes
37+
38+
### Block
39+
40+
The block class is `mdc-switch`. This defines the top-level switch element.
41+
42+
### Modifier
43+
44+
The provided modifiers are:
45+
46+
| Class | Description |
47+
| ----------------------| -------------------------------------------- |
48+
| `mdc-switch--disabled` | Applies disabled style to disabled switches. |

‎packages/mdc-switch/_mixins.scss

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
//
2+
// Copyright 2016 Google Inc. All Rights Reserved.
3+
//
4+
// Licensed under the Apache License, Version 2.0 (the "License");
5+
// you may not use this file except in compliance with the License.
6+
// You may obtain a copy of the License at
7+
//
8+
// http://www.apache.org/licenses/LICENSE-2.0
9+
//
10+
// Unless required by applicable law or agreed to in writing, software
11+
// distributed under the License is distributed on an "AS IS" BASIS, // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
// See the License for the specific language governing permissions and
13+
// limitations under the License.
14+
//
15+
16+
@function mdc-switch-transition($property, $timing-function, $duration: $mdc-switch-transition-duration) {
17+
@return $property $duration $timing-function;
18+
}

‎packages/mdc-switch/_variables.scss

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
//
2+
// Copyright 2016 Google Inc. All Rights Reserved.
3+
//
4+
// Licensed under the Apache License, Version 2.0 (the "License");
5+
// you may not use this file except in compliance with the License.
6+
// You may obtain a copy of the License at
7+
//
8+
// http://www.apache.org/licenses/LICENSE-2.0
9+
//
10+
// Unless required by applicable law or agreed to in writing, software
11+
// distributed under the License is distributed on an "AS IS" BASIS,
12+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
// See the License for the specific language governing permissions and
14+
// limitations under the License.
15+
//
16+
17+
$mdc-switch-track-width: 34px;
18+
$mdc-switch-track-height: 14px;
19+
$mdc-switch-knob-diameter: 20px;
20+
$mdc-switch-focus-ring-diameter: 48px;
21+
$mdc-switch-knob-active-margin: $mdc-switch-track-width - $mdc-switch-knob-diameter;
22+
23+
$mdc-switch-unchecked-track-color: #000;
24+
$mdc-switch-unchecked-knob-color: #fafafa;
25+
$mdc-switch-unchecked-focus-ring-color: #9e9e9e;
26+
$mdc-switch-unchecked-knob-color-dark: #bdbdbd;
27+
$mdc-switch-unchecked-track-color-dark: #fff;
28+
$mdc-switch-unchecked-focus-ring-color-dark: #f1f1f1;
29+
$mdc-switch-disabled-knob-color: #bdbdbd;
30+
$mdc-switch-disabled-knob-color-dark: #424242;
31+
32+
$mdc-switch-transition-duration: 175ms;
33+
$mdc-switch-transition-curve: cubic-bezier(.4, 0, .2, 1);

0 commit comments

Comments
 (0)