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

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

61 строка2 KB

Chad Ramos

Fix html tag line break (#28140)

25 дек 2023, 11:02

25 дек 2023, 11:02a8b8e62

<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>