Кнопка Material Design не отображается

Я просто пытаюсь использовать стиль плоской кнопки материального дизайна. Я считаю, что использую правильную директиву, но кнопка все равно отображается неправильно. Кнопку можно посмотреть здесь: https://employee-table-app.herokuapp.com/

Спасибо, CMazz

сотрудник-table.component.html

<div>
  <mat-table [dataSource] = "dataSource" matSort>
    <ng-container matColumnDef="photo">
      <mat-header-cell *matHeaderCellDef>Profile</mat-header-cell>
      <mat-cell *matCellDef="let employee"><img width = "50" height = "50" src = "../assets/images/{{employee.username}}.jpg" >
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Employee Name</mat-header-cell>
      <mat-cell *matCellDef="let employee">{{employee.name}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Job Title</mat-header-cell>
      <mat-cell *matCellDef="let employee">{{employee.position}}</mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns" color="primary"></mat-header-row>
    <mat-row *matRowDef="let row; columns:displayedColumns"></mat-row>
  </mat-table>
  <button md-button>Hide Table</button>
</div>

app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {HttpClientModule} from '@angular/common/http';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ButtonComponent} from './button/button.component';
import {ButtonToggleComponent} from './button-toggle/button-toggle.component';
import {MatButtonModule} from '@angular/material/button';
import {MatButtonToggleModule} from '@angular/material/button-toggle';
import {MatTableModule, MatSortModule} from '@angular/material';
import {AppComponent} from './app.component';
import {EmployeeTableComponent} from './employee-table/employee-table.component';
import {EmployeeService} from './employee.service';


@NgModule({
  declarations: [
    AppComponent,
    EmployeeTableComponent, 
    ButtonComponent,
    ButtonToggleComponent

  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    BrowserAnimationsModule,
    MatTableModule, 
    MatSortModule,
    MatButtonModule,
    MatButtonToggleModule
  ],
  providers: [EmployeeService],
  bootstrap: [AppComponent]
})
export class AppModule { }

person Community    schedule 29.04.2018    source источник


Ответы (1)


Вы должны использовать mat вместо md:

<button mat-button>Hide Table</button>

Также добавьте color="primary" (или другое значение), если вы используете тему:

<button mat-button color="primary">Hide Table</button>

person Julius    schedule 29.04.2018