如何将 MDC Web 的 Filled TextField 的高度设置得更小，但仍能让浮动标签正确浮动？

Question

我发现你可以 set the height of a MDC Web's Filled Text Field using the SASS mixin @include height(20px)。但是，使用上述 SASS mixin 设置高度后，显示的浮动标签就消失了。

进一步检查，它似乎设置为 display: none。当我手动设置为 display: block 时，它没有正确浮动并且离输入文本太近了。

如何使文本字段的高度变小，但仍能正确显示浮动标签？

Answer 1

这个在文档中没有提到，但是 height mixin 实际上有不止一个参数：

@mixin height(
  $height,
  $minimum-height-for-filled-label: variables.$minimum-height-for-filled-label,
  $query: feature-targeting.all()
) { ... }

第二个参数设置显示浮动标签的最小高度。如果高度小于最小值，则不会显示标签。默认值为 52px。所以我认为标签隐藏是故意的。

我尝试将 $minimum-height-for-filled-label 参数设置为较小的值，但文本字段的行为被破坏了。可能有一种方法可以通过覆盖其他一些 SCSS 变量来修复行为，或者它不适合用于太小的高度......或者只是错误。

或者您可以尝试使用 density mixin。对于密度 -1 它仍然显示浮动标签，但高度比默认值小一点。恕我直言，这种方式更符合 Material 设计指南。

How do I set the height of MDC Web's Filled TextField to be smaller, but still allowing the floating label to float correctly?