角材料芯片占位符 [英] Angular Material Chips placeholder

问题描述

我正在使用Angular Material自动完成芯片( https://material.angular.io/组件/芯片/示例). 因此，有一个占位符，它会在您单击字段后上升. 是否可以删除此占位符，所以我可以使用不带角度材质样式的默认占位符? 我试图在开发工具中找到它，但是我找不到.

I'm using Angular Material autocomplete chips (https://material.angular.io/components/chips/examples). So there is placeholder which goes up after u click on field. Is it possible to delete this placeholder, so then i can use default placeholder w/o angular material styles ? I've tried to find it inside dev tools, but i couldn't.

推荐答案

如果您想自定义Angular材料组件并为垫片式占位符提供自己的样式，我有以下建议.您可以使用其中之一.

if you would like to customise your Angular material components and provide your own stylings for the mat-chips placeholder, I have the following suggestions. You may use one of them.

1)覆盖主style.css(或style.scss，无论使用哪种)上的类.如果您想知道，它是与index.html，main.ts，package.json等位于同一目录级别的目录.您可能需要添加!important声明

1) Overwrite the classes on your main style.css (or style.scss, whichever you are using). If you are wondering, it is the one that is on the same directory level as your index.html, main.ts, package.json, etc. You might need to add the !important declaration

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

2)使用ViewEncapsulation:None.这将删除所有封装，这样CSS规则将具有全局作用.

2) Use ViewEncapsulation:None. This removes all encapsulation, such that CSS rules will have a global effect.

在component.ts上，您将需要导入ViewEncapsulation，然后在提供封装的定义时选择无"

On your component.ts, you will need to import ViewEncapsulation, followed by selecting None when you provide the definitions for encapsulation

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

And on your component.css,

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

3)自定义MatPlaceholder指令(不使用！important覆盖Angular Material占位符css)

3) Customising the MatPlaceholder directive (overriding the Angular Material placeholder css without using !important)

根据角度材料表单字段API ，导入该模块后，就可以访问占位符指令.

According to the Angular Material Form Field API, it turns out the placeholder directive is accessible once we have imported that module.

在component.html上，将<mat-placeholder>指令包含在<mat-form-field>中的自定义类中，并从<input>

On your component.html, include the <mat-placeholder> directive with a custom class within your <mat-form-field>, and remove placeholder from the <input> within the <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上，使用自定义CSS属性定义.placeholder类(分配给mat-placeholder指令).

And on your component.css, define the .placeholder class (assigned to the mat-placeholder directive) with your custom CSS properties.

.placeholder {
  color: green
}

这篇关于角材料芯片占位符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！