Панель в угловом материале - PullRequest
Новая
       4

Панель в угловом материале

0 голосов
/ 11 сентября 2018

Image for design

Я хочу создать панель, как указано выше, используя угловой дизайн 6 материалов.

Используйте код ниже 

    <mat-card>
        <mat-card-header>
            <div class="col-lg-12">
                <div class="col-lg-9">
                    <h3>{{ pageTitle }}</h3>
                </div>
                <div class="col-lg-3">
                    <button mat-raised-button color="primary" [disabled]="!form.valid" (click)="form.ngSubmit.emit()">Save</button>
                    &nbsp;&nbsp;
                    <button type="reset" mat-raised-button color="accent" (click)="cancelForm()">Cancel</button>
                </div>
            </div>
        </mat-card-header>
        <mat-progress-bar mode="indeterminate" *ngIf="progress"></mat-progress-bar>
        <mat-divider></mat-divider>
        <mat-card-content>

            <mat-form-field>
<input matInput placeholder="Name [(ngModel)]="vehicleMakeViewModel.name" name="name" required #name="ngModel"></mat-form-field>
        </mat-card-content>

    </mat-card>

Приведенный выше код создает приведенный ниже шаблон. Заголовок и кнопки неправильно выровнены по шаблону.

template

1 Ответ

0 голосов
/ 11 сентября 2018

Я не уверен, но может быть, вы не импортировали стили для углового материала (или у вас другой стиль, отличный от стиля по умолчанию).Попробуйте добавить это в ваши styles.css 

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

информация здесь https://material.angular.io/guide/getting-started

также для информации по темам: https://material.angular.io/guide/theming

...