标签: angular-material2

我没有找到任何关于如何使用ng2材料的md-ripple的信息.

试着

<button md-ripple-foreground class="loginButton"></button>

要么

<button md-ripple-fade-in class="loginButton"></button>

要么

<button md-ripple class="loginButton"></button>

但它们都没有真正起作用.怎么打开它？

如果你不知道涟漪如何工作:https://codepen.io/Craigtut/pen/dIfzv

https://github.com/angular/material2/tree/master/src/lib/core/ripple

我想改用Lato.我试图在增加它index.html和styles.css,但不工作.

如何在Angular Material2中更改单选按钮的默认颜色？我读了几个关于这个主题的问题,但没有一个能解决这个问题.如何为具有类的元素设置绿色,黄色和红色md-radio-button？

我正在使用Angular 2和Ngrx以及Angular Material.是否所有UI更改(如下拉列表或对话框)应该存储在哪里？

例如:

<button md-button [mdMenuTriggerFor]="menu">Menu</button>
<md-menu #menu="mdMenu">
  <button md-menu-item>Item 1</button>
  <button md-menu-item>Item 2</button>
</md-menu>

我应该支持商店下拉吗？

下一个例子:

<md-sidenav-container class="example-container">
  <md-sidenav #sidenav class="example-sidenav">
    Jolly good!
  </md-sidenav>

  <div class="example-sidenav-content">
    <button type="button" md-button (click)="sidenav.open()">
      Open sidenav
    </button>
  </div>

</md-sidenav-container>

我可以使用open方法吗？也许我应该创建组件,将partnav包装在仅在输入上运行的组件中Input() open;？

在这个材料2片段中,我们如何确保具有该draft值的按钮恰好是默认值？文档提及selected和checked指令,但它们似乎不起作用.

<mat-button-toggle-group #group="matButtonToggleGroup" matInput name="status" [(ngModel)]="status" #field_status="ngModel">
    <mat-button-toggle checked? selected? default? value="draft">
    DRAFT <--how do we set this value to be the default selected/checked one? -->
    </mat-button-toggle>
    <mat-button-toggle value="publish">
    PUBLISH
    </mat-button-toggle>
</mat-button-toggle-group>

我要使图标和搜索字段在同一行。

<div class="example-header">
    <mat-form-field>
      <mat-icon>search</mat-icon>
      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>
  </div>

上面我添加了我的HTML代码..

演示

我写了很多css，但是我无法获得帮助。

我有下面的代码，我从这里偷了：https : //github.com/angular/material2/blob/master/src/demo-app/expansion/expansion-demo.html

  <mat-expansion-panel class="mat-expansion-demo-width" #myPanel>

    <mat-expansion-panel-header [expandedHeight]="expandedHeight" [collapsedHeight]="collapsedHeight">
      <mat-panel-description>Click here to change view format.</mat-panel-description>
      <mat-panel-title>View Controls</mat-panel-title>
    </mat-expansion-panel-header>

    <ng-template matExpansionPanelContent>
      This is the content text that makes sense here.
      <mat-checkbox>Trigger a ripple</mat-checkbox>
    </ng-template>

    foo bar baz

    <mat-action-row>
      <button mat-button (click)="myPanel.expanded = false">CANCEL</button>
    </mat-action-row>
  </mat-expansion-panel>

一个问题-我很困惑，因为<ng-template>标记内的内容没有显示，但是显示了“ foo bar baz”。那么内部内容的目的是什么<ng-template>，为什么不显示呢？

我想在单击按钮时更改材质垫-迷你晶圆厂按钮的颜色。

我的尝试如下。但是不起作用。

<button mat-mini-fab color="primary" #btn>Btn</button>

@ViewChild('btn') btn: ElementRef;
clicked() {
    this.btn.nativeElement.style.backgroundColor = '#5789D8';
    this.btn.nativeElement.style.color = '#FFFFFF';
}

我是Angular Material的新手.有没有办法覆盖材质表中的mat-h​​eader-arrow.我试图让mat-sort-header-container显示:none.但遗憾的是它没有用.

目前的行为:

预期行为:

任何帮助都非常感谢.

谢谢

我似乎找不到一种为Angular Material的Grid List设置行间距的方法。我尝试了装订线大小，但它只会裁剪我的图块内容。我找不到Angular Material的工具或提琴手，我知道这个问题有点太具体了，但是任何帮助将不胜感激。