标签: material-design-lite

我正在寻找一个使用Google的Material Design Lite库轻松获得以屏幕为中心的登录表单.

我经历了多次迭代,这是我提出的最好的:

<div class="mdl-cell--12-col mdl-grid">
    <div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-tablet">&nbsp;</div>

    <div class="mdl-grid mdl-cell--4-col">

        <div class="mdl-textfield mdl-js-textfield mdl-cell-12-col">
            <input class="mdl-textfield__input" type="text" id="username" />
            <label class="mdl-textfield__label" for="username">Username</label>
        </div>

        <div class="mdl-textfield mdl-js-textfield mdl-cell-12-col">
            <input class="mdl-textfield__input" type="password" id="password" />
            <label class="mdl-textfield__label" for="password">Password</label>
        </div>
    </div>

    <div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-tablet">&nbsp;</div>
</div>

是否有更好的方法在所有屏幕尺寸上实现居中形式？

与div的 感觉真难吃!

我知道Angular Material有助于实现Material Design规范,以便在Angular单页面应用程序中使用.

然而,我正在考虑使用Material Design Lite替代我的Angular项目.我想知道将Material Design Lite与AngularJS应用程序集成的最佳方法.

我已经阅读了组件列表并阅读了所提供的CSS,但我没有看到任何提到的选择框 - 只是常规输入; 文本,收音机,复选框,textarea等

如何在选择框中使用Material Design Lite？使用常规文本输入的类将您带到中途,但肯定不正确.

我试图在使用React的现有项目上使用MDL,我遇到了几个问题.第一次加载时看起来很好,尽管有很多警告信息:

警告:ReactMount:Root元素已从其原始容器中删除.新容器:

这几乎发生在具有MDL识别的类的每个DOM元素上(例如:mdl-layout,mdl-layout__content等),它发生在任何DOM更改上.

此外,在更改路由时,存在"Invariation Violation"错误:

未捕获错误:不变违规:findComponentRoot(...,.0.2.0.1.1.0.0.0.0):无法找到元素.这可能意味着DOM意外地发生了变异(例如,浏览器)......

这是否意味着MDL和React几乎不兼容？

更新:如果具有class ="mdl-js-layout"的元素不是reactjs渲染函数中最顶层的元素,则问题将消失.一旦我包裹了那个元素,一切都很好.

我正在研究使用Google的Material Design Lite框架,我想知道如何使表格跨越100%宽度的包含元素:

拿这个表:

<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
  <thead>
    <tr>
      <th class="mdl-data-table__cell--non-numeric">Material</th>
      <th>Quantity</th>
      <th>Unit price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
      <td>25</td>
      <td>$2.90</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
      <td>50</td>
      <td>$1.25</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
      <td>10</td>
      <td>$2.35</td>
    </tr>
  </tbody>
</table>

如何使这个MDL表跨越100%的容器？

我已经使用从docs中获取的表示例设置了这个JSFiddle.

我正在使用材料设计精简版复选框,我正在尝试使用JavaScript检查或取消选中该元素.我试过这个:

document.getElementById("checkbox-1").checked = true;

那不行.我尝试了与jQuery相同的方法:

$("#checkbox-1").prop('checked',true); 

那也行不通.任何帮助,将不胜感激.

当用户点击某个项目时,如何隐藏抽屉？或者单击按钮时？

<div class="mdl-layout__drawer">
        <span class="mdl-layout-title">Title</span>
        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect" id="clickme">
          <i class="material-icons">add</i>
        </button>
</div>

如何点击按钮时,抽屉将被隐藏,好像我在抽屉外面点击一样？我尝试在抽屉外模拟一个点击事件,但它仍然没有隐藏.

据我所知,这不是一个重复的问题,因为它与这个主题的其他问题有点不同.

我正在使用Google的Material Design Lite,并且页脚不会正确地停留在页面底部.

我已经看到使用这个技巧的不同修复程序

<div class="content">
    <div class="header"></div>
    <div class="body"></div>
    <div class="footer"></div>
</div>

我尝试过使用这种方法

#footer {
   bottom: 0;
   width: 100%;
   position: absolute; (or fixed)
}

第一个选项不起作用,因为Material Design Lite实际上使用了页脚标记.说实话,我真的不想这样做,因为它对我来说似乎有点草率.

页脚的CSS方法几乎可以工作但有一些问题.使用position: absolute;它时并不总是将页脚保持在页面底部,它有时会覆盖内容.当我尝试时fixed,页脚总是保留在页面的底部,但是当页面有足够的内容滚动时,它会停留在屏幕的底部并覆盖内容.双方fixed并absolute会继续页脚屏幕不是页面,这意味着,当有足够多的内容进行滚动页脚覆盖在屏幕的边缘内容的底部.

这种行为fixed可以在100%的时间内重现,但因为absolute我还没弄清楚是什么原因导致它有时起作用而不是其他起作用.

这是我对页脚的代码

<footer class="mdl-mini-footer">
    <div class="mdl-mini-footer--left-section">
        <button class="mdl-mini-footer--social-btn social-btn social-btn__twitter">
            <span class="visuallyhidden">Twitter</span>
         </button>
         <button class="mdl-mini-footer--social-btn social-btn social-btn__blogger">
            <span class="visuallyhidden">Facebook</span>
         </button>
         <button class="mdl-mini-footer--social-btn social-btn social-btn__gplus">
             <span class="visuallyhidden">Google Plus</span>
         </button>
     </div>
     <div class="mdl-mini-footer--right-section">
         <button class="mdl-mini-footer--social-btn social-btn__share">
             <i class="material-icons" role="presentation">share</i> …

如何在导航中创建子菜单项？

<!-- Navigation -->
  <nav class="mdl-navigation">
    <a class="mdl-navigation__link" href="">Link</a>
    <a class="mdl-navigation__link" href="">Link</a>
    <a class="mdl-navigation__link" href="">Link</a>
    <a class="mdl-navigation__link" href="">Link</a>
  </nav>

我不能用<ul> <li>它.什么是正确的课程？

看起来像是jQuery的jQuery.validate的正常用例已经出错了.看到这个要点.

这很好用:

<h1>Without MDL</h1>
<form id="foo">
  <input type="radio" name="bar" value="1" /> 1
  <input type="radio" name="bar" value="2" /> 2
<input type="submit" />
</form>
<script>
     $(function() {
         $('#foo').validate({
             rules: {
                 "bar": {
                     required: true
                 },
             },
             errorPlacement: function(error, element) {
                 console.log(element);
             }
         });
     });
</script>

这没有任何作用:

<h1>With MDL</h1>
<form id="zha">
    <label for="baz__1" class="mdl-radio mdl-js-radio">
        <input type="radio" name="baz" value="1" id="baz__1" class="mdl-radio__button" /> 1
    </label>
    <label for="baz__2" class="mdl-radio mdl-js-radio">
        <input type="radio" name="baz" value="2" id="baz__2" class="mdl-radio__button" /> 2
    </label>
    <input type="submit" …