diff --git a/src/dev-app/list/BUILD.bazel b/src/dev-app/list/BUILD.bazel index 0868a7e75828..c0a9431b3b2e 100644 --- a/src/dev-app/list/BUILD.bazel +++ b/src/dev-app/list/BUILD.bazel @@ -13,6 +13,7 @@ ng_module( "//src/material/button", "//src/material/icon", "//src/material/list", + "//src/material/slide-toggle", ], ) diff --git a/src/dev-app/list/list-demo.html b/src/dev-app/list/list-demo.html index 5edc6cdfa7d0..e507fea5ab64 100644 --- a/src/dev-app/list/list-demo.html +++ b/src/dev-app/list/list-demo.html @@ -2,6 +2,7 @@

mat-list demo

+
@@ -12,7 +13,10 @@

Normal lists

Items
@for (item of items; track item) { - {{item}} + + {{item}} + + }
@@ -24,6 +28,7 @@

Normal lists

extra line
}
{{contact.headline}}
+ } diff --git a/src/dev-app/list/list-demo.ts b/src/dev-app/list/list-demo.ts index 30ff2459576f..068696e34800 100644 --- a/src/dev-app/list/list-demo.ts +++ b/src/dev-app/list/list-demo.ts @@ -12,13 +12,21 @@ import {MatButtonModule} from '@angular/material/button'; import {MatListModule, MatListOptionTogglePosition} from '@angular/material/list'; import {MatIconModule} from '@angular/material/icon'; import {CommonModule} from '@angular/common'; +import {MatSlideToggleModule} from '@angular/material/slide-toggle'; @Component({ selector: 'list-demo', templateUrl: 'list-demo.html', styleUrls: ['list-demo.css'], standalone: true, - imports: [CommonModule, FormsModule, MatButtonModule, MatIconModule, MatListModule], + imports: [ + CommonModule, + FormsModule, + MatButtonModule, + MatIconModule, + MatListModule, + MatSlideToggleModule, + ], }) export class ListDemo { items: string[] = ['Pepper', 'Salt', 'Paprika']; @@ -60,6 +68,7 @@ export class ListDemo { ]; thirdLine = false; + showSwitch = false; showBoxes = false; infoClicked = false; selectionListDisabled = false; diff --git a/src/material/list/list-item-sections.ts b/src/material/list/list-item-sections.ts index 0ca18e781fec..59eed6e3225b 100644 --- a/src/material/list/list-item-sections.ts +++ b/src/material/list/list-item-sections.ts @@ -52,6 +52,21 @@ export class MatListItemLine { }) export class MatListItemMeta {} +/** + * Directive matching an optional switch for list items. + * + * List items can reserve space at the end of an item to display a control, + * button or additional text content. + */ +@Directive({ + selector: 'mat-slide-toggle[matListItemMeta]', + host: { + 'class': 'mat-mdc-list-item-switch mdc-list-item__end', + }, + standalone: true, +}) +export class MatListItemSwitch {} + /** * @docs-private * diff --git a/src/material/list/list-item.html b/src/material/list/list-item.html index e52a1e9491c4..eb36d374f777 100644 --- a/src/material/list/list-item.html +++ b/src/material/list/list-item.html @@ -10,6 +10,7 @@ + diff --git a/src/material/list/list-module.ts b/src/material/list/list-module.ts index 9f8ca80c1a9a..ede042c51c85 100644 --- a/src/material/list/list-module.ts +++ b/src/material/list/list-module.ts @@ -20,6 +20,7 @@ import { MatListItemMeta, MatListItemAvatar, MatListItemIcon, + MatListItemSwitch, } from './list-item-sections'; import {MatNavList} from './nav-list'; import {MatSelectionList} from './selection-list'; @@ -44,6 +45,7 @@ import {ObserversModule} from '@angular/cdk/observers'; MatListItemLine, MatListItemTitle, MatListItemMeta, + MatListItemSwitch, ], exports: [ MatList, diff --git a/src/material/list/list.ts b/src/material/list/list.ts index 299e6a0b6ada..e3164a7b12a6 100644 --- a/src/material/list/list.ts +++ b/src/material/list/list.ts @@ -24,7 +24,12 @@ import { } from '@angular/core'; import {MAT_RIPPLE_GLOBAL_OPTIONS, RippleGlobalOptions} from '@angular/material/core'; import {MatListBase, MatListItemBase} from './list-base'; -import {MatListItemLine, MatListItemMeta, MatListItemTitle} from './list-item-sections'; +import { + MatListItemLine, + MatListItemMeta, + MatListItemSwitch, + MatListItemTitle, +} from './list-item-sections'; import {coerceBooleanProperty} from '@angular/cdk/coercion'; import {CdkObserveContent} from '@angular/cdk/observers'; @@ -59,6 +64,7 @@ export class MatList extends MatListBase {} '[class.mdc-list-item--with-leading-avatar]': '_avatars.length !== 0', '[class.mdc-list-item--with-leading-icon]': '_icons.length !== 0', '[class.mdc-list-item--with-trailing-meta]': '_meta.length !== 0', + '[class.mdc-list-item--with-trailing-switch]': '_switch.length !== 0', '[class._mat-animation-noopable]': '_noopAnimations', '[attr.aria-current]': '_getAriaCurrent()', }, @@ -72,6 +78,7 @@ export class MatListItem extends MatListItemBase { @ContentChildren(MatListItemLine, {descendants: true}) _lines: QueryList; @ContentChildren(MatListItemTitle, {descendants: true}) _titles: QueryList; @ContentChildren(MatListItemMeta, {descendants: true}) _meta: QueryList; + @ContentChildren(MatListItemSwitch, {descendants: true}) _switch: QueryList; @ViewChild('unscopedContent') _unscopedContent: ElementRef; @ViewChild('text') _itemText: ElementRef;