src/dev-app/list/list-demo.html - main - githubmirror/components

src/dev-app/list/list-demo.html
333 строки11 KB
Andrew Seguin
docs: rename material.angular.io to material.angular.dev (#30993)
02 май 2025, 06:14
02 май 2025, 06:147791972

<h1>mat-list demo</h1>

<button matButton="elevated" (click)="thirdLine = !thirdLine">Show third line</button>
<button matButton="elevated" (click)="showBoxes = !showBoxes">Show item boxes</button>

<div class="demo-list" [class.demo-show-boxes]="showBoxes">

  <div>
    <h2>Normal lists</h2>

    <mat-list>
      <div mat-subheader>Items</div>
      @for (item of items; track item) {
        <mat-list-item>{{item}}</mat-list-item>
      }
    </mat-list>

    <mat-list>
      @for (contact of contacts; track contact) {
        <mat-list-item>
          <div matListItemTitle>{{contact.name}}</div>
          @if (thirdLine) {
            <div matListItemLine>extra line</div>
          }
          <div matListItemLine>{{contact.headline}}</div>
        </mat-list-item>
      }
    </mat-list>

    <mat-list>
      <div mat-subheader>Today</div>
      @for (message of messages; track message) {
        <mat-list-item>
          <img matListItemAvatar [src]="message.image" alt="Image of {{message.from}}">
          <div matListItemTitle>{{message.from}}</div>
          <div matListItemLine>
            <span>{{message.subject}} -- </span>
            <span>{{message.message}}</span>
          </div>
          @if (!$last) {
            <mat-divider inset></mat-divider>
          }
        </mat-list-item>
      }
      <mat-divider></mat-divider>
      @for (message of messages; track message) {
        <mat-list-item>
          <div matListItemTitle>{{message.from}}</div>
          <div matListItemLine>{{message.subject}}</div>
          <div matListItemLine>{{message.message}}</div>
        </mat-list-item>
      }
    </mat-list>

    <mat-list>
      @for (link of links; track link) {
        <mat-list-item>
          <span matListItemTitle>{{ link.name }}</span>
          <button matListItemMeta matIconButton (click)="infoClicked=!infoClicked">
            <mat-icon>info</mat-icon>
          </button>
        </mat-list-item>
      }
    </mat-list>
  </div>

  <div>
    <h2>Dense lists</h2>
    <mat-list dense>
      <div mat-subheader>Items</div>
      @for (item of items; track item) {
        <mat-list-item>{{item}}</mat-list-item>
      }
    </mat-list>

    <mat-list dense>
      @for (contact of contacts; track contact) {
        <mat-list-item>
          <div matListItemTitle>{{contact.name}}</div>
          <div matListItemLine>{{contact.headline}}</div>
        </mat-list-item>
      }
    </mat-list>

    <mat-list dense>
      <div mat-subheader>Today</div>
      @for (message of messages; track message) {
        <mat-list-item>
          <img matListItemAvatar [src]="message.image" alt="Image of {{message.from}}">
          <div matListItemTitle>{{message.from}}</div>
          <div matListItemLine>{{message.subject}}</div>
          <div matListItemLine>{{message.message}}</div>
        </mat-list-item>
      }
    </mat-list>

    <mat-list dense>
      @for (link of links; track link) {
        <mat-list-item>
          <span matListItemTitle>{{ link.name }}</span>
          <button matListItemMeta matIconButton (click)="infoClicked=!infoClicked">
            <mat-icon class="material-icons">info</mat-icon>
          </button>
        </mat-list-item>
      }
    </mat-list>
  </div>
  <div>
    <h2>Nav lists</h2>
    <mat-nav-list>
      @for (link of links; track link) {
        <a mat-list-item [href]="link.href" [activated]="isActivated(link)">
          {{ link.name }}
        </a>
      }
    </mat-nav-list>
    @if (infoClicked) {
      <div>More info!</div>
    }
    <mat-nav-list>
      @for (link of links; track link; let last = $last) {
        <a mat-list-item [href]="link.href" [activated]="isActivated(link)">
          <mat-icon matListItemIcon>folder</mat-icon>
          <span matListItemTitle>{{ link.name }}</span>
        </a>
      }
    </mat-nav-list>
  </div>

  <div>
    <h2>Action list</h2>
    <mat-action-list>
      @for (link of links; track link) {
        <button mat-list-item (click)="alertItem(link.name)">{{link.name}}</button>
      }
    </mat-action-list>
  </div>

  <div>
    <h2>Selection list</h2>

    <mat-selection-list #groceries [ngModel]="selectedOptions"
                        (ngModelChange)="onSelectedOptionsChange($event)"
                        (selectionChange)="changeEventCount = changeEventCount + 1"
                        [disabled]="selectionListDisabled"
                        [disableRipple]="selectionListRippleDisabled"
                        [hideSingleSelectionIndicator]="selectionListSingleSelectionIndicatorHidden"
                        color="primary">
      <div mat-subheader>Groceries</div>

      <mat-list-option value="bananas" togglePosition="before">Bananas</mat-list-option>
      <mat-list-option selected value="oranges" color="accent">Oranges</mat-list-option>
      <mat-list-option value="apples" color="warn">Apples</mat-list-option>
      <mat-list-option value="strawberries" disabled>Strawberries</mat-list-option>
    </mat-selection-list>

    <mat-selection-list [disableRipple]="selectionListRippleDisabled">
      <div mat-subheader>Dogs</div>

      <mat-list-option togglePosition="before">
        <img matListItemAvatar src="https://material.angular.dev/assets/img/examples/shiba1.jpg">
        <span matListItemTitle>Shiba Inu</span>
      </mat-list-option>

      <mat-list-option togglePosition="after">
        <img matListItemAvatar src="https://material.angular.dev/assets/img/examples/shiba2.jpg">
        <span matListItemTitle>Other Shiba Inu</span>
      </mat-list-option>
    </mat-selection-list>

    <p>Selected: {{selectedOptions | json}}</p>
    <p>Change Event Count {{changeEventCount}}</p>
    <p>Model Change Event Count {{modelChangeEventCount}}</p>
    <p>
      <label>
        Disable selection list
        <input type="checkbox" [(ngModel)]="selectionListDisabled">
      </label>
    </p>
    <p>
      <label>
        Disable Selection List ripples
        <input type="checkbox" [(ngModel)]="selectionListRippleDisabled">
      </label>
    </p>
    <p>
      <label>
        Hide Single-Selection indicators
        <input type="checkbox" [(ngModel)]="selectionListSingleSelectionIndicatorHidden">
      </label>
    </p>
    <p>
      <button matButton="elevated" (click)="groceries.selectAll()">Select all</button>
      <button matButton="elevated" (click)="groceries.deselectAll()">Deselect all</button>
    </p>
  </div>

  <div>
    <h2>Single Selection list</h2>

    <mat-selection-list #favorite
                        [(ngModel)]="favoriteOptions"
                        [multiple]="false"
                        [hideSingleSelectionIndicator]="selectionListSingleSelectionIndicatorHidden"
                        color="primary">
      <div mat-subheader>Favorite Grocery</div>

      <mat-list-option value="bananas">Bananas</mat-list-option>
      <mat-list-option selected value="oranges" color="accent">Oranges</mat-list-option>
      <mat-list-option value="apples" color="warn">Apples</mat-list-option>
      <mat-list-option value="strawberries" disabled>Strawberries</mat-list-option>
    </mat-selection-list>

    <p>Selected: {{favoriteOptions | json}}</p>

    <h4>Single Selection List with Reactive Forms</h4>

    <form [formGroup]="form">
      <mat-selection-list #shoesList [formControl]="shoesControl" name="shoes" [multiple]="false">
        @for (shoe of shoes; track shoe) {
          <mat-list-option [value]="shoe.value">{{shoe.name}}</mat-list-option>
        }
      </mat-selection-list>
      <p>
         Option selected: {{shoesControl.value ? shoesControl.value[0] : 'None'}}
      </p>
    </form>
  </div>

  <div>
    <h2>Line scenarios</h2>

    <mat-list>
      <mat-list-item>Title</mat-list-item>
      <mat-list-item lines="2">
        <span matListItemTitle>Title</span>
        <span>This is unscoped text content that is supposed to not wrap. The list has only
        acquired two lines and therefore there is no space for wrapping.</span>
      </mat-list-item>
      <mat-list-item lines="3">
        <span matListItemTitle>Title</span>
        <span>This is unscoped text content that is supposed to wrap to the third line.
          The list item acquire spaces for three lines and text should have an ellipsis in the
          third line upon text overflow.</span>
      </mat-list-item>
      <mat-list-item>
        <span matListItemTitle>Title</span>
        <span>This is unscoped text content that is supposed to not wrap. The list has only
        acquired two lines (automatically) and therefore there is no space for wrapping.</span>
      </mat-list-item>
      <mat-list-item>
        <span matListItemTitle>Title</span>
        <span matListItemLine>Secondary line</span>
        <span matListItemLine>Tertiary line</span>
      </mat-list-item>
    </mat-list>

    <mat-selection-list>
      <mat-list-option>Title</mat-list-option>
      <mat-list-option lines="2">
        <span matListItemTitle>Title</span>
        <span>This is unscoped text content that is supposed to not wrap. The list has only
        acquired two lines and therefore there is no space for wrapping.</span>
      </mat-list-option>
      <mat-list-option lines="3">
        <span matListItemTitle>Title</span>
        <span>This is unscoped text content that is supposed to wrap to the third line.
          The list item acquire spaces for three lines and text should have an ellipsis in the
          third line upon text overflow.</span>
      </mat-list-option>
      <mat-list-option>
        <span matListItemTitle>Title</span>
        <span>This is unscoped text content that is supposed to not wrap. The list has only
        acquired two lines (automatically) and therefore there is no space for wrapping.</span>
      </mat-list-option>
      <mat-list-option>
        <span matListItemTitle>Title</span>
        <span matListItemLine>Secondary line</span>
        <span matListItemLine>Tertiary line</span>
      </mat-list-option>
    </mat-selection-list>

    <button matButton="elevated" (click)="showBoxes = !showBoxes">Show item boxes</button>
  </div>

  <div>
    <h2>Line alignment</h2>

    <mat-list>
      @for (link of links; track link) {
        <mat-list-item>
          <span matListItemTitle>{{ link.name }}</span>
          <span>Unscoped content</span>
        </mat-list-item>
      }
    </mat-list>

    <mat-selection-list>
      <mat-list-option value="first">First</mat-list-option>
      <mat-list-option value="second">
        <span matListItemTitle>Second</span>
        <span>Unscoped content</span>
      </mat-list-option>
    </mat-selection-list>
  </div>

  <div>
    <h2>Icon alignment in selection list</h2>

    <mat-selection-list>
      <mat-list-option value="bananas" [togglePosition]="togglePosition">
        <mat-icon matListItemIcon>info</mat-icon>
        Bananas
      </mat-list-option>
      <mat-list-option value="oranges" [togglePosition]="togglePosition">
        <mat-icon matListItemIcon #ok>info</mat-icon>
        Oranges
      </mat-list-option>
      <mat-list-option value="cake" [togglePosition]="togglePosition">
        <mat-icon matListItemIcon>info</mat-icon>
        Cake
      </mat-list-option>
      <mat-list-option value="fries" [togglePosition]="togglePosition">
        <mat-icon matListItemIcon>info</mat-icon>
        Fries
      </mat-list-option>
    </mat-selection-list>

    <button matButton="elevated" (click)="toggleCheckboxPosition()">
      Toggle checkbox position
    </button>
  </div>
</div>