标签: angular-material2

mat-listangular/material2中的组件应用16px的顶部和底部填充.我想把这个0px.我尝试应用具有更高特异性的样式但它不起作用(或者我做错了).我试图覆盖的样式是:

我试图用以下方法覆盖:

.list .mat-list .mat-list-item .mat-multi-line .mat-list-item-content {
  padding-top: 0;
  padding-bottom: 0;
}

<div class="list">
  <mat-list>
    <mat-list-item *ngFor="let item of queue">
      <h1 matLine>{{ item.id }}: {{ item.status}} {{ item.statusDate }}</h1>
      <p matLine>{{ item.name }}</p>
      <p matLine>for {{ item.customer }}</p>
      <div matLine>
        <button mat-icon-button (click)="openTab(item)">
          <mat-icon fontIcon="icon-open"></mat-icon>
        </button>
        <button *ngIf="showAssignToMe" mat-icon-button (click)="assignToMe(item)">
          <mat-icon fontIcon="icon-assign_to_me"></mat-icon>
        </button>
        <button mat-icon-button (click)="notes(item)">
          <mat-icon fontIcon="icon-comment"></mat-icon>
        </button>
      </div>
    </mat-list-item>
  </mat-list>
</div>

我从Angular Material网站关注创建自定义表单控件的本教程.在有验证错误时,教程中没有关于如何遵守表单控制错误的示例.

定制text.component.html

<mat-form-field class="example-full-width">
    <mat-select [placeholder]="placeholder" #select [formControl]="control">
        <mat-option *ngFor="let food of foods" [value]="food">
            {{food}}
        </mat-option>
    </mat-select>
    <mat-error>This is required.</mat-error>
</mat-form-field>

定制text.component.ts

import { Component, ViewChild, HostBinding, Input, ChangeDetectionStrategy, Optional, Self, DoCheck, OnInit, NgZone } from '@angular/core';
import { ControlValueAccessor, NgControl, NgForm, FormGroupDirective, FormControlDirective, FormControlName, FormControl, FormBuilder } from '@angular/forms';
import { MatFormFieldControl, MatSelect, CanUpdateErrorState, ErrorStateMatcher } from '@angular/material';

@Component({
    selector: 'custom-text',
    templateUrl: './custom-text.component.html',
    styleUrls: [
        './custom-text.component.scss'
    ],
    providers: [
        {
            provide: MatFormFieldControl,
            useExisting: CustomTextComponent
        }
    ], …

我正在使用Angular 2和Angular Material.查看文档,我试图让select具有默认值,与空占位符相反.

我尝试了以下两个选项,它们都没有设置默认值

<md-select selected="1">
  <md-option value="1" >One</md-option>
  <md-option value="2">Two</md-option>
</md-select>

<md-select>
  <md-option value="1" selected="true">One</md-option>
  <md-option value="2">Two</md-option>
</md-select>

我查看了所有文档和示例,但没有帮助

我有Parent一个打开angular-material2对话框的组件.

let dialogRef = this.dialog.open(Child, {
            disableClose: true
        });

打开的对话框Child组件有一个"添加"按钮.如果用户点击"添加"按钮,我想通知"父"组件.

这怎么可能？

任何方式如何使按钮/图标/复选框与材料1中的右侧对齐:

https://material.angularjs.org/latest/demo/list

我目前(材料2)有:

<md-list>
  <md-list-item *ngFor="let position of cart">
    <h3 md-line> {{ position.name }} </h3>
    <p md-line>
      <span> Line 1 </span>
    </p>
    <md-icon md-list-icon>delete</md-icon>
  </md-list-item>
</md-list>

我正在研究Angular 2中md-grid-list的基本示例.

HTML代码:

<md-grid-list cols="4" rowHeight="100px">
   <md-grid-tile *ngFor="let tile of tiles"
         [colspan]="tile.cols"
         [rowspan]="tile.rows"
         [style.background]="tile.color">
         {{tile.text}}
    </md-grid-tile>
</md-grid-list>

TS代码:

export class GridListDynamicExample {
  tiles = [
    {text: 'One', cols: 3, rows: 1, color: 'lightblue'},
    {text: 'Two', cols: 1, rows: 2, color: 'lightgreen'},
    {text: 'Three', cols: 1, rows: 1, color: 'lightpink'},
    {text: 'Four', cols: 2, rows: 1, color: '#DDBDF1'},
  ];
}

上面的代码导致了这个: 如何使用某些HTML指令或CSS将布局设置为"列""列",以便在较小屏幕尺寸下的行(一和四)下方？

Angular 1中的Angular Material可以选择通过指定"md-cols-xs ="1"md-cols-sm ="2"md-cols-md ="4"md-cols-gt-md ="6" ".

我有一个Angular按钮:

<button md-button class="link-btn" >Cancel</button>

.link-btn {
  background-color: transparent;
  background-repeat: no-repeat;
  border: none;
  cursor:pointer;
  overflow: hidden;
  outline:none;
  font-size: 0.8em;
  padding: 0px;
}

.link-btn:hover {
  background-color: transparent;
  background-repeat: no-repeat;
  border: none;
  cursor:pointer;
  overflow: hidden;
  outline:none;
  font-size: 0.8em;
  padding: 0px;
}

通常它是设置透明背景,但在hover状态下,显示灰色背景？如何删除？

如何使用材料2设置一周的第一天？

目前默认是星期日,即使我将语言环境设置为hu或其他任何东西.

在我的角度应用程序中,我有一个presentation.module包含所有组件.我创建了一个shared-material.module包含整个应用程序中使用的所有角度材料2模块.我在之前导入了它presentation.module.在我app.module,我已经导入了presentation.module.

在app.module其声明中有app.component,header.component而footer.component

这是我的app.module:

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent
  ],
  imports: [
    // Layer's modules
    PresentationModule,
    BusinessDelegateModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我的presentation.module:

const modules = [
  SharedMaterialModule,
  SharedModule,
  HomePresentationModule,
  SecurityPresentationModule,
]

@NgModule({
  imports: [...modules],
  exports: [...modules]
})
export class PresentationModule {
}

源代码shared-material.module:

// updated: Before, i have just imported …

我想对齐按钮右下角的对话框是我的HTML

<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions>

  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>

演示