角度更改材料输入大小
本教程将介绍角度更改材料输入大小的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。
问题描述
我刚接触角度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
),请尝试以下选项之一:
使用::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
好了关于角度更改材料输入大小的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。