Как добавить кнопку удаления к мат-основу c -чипа в Angular материал

Question

Я создал список фишек в индивидуальном стиле с mat-basic-chip (фишками без стилей) согласно официальным документам

Мои чипы выглядят как

Теперь я хочу добавить удалить buttons к моим фишкам по умолчанию mat-chips иметь

Вот шаблон mat-basic-chip

<mat-basic-chip *ngFor="let signal of signals">
                    <div matLine class="text-center">{{signal .name}}</div>
                    <div matLine class="mt-sm-n1 text-center"><small>(Default)</small></div>
</mat-basic-chip>

Согласно официальным документам получает класс mat-basi c -chip CSS в дополнение к классу mat-chip. Итак, вот чип CSS .mat-basi c для оформления моих пользовательских чипов:

.mat-basic-chip {
  display: inline-block;
  clear: right;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 1vh;
  padding: .7vh 0vh .7vh .7vh;
  margin-right: 2vh;
  margin-top:1vh;
  min-width: 15vh;
 }

Answer 1

Как добавить кнопку удаления к мат-основу c чип

Вы можете использовать обычный чип mat-chip со всеми вашими настройками, как на картинке, без изменения css.

Я взял базовый c пример mat-chip фруктов. Там изменено это на следующее:

<mat-chip
  *ngFor="let fruit of fruits"
  [selectable]="selectable"
  [removable]="removable"
  (removed)="remove(fruit)">
  <div>
    <div matLine>{{fruit}}</div>
    <div matLine><small>(Default)</small></div>
  </div>
  <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>

Модифицированный пример: https://stackblitz.com/angular/mjygopomxvq

Настройте ваш мат-чип

Это метод официально поддерживается и рекомендуется. Для получения дополнительной информации см.

• https://material.angular.io/guide/theming и
• https://material.angular.io/guide/theming-your-components

Используя это, вы можете добавить свойство color для настройки различных состояний. Для этого измените класс .mat-chip.mat-custom, тогда как mat-custom может быть чем угодно. Только mat-... должно быть одинаковым.

S CSS

.mat-chip.mat-primary {
    background-color: blue;
    color: white;
}

.mat-chip.mat-accent {
    background-color: yellow;
    color: black;
}

/* Your implementation from the description */

.mat-chip.mat-anything {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 1vh;
    padding: .7vh 0vh .7vh .7vh;
    margin-right: 2vh;
    margin-top:1vh;
}

HTML

<mat-chip-list>
  <mat-chip color="primary" selected>Primary</mat-chip>
  <mat-chip color="accent" selected>Accent</mat-chip>
  <mat-chip color="anything" selected>
    <div>
      <div matLine>Anything</div>
      <div matLine><small>(Default)</small></div>
    </div>
    <mat-icon matChipRemove>cancel</mat-icon>
  </mat-chip>
</mat-chip-list>

DEMO для справки: https://stackblitz.com/edit/angular-v5xq8y

Не стесняйтесь оставлять отзывы.

Answer 2

Вот вам пример:

<mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
          [removable]="removable" (removed)="remove(fruit)">
           {{ fruit.type }}
           <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>

Answer 3

Вы можете легко достичь этого, я получил это решение на прошлой неделе, где мне нужно то же самое в mat-chips

S CSS

  .mat-chip-list-wrapper {
    margin: 1px 0 !important;
    .mat-standard-chip {
      padding: 0 $space-5 !important;
      display: flex;
      .mat-icon {
        font-size: 17px;
      }
    }
  }

HTML

<mat-chip-list class="mat-chip-list-wrapper" aria-label="Selected list">
      <mat-chip>Hello
       <mat-icon matChipRemove >cancel</mat-icon>
      </mat-chip>      
</mat-chip-list>

Answer 4

одним из решений является использование flexbox.

должно быть примерно так:

.flex-container {
    display: flex;
    white-space: nowrap;
}

.content {
    text-align: center;
}

.cancel-button {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 5px;
}


mat-basic-chip {
    display: inline-block;
    clear: right;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 1vh;
    padding: .7vh 0vh .7vh .7vh;
    margin-right: 2vh;
    margin-top:1vh;
    min-width: 15vh;
}

    <mat-basic-chip *ngFor="let signal of signals">
        <div class="flex-container">
            <div class="content">
                <div matLine class="text-center">{{signal.name}}</div>
                <div matLine class="mt-sm-n1 text-center"><small>(Default)</small></div>
            </div>
            <div class="cancel-button">
                <mat-icon matChipRemove *ngIf="removable">X</mat-icon>
            </div>
        </div>
</mat-basic-chip>

css более призрачно и может быть изменено для ваших критериев и используемых спецификаций каркаса, основная идея в макете шаблона.

Answer 5

Вы можете нажать кнопку view source в официальных документах, чтобы узнать, как они это сделали. Они добавляют матовый значок в чип, как это:

<mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
         [removable]="removable" (removed)="remove(fruit)">
  {{fruit.name}}
  <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>

Вам не нужно заново изобретать колесо и писать свой собственный значок для кнопки удаления, это уже сделано.

Присмотритесь к официальным документам и нажмите кнопку view source.

Удачи!