diff --git a/src/demo-app/list/list-demo.html b/src/demo-app/list/list-demo.html index ac2baa38a724..13067cf679df 100644 --- a/src/demo-app/list/list-demo.html +++ b/src/demo-app/list/list-demo.html @@ -104,6 +104,15 @@

Nav lists

+
+

Action list

+ + + +
+

Selection list

diff --git a/src/demo-app/list/list-demo.scss b/src/demo-app/list/list-demo.scss index 438aca0992f3..f7e802dbb110 100644 --- a/src/demo-app/list/list-demo.scss +++ b/src/demo-app/list/list-demo.scss @@ -6,7 +6,6 @@ border: 1px solid rgba(0, 0, 0, 0.12); width: 350px; margin: 20px 20px 0 0; - } h2 { margin-top: 20px; diff --git a/src/demo-app/list/list-demo.ts b/src/demo-app/list/list-demo.ts index 48d81d1887b0..be6444af5d3e 100644 --- a/src/demo-app/list/list-demo.ts +++ b/src/demo-app/list/list-demo.ts @@ -69,4 +69,8 @@ export class ListDemo { this.selectedOptions = values; this.modelChangeEventCount++; } + + alertItem(msg: string) { + alert(msg); + } } diff --git a/src/lib/list/list.md b/src/lib/list/list.md index ca70d509d2e0..c174815a9451 100644 --- a/src/lib/list/list.md +++ b/src/lib/list/list.md @@ -42,6 +42,20 @@ element in an ``. ``` +### Action lists + +Use the `` element when each item in the list performs some _action_. Each item +in an action list is a ` + + +``` + ### Selection lists A selection list provides an interface for selecting values, where each list item is an option. diff --git a/src/lib/list/list.scss b/src/lib/list/list.scss index 302092296cad..e1d08eca2058 100644 --- a/src/lib/list/list.scss +++ b/src/lib/list/list.scss @@ -268,6 +268,22 @@ $mat-list-item-inset-divider-offset: 72px; } } +mat-action-list { + //remove the native button look and make it look like a list item + button { + background: none; + color: inherit; + border: none; + font: inherit; + outline: inherit; + } + + .mat-list-item { + cursor: pointer; + outline: inherit; + } +} + .mat-list-option:not(.mat-list-item-disabled) { cursor: pointer; outline: none; diff --git a/src/lib/list/list.spec.ts b/src/lib/list/list.spec.ts index 380b5ae619c8..5339f846cd4a 100644 --- a/src/lib/list/list.spec.ts +++ b/src/lib/list/list.spec.ts @@ -20,6 +20,8 @@ describe('MatList', () => { ListWithMultipleItems, ListWithManyLines, NavListWithOneAnchorItem, + ActionListWithoutType, + ActionListWithType ], }); @@ -144,6 +146,30 @@ describe('MatList', () => { items.forEach(item => expect(item._isRippleDisabled()).toBe(true)); }); + it('should create an action list', () => { + const fixture = TestBed.createComponent(ActionListWithoutType); + fixture.detectChanges(); + + const items = fixture.componentInstance.listItems; + expect(items.length).toBeGreaterThan(0); + }); + + it('should set default type attribute to button for action list', () => { + const fixture = TestBed.createComponent(ActionListWithoutType); + fixture.detectChanges(); + + const listItemEl = fixture.debugElement.query(By.css('.mat-list-item')); + expect(listItemEl.nativeElement.getAttribute('type')).toBe('button'); + }); + + it('should not change type attribute if it is already specified', () => { + const fixture = TestBed.createComponent(ActionListWithType); + fixture.detectChanges(); + + const listItemEl = fixture.debugElement.query(By.css('.mat-list-item')); + expect(listItemEl.nativeElement.getAttribute('type')).toBe('submit'); + }); + it('should allow disabling ripples for the whole nav-list', () => { let fixture = TestBed.createComponent(NavListWithOneAnchorItem); fixture.detectChanges(); @@ -195,6 +221,26 @@ class NavListWithOneAnchorItem extends BaseTestList { disableListRipple: boolean = false; } +@Component({template: ` + + + `}) +class ActionListWithoutType extends BaseTestList { + @ViewChildren(MatListItem) listItems: QueryList; +} + +@Component({template: ` + + + `}) +class ActionListWithType extends BaseTestList { + @ViewChildren(MatListItem) listItems: QueryList; +} + @Component({template: ` diff --git a/src/lib/list/list.ts b/src/lib/list/list.ts index 7c8d69a73e89..d2f4c310d7fa 100644 --- a/src/lib/list/list.ts +++ b/src/lib/list/list.ts @@ -56,7 +56,7 @@ export class MatNavList extends _MatListMixinBase implements CanDisableRipple {} @Component({ moduleId: module.id, - selector: 'mat-list', + selector: 'mat-list, mat-action-list', exportAs: 'matList', templateUrl: 'list.html', host: {'class': 'mat-list'}, @@ -100,7 +100,7 @@ export class MatListSubheaderCssMatStyler {} /** An item within a Material Design list. */ @Component({ moduleId: module.id, - selector: 'mat-list-item, a[mat-list-item]', + selector: 'mat-list-item, a[mat-list-item], button[mat-list-item]', exportAs: 'matListItem', host: { 'class': 'mat-list-item', @@ -127,6 +127,14 @@ export class MatListItem extends _MatListItemMixinBase implements AfterContentIn @Optional() private _navList: MatNavList) { super(); this._isNavList = !!_navList; + + // If no type attributed is specified for