标签: angular-material2

我目前有textarea这样的:

<textarea matInput rows="5" cols="40" placeholder="text"></textarea>

但是,它总是相同的大小.

关于如何改变尺寸的任何想法textarea？

我目前正在使用md-tab-group(昨天更新到最新版本)...

有人知道吗

1. 如果可以在现有组件上禁用/配置Ripple(在本例中为md-tab-group)？最新版本导致我的标题标题跳转,因为纹波计算大值,解决方案是直接在MdTabGroup模板中为md-tab-label 添加md-ripple-max-radius的小值.
2. 如果有计划删除md-tab-labels的最小宽度？我正在使用一个非常小的选项卡组(仅300px宽度),因此160px最小宽度不可用.

谢谢!

我正在尝试实现Material2数据表.但我无法理解如何以正确的方式使用它.

import {Component, ElementRef, ViewChild} from '@angular/core';
import {DataSource} from '@angular/cdk';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/observable/fromEvent';

@Component({
  selector: 'table-filtering-example',
  styleUrls: ['table-filtering-example.css'],
  templateUrl: 'table-filtering-example.html',
})
export class TableFilteringExample {
  displayedColumns = ['userId', 'userName', 'progress', 'color'];
  exampleDatabase = new ExampleDatabase();
  dataSource: ExampleDataSource | null;

  @ViewChild('filter') filter: ElementRef;

  ngOnInit() {
    this.dataSource = new ExampleDataSource(this.exampleDatabase);
    Observable.fromEvent(this.filter.nativeElement, 'keyup')
        .debounceTime(150)
        .distinctUntilChanged()
        .subscribe(() => {
          if (!this.dataSource) { return; } …

我注意到该指令matTooltip不适用于禁用按钮.我怎样才能实现它？

例:

<button mat-raised-button [disabled]="true" matTooltip="You cannot delete that">
  <mat-icon>delete</mat-icon>
</button>

对于启用的按钮,它可以完美运行:

<button mat-raised-button [disabled]="false" matTooltip="You cannot delete that">
  <mat-icon>delete</mat-icon>
</button>

我想在选择一个选项时调用一个函数.经过一些搜索,似乎我必须使用:

属性选项MdAutocompleteTrigger的 选择

在文档中: https: //material.angular.io/components/component/autocomplete optionSelections自动完成选项选择流.

我不明白,什么是流,如何实现这个？

我正在构建一个具有多个主题和角度材料设计的应用程序2.我创建了多个主题,它的工作非常棒.使用本指南:Angular Material设计主题

但问题是,如果用户选择"绿色主题"为例.然后我想以绿色显示他/她的名字.但是,如何在我的组件样式中将当前选定的主题设置为"green",然后在我的用户名类中使用该主变量来更改其颜色

Angular2材料团队最近发布了MDDialog https://github.com/angular/material2/blob/master/src/lib/dialog/README.md

我想改变angular2材质对话框的外观和感觉.例如,要更改弹出容器的固定大小并使其可滚动,请更改背景颜色,以此类推.最好的方法是什么？有没有我可以玩的CSS？

我有:

<md-tab-group color="primary">
  <md-tab label="???????">
    <h1>Some tab content</h1>
  </md-tab>
  <md-tab label="????????">
    <h1>Some more tab content</h1>
    <p>...</p>
  </md-tab>
</md-tab-group>

我需要在单击特定选项卡时捕获事件并在我的组件中调用此函数:

onLinkClick() {
  this.router.navigate(['contacts']); 
}

我正在角度材料中创建一个日期时间选择器控件,并使用下面的代码来执行此操作

<button mat-button [matMenuTriggerFor]="menu">
    <mat-icon>date_range</mat-icon>
    <span>Date Range</span>
</button>
<mat-menu #menu="matMenu">
    <div fxLayout="row">
        <div fxLayout="column">
            <button (click)="setInterval(15)" mat-menu-item>Last 15 minutes</button>
            <button (click)="setInterval(360)" mat-menu-item>Last 6 hours</button>
            <button (click)="setInterval(1440)" mat-menu-item>Last 24 hours</button>
            <button (click)="setInterval(2880)" mat-menu-item>Last 2 days</button>
            <button (click)="setInterval(10080)" mat-menu-item>Last 7 days</button>
            <button (click)="setInterval(-1)" [matMenuTriggerFor]="dateTimeMenu" mat-menu-item>Custom</button>
        </div>
        <mat-menu class="date-range-menu" #dateTimeMenu="matMenu">
            <div fxLayout="row">
                <div fxLayout="column">
                    <b>From</b>
                    <mat-calendar></mat-calendar>
                </div>
                <div fxLayout="column">
                    <b>To</b>
                    <mat-calendar></mat-calendar>
                </div>
            </div>
        </mat-menu>
    </div>
</mat-menu>

目前,当我点击一个按钮时,它正在关闭菜单.我知道我们可以在每个mat-menu-item上执行$ event.stoppropagation()以防止它关闭.

但我想知道是否有可能为mat-calendar做到这一点

正如您在上面的图像中看到的那样,当我选择日期时,它正在关闭菜单.是否有可能阻止这种情况？

我对angular-material2组件非常满意,但有一些我不理解的奇怪行为,并且他们没有适当的文档,特别是对于丰富和定制他们的组件.

我的项目看起来像:

.src
  --app
    --components
      --login-component
           login-component.html
           login-component.scss
           login-component.js
      --login-component
            home-component.html
            home-component.scss
            home-component.js
       --and so on ...
    app.component.html
    app.component.scss
    app.component.ts
    app.module.ts
    app.routing.ts
    --assets
    --environments
    --scss
      styles.scss
      _material2-theme.scss
      _variables-scss
      _utilities.scss
      _reset.scss
   favicon
   index.html
   and so on ....

在angular-cli.json中,我修改了样式以查看scss/style.scss

...
"styles": [
        "scss/styles.scss"
      ]
...

_material2-theme.scss看起来像:

//////////////////////* THEMES */ Custom Blue Theme*/
@import '~@angular/material/theming';
@include mat-core();
$app-primary: mat-palette($mat-light-blue);
$app-accent:  mat-palette($mat-light-blue, A200, A100, A400);
$app-theme:   mat-light-theme($app-primary, $app-accent);
@include angular-material-theme($app-theme);

/*default palette forground/background*/
$light-foreground-palette: map-get($app-theme, foreground);
$light-background-palette: map-get($app-theme, background);

$primary: map-get($app-theme, primary);
$accent: map-get($app-theme, …