Угловой материал чипов заполнителя

Question

Угловой материал чипов заполнителя

Ошибки и предупреждения обычно появляются в ....\logs\php_error.log или ....\logs\apache_error.log в зависимости от ваших настроек php.ini.

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

Итак, "tail -f "ваши файлы журналов, и когда вы получаете пустой экран, используйте параметры меню IE" view "->" source ", чтобы просмотреть исходный вывод.

0

angular angular-material

задан Dean Novak 11 March 2019 в 13:33

2 ответа

Другие вопросы по тегам:

angular angular-material

Похожие вопросы:

score 0 · Answer 1

Если вы хотите настроить компоненты материала Angular и предоставить свои собственные стили для заполнителя для матовых фишек, у меня есть следующие предложения. Вы можете использовать один из них.

1) Перезаписать классы на вашем основном style.css (или style.scss, в зависимости от того, что вы используете). Если вам интересно, это тот, который находится на том же уровне каталогов, что и ваш index.html, main.ts, package.json и т. Д. Вам может понадобиться добавить объявление !important

.mat-form-field-label {
  color:blue!important;
}

[1118 ] 2) Используйте ViewEncapsulation:None. Это удаляет всю инкапсуляцию, так что правила CSS будут иметь глобальный эффект.

В ваш component.ts вам нужно будет импортировать ViewEncapsulation, а затем выбрать None, когда вы предоставите определения для инкапсуляции

import { .. ViewEncapsulation } from '@angular/core';
.
.
@Component({
  selector: 'chips-autocomplete-example',
  templateUrl: 'chips-autocomplete-example.html',
  styleUrls: ['chips-autocomplete-example.css'],
  encapsulation: ViewEncapsulation.None
})

И в вашем component.css,

[112 ]

3) Настройка директивы MatPlaceholder (переопределение заполнителя Angular Material css без использования! Important) [EDIT]

В соответствии с API поля формы углового материала , оказывается, директива-заполнитель доступна после того, как мы импортировали этот модуль.

В вашем component.html включите директиву <mat-placeholder> с пользовательским классом в свой <mat-form-field> и удалите заполнитель из <input> в <mat-chip-list>

<mat-form-field class="example-chip-list">
  <mat-placeholder class="placeholder">Search</mat-placeholder>
  <mat-chip-list #chipList>       
    <mat-chip
      *ngFor="let fruit of fruits"
      [selectable]="selectable"
      [removable]="removable"
      (removed)="remove(fruit)">
      {{fruit}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <input
      #fruitInput
      [formControl]="fruitCtrl"
      [matAutocomplete]="auto"
      [matChipInputFor]="chipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      [matChipInputAddOnBlur]="addOnBlur"
      (matChipInputTokenEnd)="add($event)">
  </mat-chip-list>
  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
    <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
      {{fruit}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

И на своем component.css, определите класс .placeholder (назначенный директиве mat-placeholder) с вашими пользовательскими свойствами CSS.

.placeholder {
  color: green
}

score 0 · Answer 2

Вы можете добавить [floatLabel]="'never'", чтобы при вводе чипа заполнитель не поднимался и не был виден.

Добавить в mat-form-field

<mat-form-field class="example-chip-list" [floatLabel]="'never'"></mat-form-field>