feat(): add slide-toggle component. #362
Conversation
googlebot
added
the
cla: yes
devversion
force-pushed
the
feat/slide-toggle-component
branch
2 times, most recently
from
a7ae61c to
16c1cf9
Compare
|
@devversion Now needs rebasing on my mega change #384. Feel free to ping me if you run into any issues. |
devversion
force-pushed
the
feat/slide-toggle-component
branch
2 times, most recently
from
de7f505 to
1950cd5
Compare
|
@jelbourn Done :) |
| <div class="md-container"> | ||
| <div class="md-bar"></div> | ||
| <div class="md-thumb-container"> | ||
| <div class="md-thumb"></div> |
There was a problem hiding this comment.
For the slide-toggle, we want to drive the component with an underlying native checkbox, similar to what @robertmesserle is doing in #415 (since the slide-toggle is pretty much just a checkbox with a different appearance).
This gives you the accessibility and keyboard interaction for free.
devversion
force-pushed
the
feat/slide-toggle-component
branch
2 times, most recently
from
c7c45d9 to
92a56cf
Compare
| ## Theming | ||
| A slide-toggle is default using the `accent` palette for its styling. | ||
|
|
||
| Modifiying the color on a `slide-toggle` can be easily done, by using the following classes. |
There was a problem hiding this comment.
Need to update the readme for color="..."
devversion
force-pushed
the
feat/slide-toggle-component
branch
4 times, most recently
from
9f8d20c to
32d7aac
Compare
| [tabIndex]="tabIndex" | ||
| [checked]="checked" | ||
| [disabled]="disabled" | ||
| [attr.name]="name" |
There was a problem hiding this comment.
Should be able to just do [name] without the attr.
There was a problem hiding this comment.
This is a good point. I also had that before. But this will cause issues with a falsy value.
For example, if the user, uses [name]="myName", and themyNameproperty is set tonull` will result in
<input name="null">If you want to confirm it yourself. You can try setting $0.name = null in the Dev Tools on an input.
The advantage of [attr.name] is, that it removes the attribute, when it's falsy.
Same as in #447
There was a problem hiding this comment.
After trying it out, you're right, attr.name is what we want for now.
| if (this.checked !== !!value) { | ||
| this._checked = value; | ||
| this.onChange(this._checked); | ||
| this._change.emit(this._checked); |
There was a problem hiding this comment.
One of the things I ran into recently was that checkbox and radio were firing change events for their initial value, which is unexpected. I fixed it by adding an _isInitialized field and setting it to true in ngAfterContentInit and then gating the emit on _isInitialized being true. This also prevents ng-pristine from being immediately changed to ng-dirty on first load. (see my PR #443).
There was a problem hiding this comment.
I tested that, and covered all possible situations by tests.
The issue, with firing events for the initial seems to be a more specific problem with the
I cannot reproduce this issue with the slide-toggle component.
I also noticed that as well some days ago - But it seems like I fixed it anyway.
I guess it's covered by this check in the setter.
Once an initial value get's emitted, then we compare the old value with the new one.
Which will be false in those cases.
if (this.checked !== !!value) {
|
Fantastic PR! Just a few comments for things that are in-flight for existing components. |
devversion
force-pushed
the
feat/slide-toggle-component
branch
2 times, most recently
from
a26be92 to
218860e
Compare
| `MdSlideToggle` is a two-state control, which can be also called `switch` | ||
|
|
||
| ### Screenshots | ||
|  |
There was a problem hiding this comment.
I added a hosted asset for you:
https://material.angularjs.org/material2_assets/slide-toggle/toggles.png
There was a problem hiding this comment.
Haha 😄 I was already using that, but over the GitHub user content
|
LGTM, just needs a rebase and to update the readme asset. |
devversion
force-pushed
the
feat/slide-toggle-component
branch
from
218860e to
eee0766
Compare
|
@jelbourn Everything done |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
First step; Basic Skeleton for the Slide Toggle Component.
Adressed in other PR's