Angular 4材料md-input style css

Question

我有角度材料的输入组件:

<input mdInput placeholder="Name" disabled floatPlaceholder="never">

我有两个问题:

1. 处于禁用状态时,如何将下划线更改为粗体？
2. 我知道API没有具体说明,但有没有办法让这个floatPlaceholder属性在这里工作.(API仅提及此属性的使用md-select).

Answer 1

1.处于禁用状态时,如何将下划线更改为粗体？

使用ViewEncapsulation覆盖自定义样式的默认样式.在您的中component.css,添加以下样式:

.mat-form-field-underline.mat-disabled {
  background-image:linear-gradient(to right,rgba(0,0,0,.42) 0,rgba(0,0,0,.42) 100%,transparent 0);
  /* Set 4px for a solid line */
  background-size : 4px 4px; 
}

..并在您的component.ts文件中,设置encapsulation为ViewEncapsulation.None:

import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  encapsulation: ViewEncapsulation.None
})

2.我知道API没有具体说明,但有没有办法让floatPlaceholder属性在这里工作.(API仅提及md-select使用此属性).

添加floatPlaceholder属性<md-form-field>而不是<input>:

<md-form-field floatPlaceholder="never">
    <input mdInput placeholder="Name" disabled >
</md-form-field>

这是完整工作演示的链接.