标签: material-design-lite

我正在使用Material Design Lite在Web视图中为应用程序创建UI但是我遇到了一个问题,我无法在滑动时部署导航抽屉.

我正在使用此jquery代码来识别滑动事件

  $(function() {      
      $("#test").swipe( {
        //Generic swipe handler for all directions
        swipeRight:function(event, direction, distance, duration, fingerCount) {
          $(this).text("Event Triggered" );  
        },
      });
    });

从这里我不知道如何打开导航抽屉.我更希望整个屏幕"可以滑动",尤其是左边缘.触发此滑动处理程序时,如何打开导航栏？

最近,我一直在将Material Design Lite集成到我的React Web应用程序中.在大多数情况下,一切都很好,但目前我在React的事件处理方面存在一些问题,这似乎与某些MDL组件不太匹配.

特别是,我有一个带有onClick处理程序的DOM元素,它可以很好地工作,直到添加MDL工具提示,这会导致onClick不再触发.我已经尝试了几乎所有可能的变化(把工具提示放在DOM的其他地方,将onClick处理程序附加到一个容器div,它有一个小孩的工具提示等),我似乎无法让它工作.

这是一个演示该问题的JSBin(我还包含了一个示例,该示例使用jQuery在组件安装后将单击处理程序绑定到元素,实际上可以正常工作):

http://jsbin.com/sewimi/3/edit?js,output

我有一些理论为什么这不起作用,但我不知道React或MDL验证它们中的任何一个.

我认为它与React处理事件的方式有关,并且出于某种原因,MDL似乎与它发生冲突.从文档:

React实际上并不将事件处理程序附加到节点本身.当React启动时,它会使用单个事件侦听器开始侦听顶级的所有事件.安装或卸载组件时,只需在内部映射中添加或删除事件处理程序.当事件发生时,React知道如何使用此映射调度它.当映射中没有事件处理程序时,React的事件处理程序是简单的no-ops

这使得看起来MDL可能会搞乱React的事件内部映射,这导致我对元素的点击成为无操作.但同样,这只是一个完整的猜测.

有没有人对此有任何想法？我宁愿不必componentDidMount为每个使用MDL工具提示的组件手动绑定事件监听器(就像我在我提供的示例JSBin中所做的那样),但这是我现在要使用的解决方案.

此外,由于我不确定这是否是MDL特定的错误,我选择在此处发布此问题而不是在他们的问题页面上.如果有人认为我也应该在那里发布,请告诉我,我可以做到.

谢谢!

我有一个包含许多列的简单表格，我希望在调整浏览器窗口大小时自动缩小列。在table-responsive与引导工作，但我在寻找一个角材质类似的东西。我试图避免有 2 个表定义，并且我不想在 CSS 中自己做这个。Angular Material 有没有标准的方法来解决这个问题？

<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp" flex>
    <thead>
        <th class="mdl-data-table__cell--non-numeric">Date</th>
        <th class="mdl-data-table__cell--non-numeric">Time</th>
        <th class="mdl-data-table__cell--non-numeric">Park</th>
        <th class="mdl-data-table__cell--non-numeric">Home Team</th>
        <th class="mdl-data-table__cell--non-numeric">Away Team</th>
        <th class="mdl-data-table__cell--non-numeric">Win/Loss</th>
    </thead>
    <tbody>
        <tr ng-repeat="game in games">
            <td class="mdl-data-table__cell--non-numeric">{{game.GameDate | SLS_Date}}</td>
            <td class="mdl-data-table__cell--non-numeric">{{game.GameTime | SLS_Time:'HH:mm' }}</td>
            <td class="mdl-data-table__cell--non-numeric">{{game.VenueName}}</td>
            <td class="mdl-data-table__cell--non-numeric">{{game.HomeTeamName}}</td>
            <td class="mdl-data-table__cell--non-numeric">{{game.AwayTeamName}}</td>
            <td class="mdl-data-table__cell--non-numeric">{{game.WinLoss}}</td>
        </tr>
    </tbody>
</table>

请注意，我在这里使用了 Material Design Lite 表，因为 Angular Material 今天没有表。同样的问题，包括使用 flex 和网格。

我猜新的 Material 世界不喜欢表格，所以最好的选择是更改布局以不使用表格。

对于MDL表,是否有一个属性可以使表响应？

有没有办法有一个滑块,旁边有一个可编辑的字段,它的当前值？

我使用MDL而不是聚合物,因为它重量轻,应该与本地运行的软件一起分发.

所以material-design-litev1.x中没有内置机制用于"筹码"或列表附加到输入/搜索字段,和/或为了响应事件而填充/显示.

我发现了这个:http://immybox.js.org/ - 但是对于MDL有一般的最佳做法,有自动完成/搜索建议吗？

或者,像MDL中的谷歌/ YouTube搜索栏？

是否有内置方法来更改Material Design Lite 文本字段的颜色？特别是,使用文本字段之前的默认文本和下划线.在下面的示例中,"Text ..."和下划线默认为灰色.当我使用深色背景时,我需要它们是白色的.

<!-- Simple Textfield -->
<form action="#">
  <div class="mdl-textfield mdl-js-textfield">
    <input class="mdl-textfield__input" type="text" id="sample1">
    <label class="mdl-textfield__label" for="sample1">Text...</label>
  </div>
</form>

我不想在选择文本字段后更改文本的颜色或下划线,只是在文本字段未使用时更改文本和下划线.

<header class="mdl-layout__header">
    <div class="mdl-layout__header-row">

        <!-- Navigation -->
        <nav class="mdl-navigation">
            <a class="mdl-navigation__link is-active" href="/">link</a>
            <a class="mdl-navigation__link is-active" href="/">link</a>
        </nav>
    </div>
</header>
<div class="mdl-layout__drawer">
    <nav class="mdl-navigation">
        <a class="mdl-navigation__link is-active" href="/">link</a>
        <a class="mdl-navigation__link is-active" href="/">link</a>
    </nav>
</div>

<!-- Colored FAB button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
    <i class="material-icons">add</i>
</button>

根据http://mdlhut.com/2015/07/where-is-the-mdl-drawer-icon/,只要我componentHandler.upgradeDom()在动态加载html后调用它就应该工作.为了确保我正在调用upgradeDom,我添加了按钮以查看是否添加了涟漪效果.按钮已更新,但汉堡包图标未显示.

如果我内联html汉堡包图标出现.

奇怪的虫子.....

• 我有一个竞争条件,我的angularJS指令用于header并在 material-design-lite初始化布局后drawer进行编译.

• 只有当我关闭我的wifi并离线工作时才会发生这种情况.不需要远程资源,但谷歌标签管理器和Facebook连接插件在网络选项卡中失败.

问题:

1. 我可以延迟MDL的自动初始化(我看到onload页面发生了什么？
2. 我可以手动重新初始化mdl-layout,以便它可以重新构建抽屉按钮等吗？
3. 有没有人知道为什么离线会导致任何渲染/ javascript问题？

我已经尝试window.componentHandler.upgradeAllRegistered()但不会重新初始化布局

我是Material Design Lite的新手.我想使用自定义配色方案,特别是原色和强调色.

我见过他们的主题构建工具,但它只提供了一些颜色.

我怎样才能做到这一点？如何在我的网站中使用自定义(主要和重点)颜色(未包含在其主题构建工具中),使用Material Design Lite？