angular / angular/components

feat(mat-selection-list): add slide toggle as alternative for checkbox

Open
#9,739 12 comments 20 reactions 0 assignees View on GitHub
area: material/list feature P5
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Bug, feature request, or proposal:
feature request

#### What is the expected behavior?
Option lists can have slide toggles instead of checkboxes, as you can see on Android OS.

#### What is the current behavior?
Option lists are only for checkboxes and if you want to create something that has the same look but has a slide toggle instead, you will have to implement by yourself.

#### What is the use-case or motivation for changing an existing behavior?
Its a very common option list format, very used on Android 5~6.

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Material 5.1

#### Is there anything else we should know?
You can find it in Material's guidelines:
![image](https://user-images.githubusercontent.com/3942006/35696636-21d3e79a-076f-11e8-80c3-59abdf6d00fd.png)
*(switches are very cute btw)*

Cute sidebar example:
![image](https://user-images.githubusercontent.com/3942006/35740701-c7f2f7d0-081c-11e8-8010-d2dd8838f66a.png)
*(inspired by Twitter's PWA, achieved with slide-toggle, mat-list and `::ng-deep`, that's a lot more than I expect to write)*

Contributor guide

Open the contributing guide

Research direction

Start by reviewing the mat-selection-list and slide-toggle components and how the current option-list checkbox behavior is exposed. The work is done when option lists support slide toggles as an alternative presentation while retaining the expected selection behavior, with coverage for the new option.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.