Angular 8:将 Mat-form-field 中的高度更改为特定像素数
Posted
技术标签:
【中文标题】Angular 8:将 Mat-form-field 中的高度更改为特定像素数【英文标题】:Angular 8: Change Height in Mat-form-field to Specific pixel number 【发布时间】:2020-05-15 12:58:31 【问题描述】:如何将mat-form-field
和appearance="outline"
中的高度更改为特定的高度像素数,40 像素(或未来用户体验团队所需的任何数字)。我需要减少 mat-form-field。
如何做到这一点?公式是什么,或者哪个零件号可以修改为 40px? -1.1? .75 , 133%, 使用下面的答案寻找某种函数或数学方程式,或任何其他可能有效的选项。
https://***.com/a/54762506/12425844
::ng-deep .mat-form-field-flex > .mat-form-field-infix padding: 0.4em 0px !important;
::ng-deep .mat-form-field-label-wrapper top: -1.5em;
::ng-deep .mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label
transform: translateY(-1.1em) scale(.75);
width: 133.33333%;
【问题讨论】:
height:40px 有什么问题; ? stackblitz.com/edit/angular-31dawx ***.com/questions/54760371/… 不适合你吗? 未指定,已在问题中引用 您是否要设置为精确的 40 像素?你能解释一下演示中有什么问题吗? 你的意思是元素的总大小为 40px,包括填充和提示/错误的空间,还是你的意思是轮廓应该是 40px? 【参考方案1】:兄弟,我知道你了,一些简单的解决方案是:
将此添加到您的 CSS 中
::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex
height: 40px !important
::ng-deep .mat-form-field-infix
padding-top: 1px !important;
解释
您可以在此处随意控制 mat-form-field 的高度。
::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex
height: 40px !important
通过这个波纹管,您可以控制您的 mat-form-field 占位符填充以匹配您放置的新高度。
::ng-deep .mat-form-field-infix
padding-top: 1px !important;
我在这里尝试过并且工作正常
【讨论】:
【参考方案2】:不确定你想从哪里剪裁,所以我给你几个选择,你可以决定剪什么和剪多少,以获得合适的尺寸
从顶部和底部删除边距
::ng-deep mat-form-field.mat-form-field-appearance-outline .mat-form-field-wrapper
margin: 0;
改变字体大小
mat-form-field
font-size: 10px;
删除提示和错误(底部有空格)
::ng-deep .mat-form-field-wrapper
padding-bottom: 0;
::ng-deep .mat-form-field-subscript-wrapper
display: none;
更改内边距(顶部和底部默认为 1em)
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix
padding: .5em;
注意:如果您选择做最后一个,您还必须像这样更改.mat-form-field-label
的top
或margin-top
::ng-deep .mat-form-field-appearance-outline .mat-form-field-label
top: ...;
margin-top: ...;
【讨论】:
【参考方案3】:您可以在此处查看您的项目依赖项 (@angular/material 8.2.3):node_modules\@angular\material\_theming.scss
第 ~ 4540 行:@mixin _mat-form-field-outline-label-floating 和 mat-form-field-outline-typography:
// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,
// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some
// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters
// an unknown pseudo-class it will discard the entire rule set.
$mat-form-field-outline-dedupe: 0;
// Applies a floating label above the form field control itself.
@mixin _mat-form-field-outline-label-floating($font-scale, $infix-padding, $infix-margin-top)
transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-outline-dedupe)
scale($font-scale);
width: 100% / $font-scale + $mat-form-field-outline-dedupe;
$mat-form-field-outline-dedupe: $mat-form-field-outline-dedupe + 0.00001 !global;
@mixin mat-form-field-outline-typography($config)
// The unit-less line-height from the font config.
$line-height: mat-line-height($config, input);
// The amount to scale the font for the floating label and subscript.
$subscript-font-scale: 0.75;
// The padding above and below the infix.
$infix-padding: 1em;
// The margin applied to the form-field-infix to reserve space for the floating label.
$infix-margin-top: 1em * $line-height * $subscript-font-scale;
// The space between the bottom of the .mat-form-field-flex area and the subscript wrapper.
// Mocks show half of the text size, but this margin is applied to an element with the subscript
// text font size, so we need to divide by the scale factor to make it half of the original text
// size.
$subscript-margin-top: 0.5em / $subscript-font-scale;
// The padding applied to the form-field-wrapper to reserve space for the subscript, since it's
// absolutely positioned. This is a combination of the subscript's margin and line-height, but we
// need to multiply by the subscript font scale factor since the wrapper has a larger font size.
$wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;
// The amount we offset the label from the input text in the outline appearance.
$outline-appearance-label-offset: -0.25em;
.mat-form-field-appearance-outline
.mat-form-field-infix
padding: $infix-padding 0 $infix-padding 0;
.mat-form-field-label
top: $infix-margin-top + $infix-padding;
margin-top: $outline-appearance-label-offset;
&.mat-form-field-can-float
&.mat-form-field-should-float .mat-form-field-label,
.mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label
@include _mat-form-field-outline-label-floating(
$subscript-font-scale, $infix-padding + $outline-appearance-label-offset,
$infix-margin-top);
// Server-side rendered matInput with a label attribute but label not shown
// (used as a pure CSS stand-in for mat-form-field-should-float).
.mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
.mat-form-field-label
@include _mat-form-field-outline-label-floating(
$subscript-font-scale, $infix-padding + $outline-appearance-label-offset,
$infix-margin-top);
【讨论】:
【参考方案4】:您可以在 mat-form-field 中添加 panelClass,如下所示:
您的 component.html:
<mat-form-field panelClass="example-class"></mat-form-field>
并在全局css文件中设置样式
styles.scss:
.example-class
height:40px
【讨论】:
以上是关于Angular 8:将 Mat-form-field 中的高度更改为特定像素数的主要内容,如果未能解决你的问题,请参考以下文章
使用 iframe 将 AngularJS 迁移到 Angular 8
将 ASP.Net Core Angular 模板从版本 8 更新到 9