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

src/dev-app/chips/chips-demo.html
337 строк11 KB
Andrey Dolgachev
feat(material/chips): make ChipInput optional for MatChipGrid (#31693)
21 авг 2025, 20:39
21 авг 2025, 20:3929f0bb2
<div class="demo-chips">
  <mat-card>
    <mat-card-header>Static Chips</mat-card-header>

    <mat-card-content>
      <h4>Simple</h4>

      <mat-chip-set>
        <mat-chip>Chip 1</mat-chip>
        <mat-chip>Chip 2</mat-chip>
        <mat-chip disabled>Chip 3</mat-chip>
      </mat-chip-set>

      <h4>Unstyled</h4>

      <mat-chip-set>
        <mat-basic-chip>Basic Chip 1</mat-basic-chip>
        <mat-basic-chip>Basic Chip 2</mat-basic-chip>
        <mat-basic-chip>Basic Chip 3</mat-basic-chip>
      </mat-chip-set>

      <mat-chip-listbox>
        <mat-basic-chip-option>Basic Chip Option 1</mat-basic-chip-option>
        <mat-basic-chip-option>Basic Chip Option 2</mat-basic-chip-option>
        <mat-basic-chip-option>Basic Chip Option 3</mat-basic-chip-option>
      </mat-chip-listbox>

      <mat-chip-grid #basicGrid>
        <mat-basic-chip-row>Basic Chip Row 1</mat-basic-chip-row>
        <mat-basic-chip-row>Basic Chip Row 2</mat-basic-chip-row>
        <mat-basic-chip-row>Basic Chip Row 3</mat-basic-chip-row>
      </mat-chip-grid>
      <input [matChipInputFor]="basicGrid" readonly>

      <h4>With avatar, icons, and color</h4>

      <mat-chip-set>
        <mat-chip disabled>
          <mat-icon matChipAvatar>home</mat-icon>
          Home
          <button matChipRemove aria-label="Remove chip">
            <mat-icon>close</mat-icon>
          </button>
        </mat-chip>

        <mat-chip highlighted="true" color="accent">
          <mat-chip-avatar>P</mat-chip-avatar>
          Portel
          <button matChipRemove aria-label="Remove chip">
            <mat-icon>close</mat-icon>
          </button>
        </mat-chip>

        <mat-chip>
          <mat-chip-avatar>M</mat-chip-avatar>
          Molly
        </mat-chip>

        <mat-chip>
          Koby
          <button matChipRemove aria-label="Remove chip">
            <mat-icon>close</mat-icon>
          </button>
        </mat-chip>

        <mat-chip>
          Razzle
        </mat-chip>

        <mat-chip>
          <img src="https://material.angular.dev/assets/img/examples/shiba2.jpg" matChipAvatar>
          Mal
        </mat-chip>

        <mat-chip highlighted="true" color="warn">
          <img src="https://material.angular.dev/assets/img/examples/shiba2.jpg" matChipAvatar>
          Husi
          <button matChipRemove>
            <mat-icon>close</mat-icon>
          </button>
        </mat-chip>

        <mat-chip>
          Good
          <mat-icon matChipTrailingIcon>star</mat-icon>
        </mat-chip>

        <mat-chip>
          Bad
          <mat-icon matChipTrailingIcon>star_border</mat-icon>
        </mat-chip>

      </mat-chip-set>

      <h4>With Events</h4>

      <mat-chip-set>
        @if (visible) {
          <mat-chip highlighted="true" color="warn"
                  (destroyed)="displayMessage('chip destroyed')" (removed)="toggleVisible()">
            With Events
            <button matChipRemove aria-label="Remove chip">
              <mat-icon>close</mat-icon>
            </button>
          </mat-chip>
        }
      </mat-chip-set>
      <div>{{message}}</div>

    </mat-card-content>
  </mat-card>

  <mat-card>
    <mat-card-header>Chip Listbox</mat-card-header>

    <mat-card-content>
      <p>Chip list utilizing the listbox pattern. Should be used for selectable chips.</p>

      <mat-checkbox [(ngModel)]="disabledListboxes">Disabled</mat-checkbox>
      <mat-checkbox [(ngModel)]="listboxesWithAvatar">Show avatar</mat-checkbox>

      <h4>Single selection</h4>

      <mat-chip-listbox multiple="false" [disabled]="disabledListboxes">
        @for (shirtSize of shirtSizes; track shirtSize) {
          <mat-chip-option [disabled]="shirtSize.disabled">
            {{shirtSize.label}}
            @if (listboxesWithAvatar) {
              <mat-chip-avatar>{{shirtSize.avatar}}</mat-chip-avatar>
            }
          </mat-chip-option>
          }
      </mat-chip-listbox>

      <h4>Multi selection</h4>

      <mat-chip-listbox multiple="true" [disabled]="disabledListboxes">
        @for (hint of restaurantHints; track hint) {
          <mat-chip-option [selected]="hint.selected">
            @if (listboxesWithAvatar) {
              <mat-chip-avatar>{{hint.avatar}}</mat-chip-avatar>
            }
            {{hint.label}}
          </mat-chip-option>
        }
      </mat-chip-listbox>

    </mat-card-content>
  </mat-card>

  <mat-card>
    <mat-card-header>Chip Grid</mat-card-header>

    <mat-card-content>
      <p>
        The <code>&lt;mat-chip-grid&gt;</code> component pairs with the <code>matChipInputFor</code> directive
        to convert user input text into chips.
        They can be used inside a <code>&lt;mat-form-field&gt;</code>.
      </p>

      <mat-checkbox [(ngModel)]="disableInputs">Disabled</mat-checkbox>
      <mat-checkbox [(ngModel)]="editable">Editable</mat-checkbox>
      <mat-checkbox [(ngModel)]="peopleWithAvatar">Show Avatar</mat-checkbox>
      <mat-checkbox [(ngModel)]="showEditIcon">Show Edit Icon</mat-checkbox>
      <mat-checkbox [(ngModel)]="disabledInteractive">Disabled Interactive</mat-checkbox>

      <h4>Input is last child of chip grid</h4>

      <mat-form-field class="demo-has-chip-list">
        <mat-label>New Contributor...</mat-label>
        <mat-chip-grid #chipGrid1 [(ngModel)]="selectedPeople" required [disabled]="disableInputs">
          @for (person of people; track person) {
            <mat-chip-row
              [editable]="editable"
              (removed)="remove(person)"
              (edited)="edit(person, $event)">
              @if (showEditIcon) {
                <button matChipEdit aria-label="Edit contributor">
                  <mat-icon>edit</mat-icon>
                </button>
              }
              @if (peopleWithAvatar && person.avatar) {
                <mat-chip-avatar>{{person.avatar}}</mat-chip-avatar>
              }
              {{person.name}}
              <button matChipRemove aria-label="Remove contributor">
                <mat-icon>close</mat-icon>
              </button>
            </mat-chip-row>
          }
          <input [disabled]="disableInputs"
                [matChipInputFor]="chipGrid1"
                [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                [matChipInputAddOnBlur]="addOnBlur"
                [matChipInputDisabledInteractive]="disabledInteractive"
                (matChipInputTokenEnd)="add($event)"
                placeholder="Add a contributor"/>
        </mat-chip-grid>
      </mat-form-field>

      <h4>Input is next sibling child of chip grid</h4>

      <mat-form-field class="demo-has-chip-list">
        <mat-label>New Contributor...</mat-label>
        <mat-chip-grid #chipGrid2 [(ngModel)]="selectedPeople" required [disabled]="disableInputs">
          @for (person of people; track person) {
            <mat-chip-row (removed)="remove(person)">
              {{person.name}}
              <button matChipRemove aria-label="Remove contributor">
                <mat-icon>close</mat-icon>
              </button>
            </mat-chip-row>
          }
        </mat-chip-grid>
        <input [matChipInputFor]="chipGrid2"
               [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
               [matChipInputAddOnBlur]="addOnBlur"
               [matChipInputDisabledInteractive]="disabledInteractive"
               (matChipInputTokenEnd)="add($event)"
               placeholder="Add a contributor"/>
      </mat-form-field>

      <p>
        The example above has overridden the <code>[separatorKeys]</code> input to allow for
        <code>ENTER</code>, <code>COMMA</code> and <code>SEMICOLON</code> keys.
      </p>

      <h4>Options</h4>
      <p>
        <mat-checkbox name="addOnBlur" [(ngModel)]="addOnBlur">Add on Blur</mat-checkbox>
      </p>

      <h4>Chip grid with no Input</h4>

      <mat-form-field class="demo-has-chip-list">
        <mat-chip-grid #chipGrid3 [(ngModel)]="selectedPeople" required [disabled]="disableInputs">
          @for (person of people; track person) {
            <mat-chip-row
              [editable]="editable"
              (removed)="remove(person)"
              (edited)="edit(person, $event)">
              @if (showEditIcon) {
                <button matChipEdit aria-label="Edit contributor">
                  <mat-icon>edit</mat-icon>
                </button>
              }
              @if (peopleWithAvatar && person.avatar) {
                <mat-chip-avatar>{{person.avatar}}</mat-chip-avatar>
              }
              {{person.name}}
              <button matChipRemove aria-label="Remove contributor">
                <mat-icon>close</mat-icon>
              </button>
            </mat-chip-row>
          }
        </mat-chip-grid>
      </mat-form-field>      
    </mat-card-content>
  </mat-card>

  <mat-card>
    <mat-card-header>Miscellaneous</mat-card-header>
    <mat-card-content>
      <h4>Stacked</h4>

      <p>
        You can also stack the chips if you want them on top of each other.
      </p>

      <mat-chip-set class="mat-mdc-chip-set-stacked">
        @for (aColor of availableColors; track aColor) {
          <mat-chip highlighted="true" [color]="aColor.color">{{aColor.name}}</mat-chip>
        }
      </mat-chip-set>

      <h4>NgModel with multi selection</h4>

      <mat-chip-listbox [multiple]="true" [(ngModel)]="selectedColors">
        @for (aColor of availableColors; track aColor) {
          <mat-chip-option [color]="aColor.color" [value]="aColor.name">{{aColor.name}}</mat-chip-option>
        }
      </mat-chip-listbox>

      The selected colors are
      @for (color of selectedColors; track color; let isLast = $last) {
        <span>{{color}}{{isLast ? '' : ', '}}</span>
      }

      <h4>NgModel with single selection</h4>

      <mat-chip-listbox [(ngModel)]="selectedColor">
        @for (aColor of availableColors; track aColor) {
          <mat-chip-option [color]="aColor.color" [value]="aColor.name">{{aColor.name}}</mat-chip-option>
        }
      </mat-chip-listbox>

      The selected color is {{selectedColor}}.

      <h4>Single selection without checkmark selection indicator.</h4>

      <mat-chip-listbox [(ngModel)]="selectedColor" [hideSingleSelectionIndicator]="true">
        @for (aColor of availableColors; track aColor) {
          <mat-chip-option [color]="aColor.color" [value]="aColor.name">{{aColor.name}}</mat-chip-option>
        }
      </mat-chip-listbox>

      <h4>Single selection with decorative icons.</h4>

      <mat-chip-listbox [(ngModel)]="selectedColor" [hideSingleSelectionIndicator]="true">
        @for (aColor of availableColors; track aColor) {
          <mat-chip-option [color]="aColor.color"
                  [value]="aColor.name">
            <mat-icon matChipAvatar>home</mat-icon>
            {{aColor.name}}
            <mat-icon matChipTrailingIcon>star</mat-icon>
          </mat-chip-option>
        }
      </mat-chip-listbox>

      The selected color is {{selectedColor}}.

      <h4>Single selection with stacked appearance.</h4>

      <mat-chip-listbox [(ngModel)]="selectedColor" class="mat-mdc-chip-set-stacked">
        @for (aColor of availableColors; track aColor) {
          <mat-chip-option [color]="aColor.color"
                  [value]="aColor.name">
            {{aColor.name}}
            <mat-icon matChipTrailingIcon>star</mat-icon>
          </mat-chip-option>
        }
      </mat-chip-listbox>

      The selected color is {{selectedColor}}.
    </mat-card-content>
  </mat-card>
</div>