Angular 4 材质 md-input 样式 css

问题描述

我有一个来自角度材料的输入组件:

I have a input component from angular material:

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

我有两个问题:

1. 如何在禁用状态下将下划线从虚线更改为粗体?
2. 我知道 API 没有特别说明，但是有什么方法可以使 floatPlaceholder 属性在这里工作.(API 只提到了对 md-select 使用此属性).

1. How do I change the underline to bold from dotted when in disabled state?
2. I know the APIs don't specifically say it but is there any way to to make the floatPlaceholder property work here. (The API only mentions the use of this property for md-select).

推荐答案

1.如何在禁用状态下将下划线从虚线更改为粗体?

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

Use ViewEncapsulation to override default styles with your custom styles. In your component.css, add the following styles:

.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:

.. and in your component.ts file, set encapsulation to 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 属性而不是 :

Add the floatPlaceholder attribute on <md-form-field> instead of <input>:

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

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

这篇关于Angular 4 材质 md-input 样式 css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！