it-swarm.com.ru

Ввод стилевого поля формы в Angular / Material

У меня есть поле mat-form с полем ввода, к которому я хочу добавить пользовательский стиль, однако я не могу найти какую-либо документацию по этому вопросу на официальном веб-сайте Angular Material.

Моя конечная цель:

  • Изменить цвет подчеркивания после выбора поля ввода
  • Удалите плавающую метку (если возможно - я знаю, что это была особенность, но теперь она устарела).

Я пока не очень разбираюсь в Angular, но если что-то нужно изменить в JS, то я всегда могу сделать это как можно лучше.

Мне просто нужно немного руководства.

Текущий код:

<form class="search-form">
  <mat-form-field class="example-full-width">
    <input class="toolbar-search" type="text" matInput>
    <mat-placeholder>Search</mat-placeholder>
    <mat-icon matSuffix style="font-size: 1.2em">search</mat-icon>
  </mat-form-field>
</form>

Текущий CSS:

// Change text colour when inputting text
.toolbar-search, mat-placeholder {
  color: white;
}

// Changes the underline and placeholder colour before input is selected
/deep/ .mat-input-underline {
    background-color: white;
}
7
physicsboy

Насколько я понимаю, обе функции, кажется, в MatFormField.

  1. floatPlaceholder устарел, потому что теперь это [floatLabel] для FloatLabelType ('never', 'always', 'auto'), примененный с использованием ввода 
  2. Вы можете изменить цвет подчеркивания с помощью ввода [color], однако вы можете выбрать только цвета из вашей темы ('primary', 'accent', 'warn'). Для получения дополнительной информации о настройке темы перейдите на их сайт здесь


<form class="search-form">
  <mat-form-field class="example-full-width"
                  floatLabel="never" color="primary">
    <input class="toolbar-search" type="text" matInput placeholder="search">
    <mat-icon matSuffix style="font-size: 1.2em">search</mat-icon>
  </mat-form-field>
</form>
5
Iancovici

Вы можете использовать селектор CSS, который вы используете ниже:

/deep/ .mat-input-underline {
   background-color: white;
}

/deep/комбинатор намечен как устаревший в Angular , поэтому лучше всего обойтись без него. К сожалению, .mat-input-underline из Angular Material строго определен, что делает его очень трудным для переопределения без использования/deep /

Лучший способ, который я нашел, - это использовать идентификатор, который позволяет повысить специфичность по сравнению со стилями угловых материалов по умолчанию. 

 <form id="search-form" [formGroup]="form" (ngSubmit)="submit()">
    <mat-form-field>
      <mat-placeholder class="placeholder">Search</mat-placeholder>
      <input type="text" class="toolbar-search" matInput formControlName="search">
      <mat-icon matSuffix>search</mat-icon>
    </mat-form-field>

Затем ваш идентификатор 'search-form' может быть использован для целевого ввода. Вы не можете нацелить mat-form-field-underline в component.scss, не нарушая инкапсуляцию вашего представления. Это проще сделать на глобальном уровне, добавив это в ваш global.scss

global.scss:

#search-form {
  .mat-form-field-underline {
    background-color: $accent;
  }
  .mat-form-field-ripple {
    background-color: $accent;
  }
  .placeholder {
    display: none;
  }
}

Я надеюсь, что команда Angular Material вернет свою специфику в будущем, потому что в настоящее время нет простого способа изменить их значения по умолчанию. 

3
drinck

Для изменения стилей ввода материалов с помощью scss:

Стандартный:

::ng-deep .mat-form-field {
    .mat-input-element {
        color: slategray;
    }
    .mat-form-field-label {
        color: slategray;
    }
    .mat-form-field-underline {
        background-color: slategray;
    }
    .mat-form-field-ripple {
        background-color: slategray;
    }
    .mat-form-field-required-marker {
        color: slategray;
    }
}

Focused: (когда выбрано)

::ng-deep .mat-form-field.mat-focused {
    .mat-form-field-label {
        color: #ff884d;
    }
    .mat-form-field-ripple {
        background-color: #ff884d;
    }
    .mat-form-field-required-marker {
        color: #ff884d;
    }
    .mat-input-element {
        color: #ff884d;
    }
}

Недействительным:

::ng-deep .mat-form-field.mat-form-field-invalid {
    .mat-input-element {
        color: #ff33cc;
    }
    .mat-form-field-label {
        color: #ff33cc;
        .mat-form-field-required-marker {
            color: #ff33cc;
        }
    }
    .mat-form-field-ripple {
        background-color: #ff33cc;
    }
}

ДЕМО

вы также можете использовать ViewEncapsulation.None, чтобы избежать ::ng-deep, который является устарел:

import { ViewEncapsulation } from '@angular/core';

@Component({
    ...
    encapsulation: ViewEncapsulation.None
})
2
A. Morel