Как настроить угловой компонент поля формы материала? - PullRequest
Новая
       7

Как настроить угловой компонент поля формы материала?

0 голосов
/ 15 апреля 2019

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

Я создал собственную тему, но все же есть некоторые вещи, которые мне не нравятся.

Вот моя пользовательская тема: 

@include mat-core();
$DigitalSignageApp-primary: mat-palette($mat-pink);
$DigitalSignageApp-accent: mat-palette($mat-gray, A200, A100, A400);
$DigitalSignageApp-warn: mat-palette($mat-red);
$DigitalSignageApp-theme: mat-dark-theme($DigitalSignageApp-primary, $DigitalSignageApp-accent, $DigitalSignageApp-warn);

@include angular-material-theme($DigitalSignageApp-theme);

Я хотел использовать поле формы внутри моего проекта, а HTML-код для него: 

<mat-form-field appearance="outline">
          <mat-label>Email</mat-label>
          <input matInput placeholder="Email">
        </mat-form-field>
        <mat-form-field appearance="outline">
          <mat-label>Password</mat-label>
          <input matInput type="password" placeholder="Password">
        </mat-form-field>

Вот так выглядит макет: before

Когда я фокусируюсь на поле ввода: after

Я хочу, чтобы текст и рамка были белого цвета (потому что они более читабельны)

1 Ответ

0 голосов
/ 15 апреля 2019

Вот рабочий пример использования [appearance]="'outline'"

https://stackblitz.com/edit/angular-cvq3kq-g56tez

Не стесняйтесь извлекать правила CSS для вашей темы, я использую его в файле styles.css для демонстрациитолько для целей.В основном вам нужно нацелиться: .mat-form-field-outline-end и .mat-form-field-outline-start для границ и для местозаполнителей, на которые нужно нацелиться ::placeholder псевдо

...