Question

我是MDL的新手，并试图找出如何真正使用它超出完全预先组合的示例。

我想修改包含可扩展搜索字段的以下代码示例。我希望输入文本框的颜色在展开时是一种对比色，而不是与标题相同的颜色（因为你可以在那里输入一些东西不那么明显）。

<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.cyan-indigo.min.css" />
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout-title">Title</span>
      <div class="mdl-layout-spacer"></div>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="#">Home</a> 
        <a class="mdl-navigation__link" href="#">About</a>
        <a class="mdl-navigation__link" href="#">Contact</a>
      </nav>
      <!-- start search form -->
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
        <label class="mdl-button mdl-js-button mdl-button--icon" for="search-expandable">
          <i class="material-icons">search</i>
        </label>
        <div class="mdl-textfield__expandable-holder">
          <input class="mdl-textfield__input" type="text" id="search-expandable" />
          <label class="mdl-textfield__label" for="search-expandable">Search text</label>
        </div>
      </div>
      <!-- end search form -->
    </div>
  </header>
</div>

我试过替换

<input class="mdl-textfield__input" type="text" id="search-expandable" />

与

<input class="mdl-textfield__input--white" type="text" id="search-expandable" />

但即使文本框没有展开，也会使文本框变白，这看起来很有趣。

我的问题是：

如何在展开时仅更改搜索框的颜色？
使用BEM命名方案，我猜对了 mdl-textfield__input - white定义在某个地方，显然是是的，因为盒子变白了。命名方案给了我一个开始猜测的地方，但找出什么是一个简单的方法真的已经定义了我需要自己定义的东西吗？

我想出了如何使用浏览器开发人员工具转到给定类的css并取消它，但是一旦在那里，仍然很难找到可用的选项。然后我尝试了mdl-textfield__input - green（yuck），但它保持白色。而我实际上无法通过开发人员工具找到--white或--green样式定义，因此可能既不存在也不存在。
mdl-textfield__input - white是一个不错的选择/风格/名称？这个名字很清楚，但是如果我将网站上的配色方案更改为白色不会形成鲜明对比的话呢？

Answer 1

1）使用自定义CSS修改颜色。您需要检查活动状态和所有状态，但使用Chrome DevTools应该很难找到。只需展开它，检查节点，并查看如何仅在展开时定位它。

2a）mdl-textfield--white当然没有定义。我不知道那里发生了什么，但它不应该工作（除非你不定义mdl-textfield，然后我就能理解为什么它会变白。）

2b）要了解为每个组件定义的内容，只需访问组件文档页面即可。或者，您可以随时弹出Chrome的Devtools，转到“Sources”面板，打开material.css（或.min.css），然后使用 ctrl快速查找代码 + ˚F 。如果你没有看到它，那么它永远不会定义。

3）请不要创建使用mdl命名空间的自定义类。这可能与未来的添加相冲突。创建自己负责的类。至于命名它们，这完全取决于您喜欢哪种命名方法。我们选择BEM作为MDL，因为它为第三方提供的组件提供了清晰的结构。

MDL可扩展文本字段标记更改＆amp;如何查找现有标记名称

1 个答案: