Question

如何用mat-form-field来更改appearance="outline"中的高度？

我需要减小垫形场。

Answer 1

TLDR：：调整周围容器的字体大小。

更长： 调整表单字段大小的功能内置在Angular Material中，因此除非您想更改字段中的相对比例，否则不必为调整单个组件的大小而感到困惑（see documentation）。

调整字段大小的关键实际上只是调整周围容器中的字体大小。一旦这样做，其他所有内容都将随之扩展。例如

使用容器字体大小：12px;

<div style="font-size: 12px">
  
  <mat-form-field appearance="outline">
    <mat-label>Your name</mat-label>
    <input matInput placeholder="Jane Doe">
  </mat-form-field>

  <mat-form-field appearance="outline">
    <mat-label>Your email</mat-label>
    <input matInput placeholder="you@youremail.com">
  </mat-form-field>

</div>

结果表格：

使用容器字体大小：18px;

<div style="font-size: 18px">
  
  <mat-form-field...

</div>

结果表格：

NB

如果您对表单内的填充比例不满意，这不是您的解决方案。但这与您如何简单调整表单大小是一个不同的问题。调整大小很简单，更改填充和边距比率更加麻烦！

Answer 2

将这些添加到original stackblitz

中的CSS中

::ng-deep .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0px !important;}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-label { margin-top:-15px; }
::ng-deep label.ng-star-inserted { transform: translateY(-0.59375em) scale(.75) !important; }

已更新：标签的过渡...

::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%;
}

Answer 3

TL; DR物料表单字段基于字段的font-size属性。

在CSS / SCSS中不要犯错误的调整材料高度，划桨等...诸如“输入”和“选择”之类的“材料形式”元素均基于font-size。另外，不建议使用内联样式，因此您只需添加一些CSS。外观属性无关。

::ng-deep .mat-form-field {
    font-size: 12px; // example
}

Answer 4

使用@AkberIqbal的解决方案弄乱了我在outline之外的mat-form-fields的样式。同样，此解决方案不需要任何!important;。使用!important;，您已经迷失了：D。

因此，这是一种添加到您的全局样式的保存方法：（似乎过大了，但我宁愿保存而不是后悔）

mat-form-field.mat-form-field.mat-form-field-appearance-outline > div.mat-form-field-wrapper > div.mat-form-field-flex > div.mat-form-field-infix  { padding: 0.4em 0px }
mat-form-field.mat-form-field.mat-form-field-appearance-outline > div.mat-form-field-wrapper > div.mat-form-field-flex > div.mat-form-field-infix > span.mat-form-field-label-wrapper { top: -1.5em; }

.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%;
}

如您所见。我“搜寻”每堂课，直到找到大纲！ 我喜欢仅将轮廓样式应用于轮廓字段。

Answer 5

这是另一种方法：

/* Angular Material Overrides */
.mat-form-field-appearance-outline .mat-form-field-outline {
  color: #ccc; /* Override outline color. */
}

.mat-form-field-appearance-outline .mat-form-field-infix {
  padding: .65em 0; /* Original top/bottom value was 1em. */
}


.mat-input-element {
  position: relative;
  top:  -1.2em; /* Adjust accordingly to keep placeholder/input text vertically centered. */
}

.mat-form-field-label-wrapper {
  top: -1.2em; /* Adjust accordingly to keep <mat-label> text vertically centered. */
}

Answer 6

这是我最近针对32像素高且允许圆角的字段的解决方案。

  & .mat-form-field-wrapper {
    height: 44.85px;

    & .mat-form-field-flex {
      height: 32px;

      & .mat-form-field-outline {
        $borderRadius: 25px;
        height: 28px;

        & .mat-form-field-outline-start {
          border-radius: $borderRadius 0 0 $borderRadius;
          width: 13px !important; // Override Material in-line style
        }

        & .mat-form-field-outline-end {
          border-radius: 0 $borderRadius $borderRadius 0;
        }
      }

      & .mat-form-field-infix {
        left: 4px;
        padding: 0;
        top: -7px;

        & .mat-form-field-label,
        & .mat-input-element {
          font-size: 12px;
        }

        & .mat-form-field-label-wrapper {
          top: -1.04375em;

          & .mat-form-field-label {
            height: 16px;
          }
        }
      }
    }
  }

Answer 7

如果有人要使Akber Iqbal的答案基于类（同时提供两种尺寸）：

:host ::ng-deep {
  .my-custom-component-small { // add my-custom-component-small class to your mat-form-field element
    .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0 !important;}
    .mat-form-field-label-wrapper { top: -1.5em; }

    &.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%;
    }
  }
}

希望Angular团队在将来的版本中增加对高密度UI的支持（高密度是material design specifications的一部分）。

Answer 8

这是我使用的：

.small-input.mat-form-field-appearance-outline .mat-form-field-infix {
    padding: .25em 0 .75em 0;
    font-size: 14px;
}
.small-input.mat-form-field-appearance-outline .mat-form-field-infix .mat-select-arrow{margin-top: 10px;}
.small-input.mat-form-field-appearance-outline .mat-select-empty + .mat-form-field-label-wrapper .mat-form-field-label{margin-top: -0.75em;}

Answer 9

此处提到了无法隐藏浮动标签的“问题”：https://github.com/angular/components/issues/11845

提到的一个很好的解决方法是不在您的 mat-form-field 中包含 mat-label 并将其添加到您的 css（本地或全局）中。您可能需要使用 ::ng-deep。

.mat-form-field:not(.mat-form-field-has-label) .mat-form-field-infix {
  border-top-width: 0;
}

Answer 10

正如许多帖子人所解释的那样，材料角度表单域基于字体大小，因此对于所有想要定义自定义表单域的人，这里是我的代码，可以在不影响输入的情况下调整高度和宽度的大小字体或图标切换大小。

在组件 css 中定义此代码并将它们作为一个类应用于 mat-form-field 标签。

.custom-form-field {
  width: 200px;
  font-size: 10px;
  margin-top: 3px;
  margin-bottom: -1.25em;

  mat-datepicker-toggle {
      font-size: 12px;
  }

  input.mat-input-element {
      padding-bottom: 2px;
      font-size: 12px;
      color: $title-color;
  }
}

如何在垫形场中更改高度

10 个答案:

使用容器字体大小：12px;

使用容器字体大小：18px;

NB