Тема углового материала - PullRequest
Новая
       24

Тема углового материала

0 голосов
/ 06 ноября 2018

Я использую угловой материал в своем проекте. Я использовал боковую навигационную панель и степпер, но они выглядят не так, как выглядят в демоверсии. Я импортировал требуемую тему CSS в файл scss. Пожалуйста, найдите ниже коды,

formstepper.component.html 

<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear">
    {{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
  </button>
  <mat-horizontal-stepper [linear]="isLinear" #stepper>
    <mat-step [stepControl]="firstFormGroup">
      <form [formGroup]="firstFormGroup">
        <ng-template matStepLabel>Fill out your name</ng-template>
        <mat-form-field>
          <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
        </mat-form-field>
        <div> 
          <button mat-button matStepperNext>Next</button>
        </div>
      </form>
    </mat-step>
    <mat-step [stepControl]="secondFormGroup">
      <form [formGroup]="secondFormGroup">
        <ng-template matStepLabel>Fill out your address</ng-template>
        <mat-form-field>
          <input matInput placeholder="Address" formControlName="secondCtrl" required>
        </mat-form-field>
        <div>
          <button mat-button matStepperPrevious>Back</button>
          <button mat-button matStepperNext>Next</button>
        </div>
      </form>
    </mat-step>
    <mat-step>
      <ng-template matStepLabel>Done</ng-template>
      You are now done.
      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button (click)="stepper.reset()">Reset</button>
      </div>
    </mat-step>
  </mat-horizontal-stepper>

formstepper.component.scss 

@import "../../../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";

formstepper.component.ts 

import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

/**
 * @title Stepper overview
 */
@Component({
  selector: 'FormstepperComponent',
  templateUrl: './formstepper.component.html',
  styleUrls: ['./formstepper.component.scss'],
})
export class FormstepperComponent implements OnInit {
  isLinear = false;
  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;

  constructor(private _formBuilder: FormBuilder) {}

  ngOnInit() {
    this.firstFormGroup = this._formBuilder.group({
      firstCtrl: ['', Validators.required]
    });
    this.secondFormGroup = this._formBuilder.group({
      secondCtrl: ['', Validators.required]
    });
  }
}

App.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MyNavComponent } from './my-nav/my-nav.component';
import { LayoutModule } from '@angular/cdk/layout';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule, MatStepperModule
        ,MatFormFieldModule, MatInputModule } from '@angular/material';
import { FormstepperComponent } from './formstepper/formstepper.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import 'hammerjs';

@NgModule({
  declarations: [
    AppComponent,
    MyNavComponent,
    FormstepperComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LayoutModule,
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule,
    MatStepperModule,
    MatFormFieldModule,
    MatInputModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule
  ],
  exports: [
    BrowserModule,
    AppRoutingModule,
    LayoutModule,
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule,
    MatStepperModule,
    MatFormFieldModule,
    MatInputModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Sidenavbar и степпер отображаются в браузере, но их стили отсутствуют. Они очень основные компоненты. Что мне здесь не хватает?

1 Ответ

0 голосов
/ 06 ноября 2018

в вашем style.css вы добавили

@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";

если вы не используете cli, добавьте это в ваш index.html

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

также убедитесь, что вы правильно установили зависимости

Вы можете обратиться к этому вопросу о том, как правильно настроить угловой материал

https://material.angular.io/guide/getting-started

и для темы

https://material.angular.io/guide/theming

...