docs: add example for variants of mdc list

Author: devversion

src/components-examples/material/list/index.ts

@@ -7,13 +7,15 @@ import {ListSectionsExample} from './list-sections/list-sections-example';
 import {ListSelectionExample} from './list-selection/list-selection-example';
 import {ListSingleSelectionExample} from './list-single-selection/list-single-selection-example';
 import {ListHarnessExample} from './list-harness/list-harness-example';
+import {ListVariantsExample} from './list-variants/list-variants-example';
 
 export {
   ListHarnessExample,
   ListOverviewExample,
   ListSectionsExample,
   ListSelectionExample,
   ListSingleSelectionExample,
+  ListVariantsExample,
 };
 
 const EXAMPLES = [
@@ -22,6 +24,7 @@ const EXAMPLES = [
   ListSectionsExample,
   ListSelectionExample,
   ListSingleSelectionExample,
+  ListVariantsExample,
 ];
 
 @NgModule({

src/components-examples/material/list/list-variants/list-variants-example.css

@@ -0,0 +1,3 @@
+.example-list-wrapping {
+  max-width: 500px;
+}

src/components-examples/material/list/list-variants/list-variants-example.html

@@ -0,0 +1,61 @@
+<h3>Single line lists</h3>
+<mat-list>
+  <mat-list-item>
+    <span matListItemTitle>This is the title</span>
+  </mat-list-item>
+  <mat-list-item>Also the title</mat-list-item>
+</mat-list>
+
+<h3>Two line lists</h3>
+<mat-list>
+  <mat-list-item>
+    <span matListItemTitle>Title</span>
+    <span matListItemLine>Second line</span>
+  </mat-list-item>
+  <mat-list-item>
+    <span matListItemTitle>Title</span>
+    <span>Second line</span>
+  </mat-list-item>
+  <mat-list-item>
+    <span matListItemTitle>Title</span>
+    Second line
+  </mat-list-item>
+</mat-list>
+
+<h3>Three line lists</h3>
+<mat-list>
+  <mat-list-item>
+    <span matListItemTitle>Title</span>
+    <span matListItemLine>Second line</span>
+    <span matListItemLine>Third line</span>
+  </mat-list-item>
+  <mat-list-item>
+    <span matListItemTitle>Title</span>
+    <span matListItemLine>Second line. This line will truncate.</span>
+    <span>Third line</span>
+  </mat-list-item>
+  <mat-list-item>
+    <span matListItemTitle>Title</span>
+    <span matListItemLine>Second line. This line will truncate.</span>
+    Third line
+  </mat-list-item>
+</mat-list>
+
+<h3>Three line list with secondary text wrapping</h3>
+<mat-list class="example-list-wrapping">
+  <mat-list-item lines="3">
+    <span matListItemTitle>Title</span>
+    <span
+      >Secondary line that will wrap because the list lines is explicitly set to 3 lines. Text
+      inside of a `matListItemTitle` or `matListItemLine` will never wrap.
+    </span>
+  </mat-list-item>
+  <mat-list-item lines="3">
+    <span matListItemTitle>Title</span>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+    non proident, sunt in culpa qui officia deserunt mollit anim id est
+  </mat-list-item>
+</mat-list>

src/components-examples/material/list/list-variants/list-variants-example.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title List variants
+ */
+@Component({
+  selector: 'list-variants-example',
+  templateUrl: 'list-variants-example.html',
+  styleUrls: ['./list-variants-example.css'],
+})
+export class ListVariantsExample {}