角度更改材料输入大小 [英] Angular change MatInput Size

问题描述

我刚接触角度4，开始使用材质组件，我从官方文档复制了几个示例，但没有得到与文档相同的结果：

如何更改文本框宽度？ 我尝试style="width：200px；"style="width：100%"；class="colmd-x" 但是它们都不起作用，第二件事是如何将登录容器放在页面中间？我在这里找到了一些答案，但似乎没有一个有效，以下是我的代码：

<div class="container">
  <div class="row">
    <div class="col-md-6 offset-md-3">
        <md-card>
          <md-card-title>Login</md-card-title>
          <md-card-content>
            <form class="example-form">
              <div>
              <md-form-field class="example-full-width">
                  <input mdInput placeholder="Username" type="text">
              </md-form-field>
              </div>
              <div>
              <md-form-field class="example-full-width">
                <input mdInput placeholder="Password" type="password">
              </md-form-field>
              </div>
            </form>
          </md-card-content>
        </md-card>
      </div>
    </div>  
</div>

**

推荐答案

居中：

css：

.container{
   position: fixed;
   top: 50%;
   left: 50%; 
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%); 
   width:100%;
  }

要设置样式matInput(以前的mdInput)，请尝试以下选项之一：

1. 使用::ng-deep：

使用/Deep/阴影穿透后代组合器强制样式 通过子组件树向下移动到所有子组件 视图。/Deep/Combinator适用于任何深度的嵌套组件， 的视图子级和内容子级都适用。 组件。仅在模拟视图中使用/Deep/、>和：：NG-Deep 封装。仿真视图是默认视图，也是最常用的视图 封装。有关详细信息，请参见控制视图 封装部分。穿透阴影的后代组合体是 已弃用，正在从主要浏览器和工具中删除支持。 因此，我们计划取消角度支持(对于所有3个/Deep/，> 和：：Ng-Deep)。在此之前：：Ng-Deep应该是更广泛的 与工具的兼容性。

css：

    ::ng-deep .mat-input-wrapper{
      width:400px !important;
    }

DEMO

---

2.使用ViewEncapsulation

..。组件CSS样式被封装到组件视图中，并且 不影响应用的睡觉。 为了控制该封装如何在每个组件的基础上发生， 您可以在组件元数据中设置视图封装模式。 从以下模式中选择： …… 无表示角度不进行视图封装。角度添加了 CSS添加到全局样式。作用域规则、隔离和 前面讨论的保护措施不适用。这本质上是 与将组件样式粘贴到HTML相同。

Typscript：

  import {ViewEncapsulation } from '@angular/core';
  ....
  @Component({
        ....
        encapsulation: ViewEncapsulation.None
 })  

css：

.mat-input-wrapper{
  width:400px !important;
}

DEMO

---

3.在style.css中设置样式

这次您必须使用!important‘强制’样式。

style.css

.mat-input-wrapper{
  width:400px !important;
}

DEMO

---

4.使用内联样式

<mat-form-field style="width:400px !important" ...>
   ...
</mat-form-field>

DEMO

这篇关于角度更改材料输入大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！