Skip to content

Commit 32d7aac

Browse files
devversiondevversion
committed
feat(): add slide-toggle component.
1 parent 4f713b9 commit 32d7aac

File tree

12 files changed

+602
-2
lines changed

12 files changed

+602
-2
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://cloud.githubusercontent.com/assets/4987015/14860895/25cc0dc0-0cab-11e6-9e57-9f6d513444b1.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: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
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+
background-color: md-color($md-background, slide-toggle-thumb);
60+
}
61+
.md-slide-toggle-bar {
62+
background-color: md-color($md-foreground, divider);
63+
}
64+
}
65+
}
66+
67+
// The label is our root container for the slide-toggle / switch indicator and label text.
68+
// It has to be a label, to support accessibility for the visual hidden input.
69+
.md-slide-toggle-label {
70+
display: flex;
71+
flex: 1;
72+
73+
cursor: pointer;
74+
}
75+
76+
// Container for the composition of the slide-toggle / switch indicator.
77+
.md-slide-toggle-container {
78+
cursor: grab;
79+
width: $md-slide-toggle-width;
80+
height: $md-slide-toggle-height;
81+
82+
position: relative;
83+
user-select: none;
84+
85+
margin-right: 8px;
86+
}
87+
88+
// The thumb container is responsible for the dragging functionality.
89+
// It moves around and holds the actual circle as a thumb.
90+
.md-slide-toggle-thumb-container {
91+
position: absolute;
92+
top: $md-slide-toggle-height / 2 - $md-slide-toggle-thumb-size / 2;
93+
left: 0;
94+
z-index: 1;
95+
96+
width: $md-slide-toggle-width - $md-slide-toggle-thumb-size;
97+
98+
transform: translate3d(0, 0, 0);
99+
100+
transition: $swift-linear;
101+
transition-property: transform;
102+
}
103+
104+
// The thumb will be elevated from the slide-toggle bar.
105+
// Also the thumb is bound to its parent thumb-container, which manages the movement of the thumb.
106+
.md-slide-toggle-thumb {
107+
position: absolute;
108+
margin: 0;
109+
left: 0;
110+
top: 0;
111+
112+
height: $md-slide-toggle-thumb-size;
113+
width: $md-slide-toggle-thumb-size;
114+
border-radius: 50%;
115+
116+
background-color: md-color($md-background, background);
117+
@include md-elevation(1);
118+
}
119+
120+
// Horizontal bar for the slide-toggle.
121+
// The slide-toggle bar is shown behind the thumb container.
122+
.md-slide-toggle-bar {
123+
position: absolute;
124+
left: 1px;
125+
top: $md-slide-toggle-height / 2 - $md-slide-toggle-bar-height / 2;
126+
127+
width: $md-slide-toggle-width - 2px;
128+
height: $md-slide-toggle-bar-height;
129+
130+
background-color: md-color($md-background, slide-toggle-bar);
131+
132+
border-radius: 8px;
133+
}
134+
135+
// The slide toggle shows a visually hidden checkbox inside of the component.
136+
// This checkbox allows us to take advantage of the browsers support.
137+
// Like accessibility and keyboard interaction.
138+
.md-slide-toggle-checkbox {
139+
@include md-visually-hidden();
140+
}
141+
142+
.md-slide-toggle-bar,
143+
.md-slide-toggle-thumb {
144+
transition: $swift-linear;
145+
transition-property: background-color;
146+
transition-delay: 0.05s;
147+
}

0 commit comments

Comments
 (0)