Question

我的目标是创建类似the one described as being 'outline variant' in these Material docs的输入。

如何配置和/或应该添加到materialize CSS forms的CSS中才能使用“轮廓”变体？

Answer 1

对于此大纲变体似乎有一些问题/要求，但Materialize人士表示当时该规范尚不属于该规范，并随后解决了这些问题。

我在Materialize框架上浏览了一些Material样本和样式，发现它们在填充，边框/阴影等方面的处理略有不同。

要实现此轮廓变体，因为默认处理将需要一些轻微破坏性的样式更新，这些更新可能应该通过预处理文件来处理，但是here is an example会进行一些快速而肮脏的覆盖

请注意标记中的附加类“ input-outlined”：

<div class="col input-field input-outlined s6">
  <input placeholder="Placeholder" id="first_name" type="text" class="validate">
  <label for="first_name">First Name</label>
</div>

Answer 2

据我所知，它们是相关的，但不是同一项目，并且不使用相同的CSS文件。我使用CDN链接进行Materialize已有一段时间，而Material.io类均未生效。

然后，我转而使用建议的Material.io CDN链接，位于此处：https://material.io/develop/web/docs/getting-started/

一旦这样做，我就可以使用HTML标记和类名，这些标记和类名在单击“ Web”选项卡后即可在page you provided上看到。

有效。 Here is a Codepen showing both styles of text inputs in action (this Codepen is using the Material.io CDN links in the settings).

填充和概述之间的主要区别是填充看起来是默认值。我推断，如果您希望偏离默认值，那么Material.io设计系统可以让您重复类名并添加修饰符。

例如，在链接的代码笔中，请注意，填充（默认）文本字段位于<div class="mdc-text-field">内，而轮廓文本字段位于<div class="mdc-text-field mdc-text-field--outlined"></div>内。

更改“实现” css框架以使用“概述的”材料样式表单输入

2 个答案: