Угловой материал: изменение размера шрифта текста входных клипов - PullRequest
Новая
       9

Угловой материал: изменение размера шрифта текста входных клипов

0 голосов
/ 01 июня 2018

Я изменяю размер шрифта моего углового материала input s до 28px, но это приводит к обрезанию потомков некоторых символов, например 'g' в этом примере:

enter image description here

Не могу понять, как решить эту проблему.Любые идеи кто-нибудь?Какие классы мне нужно увеличить?

Я изменил свой компонент в SCSS следующим образом: 

input {
  font-size: 28px;
}

1 Ответ

0 голосов
/ 01 июня 2018

Если вы хотите изменить font-size на mat-form-field, вам следует применить стиль к элементу mat-form-field, а не к элементу input.Если вы этого не сделаете, некоторые части поля формы могут не отвечать должным образом (стиль).Вы также должны убедиться, что вы правильно установили line-height по той же причине.

Если вы планируете придерживаться дизайна материалов, вам следует использовать утилиты и создавать свой стиль, используя темы / типографику с mat-typography-level-to-styles и одним из указанных типографских уровней в дизайне материалов.Это должно быть сделано с помощью типографских утилит, но вы можете сделать это вручную.Подробнее см. https://material.angular.io/guide/typography.

Например, 24px - это размер шрифта для того, что Angular Material называет headline (H5 в дизайне материала - не элемент H5), поэтому ваш стиль должен реализовать соответствующийспецификация заголовка (в соответствии с реализацией H5 для Angular Material): 

.input-headline {
    font-size: 28px;
    line-height: 32px;
    font-weight: 400;
}

Angular Material имеет классы удобного стиля, которые делают это для вас.Для заголовка это mat-headline, так что вы можете легко сделать: 

<mat-form-field class="mat-headline">

Обратите внимание, что 28px не является дизайном материала, указанным уровнем шрифта: https://material.io/design/typography/the-type-system.html#type-scale.

...