标签: materialize

是否可以手动在表单字段上设置验证错误颜色？我无法弄清楚它是如何在他们的网站上进行验证的.似乎浏览器正在根据type属性自动执行此操作.但是我需要附加哪些CSS才能触发该状态？我需要在文本字段上进行自定义验证,而浏览器自动执行验证是不够的.

我有一个Materialize输入，如下所示：

<input type="date" className="datepicker" onChange={this.props.handleChange} />

它已由Materialize正确初始化，但在日期选择器的值更改时不会触发onChange。我在这里做错了什么？这个问题似乎扩展到所有实现输入。

我已经包含了第一个 Materialise的CSS,然后我已经链接了我的css文件.

其中我有一个设置background-color属性的示例类red,但不会覆盖默认颜色(由materialize-css设置).

这是一个例子:https: //jsfiddle.net/79ss2eyr/1/

我不想在materialize的源文件中更改任何内容,而是想添加其他类并设置其他颜色.

以下是检查员的说法:

我应该怎么做以及为什么我的css属性不会覆盖实体化,因为它是在框架之后链接的？

我使用由实现框架提供的可折叠组件.我得到一个错误,不知道如何解决它或找到一个解决方法.如果一个选项卡的内容太大,当我打开选项卡时,它不会滚动到选项卡本身的顶部(它会转到中间).

你可以在这里试试:https://jsfiddle.net/r8314ouq/.打开第一个选项卡,然后打开第三个选项卡,您将看到它不会滚动到选项卡的开始.

我知道了 但我想看看 这非常烦人,因为用户必须滚动才能看到所有内容.

我按照文档创建了我的可折叠:

<ul class="collapsible" data-collapsible="accordion">
    <li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
  </ul>

我试图捕捉事件并滚动到但它没有用.有任何想法吗？

使用Materializecss处理布局,在我的标题/导航中,我需要显示一个搜索图标,单击该图标时会展开搜索栏.

理想情况下,我希望它只是接管整个标题/ topnav,但任何扩展/到搜索栏的东西都很好.

除了提及基本代码之外,文档(http://materializecss.com/navbar.html)没有详细说明搜索栏:

  <nav>
    <div class="nav-wrapper">
      <form>
        <div class="input-field">
          <input id="search" type="search" required>
          <label for="search"><i class="material-icons">search</i></label>
          <i class="material-icons">close</i>
        </div>
      </form>
    </div>
  </nav>

怎么办呢？在Materialisecss/Material Design中我是否有一种标准方法可以做到这一点我不知道？

非常感谢

可以更改默认的实体化窗体样式吗？例如，从重点输入中删除下划线。

实现框架链接

的缺省宽度container被设定为70%的MaterializeCSS:

容器类不是网格的严格组成部分,但在布局内容时很重要.它允许您将页面内容居中.容器类设置为窗口宽度的~70%.它可以帮助您集中和包含您的页面内容.我们使用容器来包含我们的身体内容.

怎么会改变？

我试图实现验证以在单选按钮上显示错误消息,但我无法成功.

我正在使用Materializecss框架.

验证/显示错误消息适用于文本框元素而不是单选按钮.

码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
  
  <form>
  <div class="row">
    <div class="input-field col s6">
      <input class="validate" type="radio" name="mode" value="M" id="m" required="required" data-error="Error msg here">
      <label for="m">M</label>
    </div>
    <div class="input-field col s6">
      <input class="validate" type="radio" name="mode" value="F" id="f" required="required" data-error="Error msg here">
      <label for="f">F</label>
    </div>
    <div class="col s12" style="margin-top:20px">
    <button type="submit" class="waves-effect waves-green btn">
    Submit
    </button>
    </div>
  </div>
</form>

为什么不显示错误消息.任何帮助,将不胜感激.谢谢.

我尝试添加自定义CSS，但是没有用。选择输入字段后，我需要更改文本的颜色。

<div class="input-field form-group">
    <input id="first_name" class="active validate form-control" name="first_name" type="text" value="">
    <label for="first_name" class="mat-label">First Name</label>
</div>

我在angular2应用程序中有一个实现可折叠列表.我想要做的是,当有人点击它时,更改列表项的图标.到目前为止,我将一个click事件附加到列表中.当我将其打印到控制台时,我看到了元素参考.所以我能够查看子节点并找到附加了活动类的li元素.我的想法是,一旦找到活动元素,我就可以将子节点的图标更改为新图标.这样我就不会改变所有的图标.但是,当我尝试将图标设置为新图标时,我明白了TypeError: 0 is read-only.有没有人知道如何通过角度2做到这一点？

Plunker
https://plnkr.co/edit/jQWf7uIRZIwr4fhyFT03?p=preview

名单

  <ul class="collapsible" data-collapsible="accordion">
    <li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>

期望的行为:基本上我正在尝试使用materlize可折叠列表制作下拉树.因此,您单击某个项目,将其图标从加号更改为减号,以模拟您正在扩展和收缩该项目.

图片示例链接