时间戳

首页 > 解决方案 > 如何将 MDC Web 的 Filled TextField 的高度设置为更小，但仍允许浮动标签正确浮动？

css - 如何将 MDC Web 的 Filled TextField 的高度设置为更小，但仍允许浮动标签正确浮动？

问题描述

我发现您可以使用 SASS mixin 设置 MDC Web 的填充文本字段的高度@include height(20px)。但是，在使用所述 SASS mixin 设置高度时，显示的浮动标签就会消失。

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

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

标签： cssmaterial-designmaterial-componentsmdc-componentsmaterial-components-web

解决方案

文档中没有提到这一点，但heightmixin 实际上有不止一个参数：

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

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

附加信息

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

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

这是示例链接 - https://codesandbox.io/s/mdc-textfield-height-test-yj6lm

推荐阅读