从默认主题更改为自定义主题会从 MatInput 中删除光标,Angular 6
Changing from a default theme to a custom theme removes cursor from MatInput, Angular 6
我想将默认 Angular Material 配色方案更改为自定义配色方案。我的问题是,当我这样做时,MatInput 字段在聚焦时停止显示闪烁的光标。我想知道如何让它在点击时恢复显示闪烁状态。
文件theme.scss
@import '~@angular/material/theming';
@include mat-core();
$my-app-primary: mat-palette($mat-grey, 100);
$my-app-accent: mat-palette($mat-blue, 200);
$my-app-warn: mat-palette($mat-deep-orange);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
@include angular-material-theme($my-app-theme);
文件custody.component.html
<mat-form-field>
<input
matInput
type="email"
formControlName="email"
placeholder="{{ email }}"
style="outline: none"
/>
<mat-error *ngIf="form.get('email').invalid"
>Please enter a valid email.</mat-error
>
</mat-form-field>
Angular Material 设计使用主色、重音色(也称为次色)和警告色的调色板。这些是您可以在自定义主题中定义的调色板。每个调色板都有一系列颜色变体(用数字表示,'A' 后跟数字,或简单地 'darker' 或 'lighter')代表不同的色调。
让我们开门见山:您为主色选择的颜色变体是:
$my-app-primary: mat-palette($mat-grey, 100);
原色在Angular Material个组件中被大量使用,matInput也是如此。您选择的变体 (100) 太浅,因为数字给出的颜色范围从 50(较浅)到 900(较深),因此您可能不会在屏幕上看到它。选择不同的变体并测试它们是否为您提供所需的颜色。
有关 Angular Material 的调色板和设计颜色的更多信息,请访问:The color system
我想将默认 Angular Material 配色方案更改为自定义配色方案。我的问题是,当我这样做时,MatInput 字段在聚焦时停止显示闪烁的光标。我想知道如何让它在点击时恢复显示闪烁状态。
文件theme.scss
@import '~@angular/material/theming';
@include mat-core();
$my-app-primary: mat-palette($mat-grey, 100);
$my-app-accent: mat-palette($mat-blue, 200);
$my-app-warn: mat-palette($mat-deep-orange);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
@include angular-material-theme($my-app-theme);
文件custody.component.html
<mat-form-field>
<input
matInput
type="email"
formControlName="email"
placeholder="{{ email }}"
style="outline: none"
/>
<mat-error *ngIf="form.get('email').invalid"
>Please enter a valid email.</mat-error
>
</mat-form-field>
Angular Material 设计使用主色、重音色(也称为次色)和警告色的调色板。这些是您可以在自定义主题中定义的调色板。每个调色板都有一系列颜色变体(用数字表示,'A' 后跟数字,或简单地 'darker' 或 'lighter')代表不同的色调。
让我们开门见山:您为主色选择的颜色变体是:
$my-app-primary: mat-palette($mat-grey, 100);
原色在Angular Material个组件中被大量使用,matInput也是如此。您选择的变体 (100) 太浅,因为数字给出的颜色范围从 50(较浅)到 900(较深),因此您可能不会在屏幕上看到它。选择不同的变体并测试它们是否为您提供所需的颜色。
有关 Angular Material 的调色板和设计颜色的更多信息,请访问:The color system