Skip to content

Commit e09a5bf

Browse files
devversionjelbourn
devversion
authored and
jelbourn
committed
feat(): add slide-toggle component. (#362)
1 parent a25a8da commit e09a5bf

File tree

11 files changed

+678
-0
lines changed

11 files changed

+678
-0
lines changed

‎src/components/slide-toggle/README.md

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
# MdSlideToggle
2+
`MdSlideToggle` is a two-state control, which can be also called `switch`
3+
4+
### Screenshots
5+
![image](https://material.angularjs.org/material2_assets/slide-toggle/toggles.png)
6+
7+
## `<md-slide-toggle>`
8+
### Bound Properties
9+
10+
| Name | Type | Description |
11+
| --- | --- | --- |
12+
| `disabled` | boolean | Disables the `slide-toggle` |
13+
| `color` | `"primary" | "accent" | "warn"` | The color palette of the `slide-toggle` |
14+
| `checked` | boolean | Sets the value of the `slide-toggle` |
15+
16+
### Events
17+
| Name | Type | Description |
18+
| --- | --- | --- |
19+
| `change` | boolean | Event will be emitted on every value change.<br/>It emits the new `checked` value. |
20+
21+
### Examples
22+
A basic slide-toggle would have the following markup.
23+
```html
24+
<md-slide-toggle [(ngModel)]="slideToggleModel">
25+
Default Slide Toggle
26+
</md-slide-toggle>
27+
```
28+
29+
Slide toggle can be also disabled.
30+
```html
31+
<md-slide-toggle disabled>
32+
Disabled Slide Toggle
33+
</md-slide-toggle>
34+
```
35+
36+
The `slide-toggle` can be also set to checked without a `ngModel`
37+
```html
38+
<md-slide-toggle [checked]="isChecked">
39+
Input Binding
40+
</md-slide-toggle>
41+
```
42+
43+
You may also want to listen on changes of the `slide-toggle`<br/>
44+
The `slide-toggle` always emits the new value to the event binding `(change)`
45+
```html
46+
<md-slide-toggle (change)="printValue($event)">
47+
Prints Value on Change
48+
</md-slide-toggle>
49+
```
50+
51+
## Theming
52+
A slide-toggle is default using the `accent` palette for its styling.
53+
54+
Modifying the color on a `slide-toggle` can be easily done, by using the following markup.
55+
```html
56+
<md-slide-toggle color="primary">
57+
Primary Slide Toggle
58+
</md-slide-toggle>
59+
```
60+
61+
The color can be also set dynamically by using a property binding.
62+
```html
63+
<md-slide-toggle [color]="myColor">
64+
Dynamic Color
65+
</md-slide-toggle>
66+
```

‎src/components/slide-toggle/slide-toggle.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<label class="md-slide-toggle-label">
2+
<div class="md-slide-toggle-container">
3+
<div class="md-slide-toggle-bar"></div>
4+
<div class="md-slide-toggle-thumb-container">
5+
<div class="md-slide-toggle-thumb"></div>
6+
</div>
7+
8+
<input #input class="md-slide-toggle-checkbox" type="checkbox"
9+
[id]="getInputId()"
10+
[tabIndex]="tabIndex"
11+
[checked]="checked"
12+
[disabled]="disabled"
13+
[attr.name]="name"
14+
[attr.aria-label]="ariaLabel"
15+
[attr.aria-labelledby]="ariaLabelledby"
16+
(blur)="onTouched()"
17+
(change)="onChangeEvent()">
18+
</div>
19+
<span class="md-slide-toggle-content">
20+
<ng-content></ng-content>
21+
</span>
22+
</label>

‎src/components/slide-toggle/slide-toggle.scss

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
@import "../../core/style/variables";
2+
@import "../../core/style/mixins";
3+
@import "../../core/style/elevation";
4+
5+
//TODO(): remove the default theme.
6+
@import "../../core/style/default-theme";
7+
8+
$md-slide-toggle-width: 36px !default;
9+
$md-slide-toggle-height: 24px !default;
10+
$md-slide-toggle-bar-height: 14px !default;
11+
$md-slide-toggle-thumb-size: 20px !default;
12+
$md-slide-toggle-margin: 16px !default;
13+
14+
@mixin md-switch-checked($palette) {
15+
.md-slide-toggle-thumb {
16+
background-color: md-color($palette);
17+
}
18+
19+
.md-slide-toggle-bar {
20+
background-color: md-color($palette, 0.5);
21+
}
22+
}
23+
24+
:host {
25+
display: flex;
26+
height: $md-slide-toggle-height;
27+
28+
margin: $md-slide-toggle-margin 0;
29+
line-height: $md-slide-toggle-height;
30+
31+
white-space: nowrap;
32+
user-select: none;
33+
34+
outline: none;
35+
36+
&.md-checked {
37+
@include md-switch-checked($md-accent);
38+
39+
&.md-primary {
40+
@include md-switch-checked($md-primary);
41+
}
42+
43+
&.md-warn {
44+
@include md-switch-checked($md-warn);
45+
}
46+
47+
.md-slide-toggle-thumb-container {
48+
transform: translate3d(100%, 0, 0);
49+
}
50+
}
51+
52+
&.md-disabled {
53+
54+
.md-slide-toggle-label, .md-slide-toggle-container {
55+
cursor: default;
56+
}
57+
58+
.md-slide-toggle-thumb {
59+
// The thumb of the slide-toggle always uses the hue 400 of the grey palette in dark or light themes.
60+
// Since this is very specific to the slide-toggle component, we're not providing
61+
// it in the background palette.
62+
background-color: md-color($md-grey, 400);
63+
}
64+
.md-slide-toggle-bar {
65+
background-color: md-color($md-foreground, divider);
66+
}
67+
}
68+
}
69+
70+
// The label is our root container for the slide-toggle / switch indicator and label text.
71+
// It has to be a label, to support accessibility for the visual hidden input.
72+
.md-slide-toggle-label {
73+
display: flex;
74+
flex: 1;
75+
76+
cursor: pointer;
77+
}
78+
79+
// Container for the composition of the slide-toggle / switch indicator.
80+
.md-slide-toggle-container {
81+
cursor: grab;
82+
width: $md-slide-toggle-width;
83+
height: $md-slide-toggle-height;
84+
85+
position: relative;
86+
user-select: none;
87+
88+
margin-right: 8px;
89+
}
90+
91+
// The thumb container is responsible for the dragging functionality.
92+
// It moves around and holds the actual circle as a thumb.
93+
.md-slide-toggle-thumb-container {
94+
position: absolute;
95+
top: $md-slide-toggle-height / 2 - $md-slide-toggle-thumb-size / 2;
96+
left: 0;
97+
z-index: 1;
98+
99+
width: $md-slide-toggle-width - $md-slide-toggle-thumb-size;
100+
101+
transform: translate3d(0, 0, 0);
102+
103+
transition: $swift-linear;
104+
transition-property: transform;
105+
}
106+
107+
// The thumb will be elevated from the slide-toggle bar.
108+
// Also the thumb is bound to its parent thumb-container, which manages the movement of the thumb.
109+
.md-slide-toggle-thumb {
110+
position: absolute;
111+
margin: 0;
112+
left: 0;
113+
top: 0;
114+
115+
height: $md-slide-toggle-thumb-size;
116+
width: $md-slide-toggle-thumb-size;
117+
border-radius: 50%;
118+
119+
background-color: md-color($md-background, background);
120+
@include md-elevation(1);
121+
}
122+
123+
// Horizontal bar for the slide-toggle.
124+
// The slide-toggle bar is shown behind the thumb container.
125+
.md-slide-toggle-bar {
126+
position: absolute;
127+
left: 1px;
128+
top: $md-slide-toggle-height / 2 - $md-slide-toggle-bar-height / 2;
129+
130+
width: $md-slide-toggle-width - 2px;
131+
height: $md-slide-toggle-bar-height;
132+
133+
// The bar of the slide-toggle always uses the hue 500 of the grey palette in dark or light themes.
134+
// Since this is very specific to the slide-toggle component, we're not providing
135+
// it in the background palette.
136+
background-color: md-color($md-grey, 500);
137+
138+
border-radius: 8px;
139+
}
140+
141+
// The slide toggle shows a visually hidden checkbox inside of the component.
142+
// This checkbox allows us to take advantage of the browsers support.
143+
// Like accessibility and keyboard interaction.
144+
.md-slide-toggle-checkbox {
145+
@include md-visually-hidden();
146+
}
147+
148+
.md-slide-toggle-bar,
149+
.md-slide-toggle-thumb {
150+
transition: $swift-linear;
151+
transition-property: background-color;
152+
transition-delay: 0.05s;
153+
}

0 commit comments

Comments
 (0)