如何解决如何将 MDC Web 的 Filled TextField 的高度设置得更小,但仍然允许浮动标签正确浮动? 其他信息
我发现你可以set the height of a MDC Web's Filled Text Field using the SASS mixin @include height(20px)
。但是,在使用该 SASS mixin 设置高度后,显示的浮动标签就会消失。
进一步检查,它似乎设置为 display: none
。当我手动将其设置为 display: block
时,它无法正确浮动并且离输入文本太近。
解决方法
文档中没有提到这一点,但是 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 Design 指南。
这是示例链接 - https://codesandbox.io/s/mdc-textfield-height-test-yj6lm
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。