标签: angularjs-material

我在Windows 10上,使用Node 5.6.0和npm 3.6.0.我正在尝试将angular-material和mdi安装到我的工作文件夹中.npm install angular-material mdi错误:

+-- angular@1.5.0

+-- UNMET PEER DEPENDENCY angular-animate@^1.5.0

+-- UNMET PEER DEPENDENCY angular-aria@^1.5.0

+-- angular-material@1.0.6

+-- UNMET PEER DEPENDENCY angular-messages@^1.5.0 `-- mdi@1.4.57

npm WARN enoent ENOENT: no such file or directory, open
'C:\Users\xxxxx\Desktop\ngClassifieds\package.json' 

npm WARN angular-material@1.0.6 requires a peer of
angular-animate@^1.5.0 but none was installed. 

npm WARN angular-material@1.0.6 requires a peer of angular-aria@^1.5.0
but none was installed. 

npm WARN angular-material@1.0.6 requires a peer of
angular-messages@^1.5.0 but none was installed.

如何解决此问题以安装AngularJS Material和MDI？

我想知道如何使用Material的图标,因为这不起作用:

<material-icon icon = "/img/icons/ic_access_time_24px.svg"> </material-icon> 

我想作为icon属性的参数给出的路径存在问题.我想知道这个图标文件夹到底在哪里？

我期待一个内置指令或标签,但可能不是根据他们的文档.

这是一个例子.

<div class="radioButtondemoBasicUsage" ng-app="MyApp">
<form ng-submit="submit()" ng-controller="AppCtrl">
<p>Selected Value: <span class="radioValue">{{ data.group1 }}</span> </p>

<md-radio-group ng-model="data.group1">

  <md-radio-button value="Apple" class="md-primary">Apple</md-radio-button>
  <md-radio-button value="Banana"> Banana </md-radio-button>
  <md-radio-button value="Mango">Mango</md-radio-button>

</md-radio-group>

我想在一个句子中设置一个单词,使其具有md-primary颜色,另一个单词设置为具有强调颜色.我假设这样的事情:

<div>
    Hello <span class="md-primary">friend</span>. 
    How are <span class="md-accent">you</span>?
</div>

但这些类仅适用于某些指定的组件.

这样做的方法是什么？

ngAria(一个辅助功能模块)正在为我的Angular Material项目添加一个不必要的bower导入 - 现在它正在抛出警告:

节点上缺少可访问性所需的属性"aria-label"

我只添加了ngAria,因为它似乎是ngMaterial所必需的.我的应用程序不需要屏幕阅读器可访问性.

无论如何,我如何从ngMaterial中删除ngAria？或者至少禁用所有警告.

编辑: 似乎禁用ngAria警告的唯一简单方法是console.warn = function() {};关闭浏览器的警告(我不建议这样做,因为它可能会隐藏与咏叹调无关的警告)

AngularJS Material使用md-theme-style属性插入多个(大约30个)样式标记.我想这是某种性能调整,但我宁愿自己做 - 我不需要外部框架来以这种讨厌的方式污染我的HTML.关于如何摆脱样式标签的任何想法？

我下面的教程把md-tabs在md-toolbar来自这里.但是,我选择的指标选项卡与md-primary使其不可见的颜色相同.请看下面的图片.

但是,当我改变md-tabsto 的颜色时md-accent,它会显示指示器.

如何更改所选指标选项卡的颜色？

这是代码:

<md-toolbar class="md-whiteframe-5dp">
    <div class="md-toolbar-tools">
        <h2>Title</h2>
    </div>

    <md-tabs md-selected="tabs.selectedIndex">
        <md-tab id="tab1" aria-controls="tab1-content">Tab #1</md-tab>
        <md-tab id="tab2" aria-controls="tab2-content">Tab #2</md-tab>
        <md-tab id="tab3" aria-controls="tab3-content">Tab #3</md-tab>
    </md-tabs>
</md-toolbar>

<md-content layout-padding flex>
    <ng-switch on="tabs.selectedIndex" class="tabpanel-container">
        <div role="tabpanel" id="tab1-content" aria-labelledby="tab1" ng-switch-when="0" md-swipe-left="tabs.next()" md-swipe-right="tabs.previous()">
            View for Item #1<br />
            data.selectedIndex = 0
        </div>

    <div role="tabpanel" id="tab2-content" aria-labelledby="tab2" ng-switch-when="1" md-swipe-left="tabs.next()" md-swipe-right="tabs.previous()">
        View for Item #2<br />
        data.selectedIndex = 1
    </div>

    <div role="tabpanel" id="tab3-content" …

我正在尝试创建一个Angular-Material卡网格,其行为有点像Bootstrap网格.理想情况下,对于小屏幕宽度,卡片将是全宽度的,并且在较大断点处跳转到两列.

用2张卡片演示

问题是AM为每张卡创建了列.我还没想出如何为每个断点指定列数.

用5张卡演示

这是我正在使用的标记的基础,它在第一个断点处从行到列采用卡布局:

<div ng-app layout="column" layout-gt-sm="row" class="layout-sm-column layout-row">
  <div flex class="flex" ng-repeat="i in [1,2,3,4,5] track by $index">
    <md-card>

SO上已经有类似的问题,但是接受的答案并不令人满意,因为它使用自定义CSS并且卡片不是流畅的.我没有找到其他类似的例子.

我想我可以使用Angular循环每两张卡并创建堆叠集,但这似乎是不必要的麻烦.我不得不认为Material提供了更好的解决方案.此外,这样的解决方案会在卡片高度不同的页面中留下空白.材料似乎面向类似砌体的柔性布局,我想坚持下去.

谢谢.

我正在尝试为div编写CSS,这应该仅在特定断点被触发时应用,例如.sm,md或lg.

我正在使用角度材料(https://material.angularjs.org).

我知道这可以使用媒体查询来完成,@media (max-width: 480px) { ... }但我正在寻找一种角度材料的方式来做到这一点.

如何在Angular Material中使用css更改md-input-container占位符颜色？如下面的截图我有电话号码.和密码文本字段.电话号码.textfield有电话号码,密码有密码占位符名称.