Настройка компонентов Angular Material — введение

В этой серии я расскажу, как настроить тему Angular Material, компоненты в частности (это обычно самая раздражающая часть) и ваши собственные компоненты, используя Angular Material Way 💅 . Я надеюсь, что эта серия поможет начинающим разработчикам или тем, кто уже сталкивался с трудностями, лучше понять эту тему.

Почему я делаю эту серию?

Я уже давно использую Angular Material и каждый раз, когда мне нужно внести некоторые изменения в компоненты angular material, в прошлом я обычно заканчивал (в основном) переопределением CSS свойств в таблицах стилей вместо настройки переменных sass и создания дизайна компонента с помощью доступных нам sass mixins (что я перестал делать некоторое время назад 😉 ), чтобы иметь более систематический, рекомендуемый и масштабируемый способ.

Вот простой пример, который может быть вам понятен:

Допустим, мы хотим увеличить размер шрифта компонента mat-paginator, как видно по красной рамке на картинке выше, у нас есть, на мой взгляд, 2 способа увеличить размер шрифта.

a. Непосредственное изменение свойства css для конкретного элемента:

.mat-paginator { font-size: 30px }
/* you might need to add !Important /*
/* depending on where you add this css or the ViewEncapsulation method you use.*/
Войти в полноэкранный режим Выйти из полноэкранного режима

b. Обновление карты Sass, предоставляемой Angular Material:

Это долгий ( правильный лучше ) способ, где вы определяете переменную типографики $caption и затем передаете ее в angular-material-typography, так как эта переменная используется компонентами в их sass-определениях, также в процессе инициируется смешивание mat-core(), использующее правильные переменные, определенные в sass-map, и, наконец, все передается в mat-light или mat-dark тематический миксин (не обращайте внимания на порядок шагов в данный момент). Этот процесс кажется немного сложным только для того, чтобы изменить размер шрифта font-size, но как только вы поймете процесс, все остальное станет очень простым.

/* not complete example, we will visit it example in full detail in the series later */
...

$custom-theme: mat-typography-config(
  $caption: mat-typography-level(14px, 16px, 400),
);
@include angular-material-typography($custom-theme);

....
Вход в полноэкранный режим Выход из полноэкранного режима

Как бы ни было проще сделать это первым способом, не рекомендуется напрямую изменять эти значения, так как в итоге вам придется использовать множество хаков, чтобы сделать нужные вам настройки дизайна. И если вы собираетесь использовать другие материальные компоненты (а вы действительно собираетесь это сделать), то новичкам и другим членам команды будет сложно разобраться в этом, если у вас нет достойной кодовой базы.

Кроме того, текущее руководство, доступное на сайте Angular Material, не является достаточно четким или подробным, и большинство сообщений на StackOverflow используют грязный хак для исправления дизайна, используя !important большую часть времени.

Так что если кто-то начинает проект, я бы рекомендовал делать его таким образом, чтобы он был масштабируемым и простым в обслуживании, ака Angular Way 😌.

Следите за предстоящими статьями из этой серии. И оставляйте свои комментарии, если вы сталкивались с трудностями при работе с компонентами Angular Material и поделитесь тем, с чем вы столкнулись.

До встречи в следующей статье.

Оцените статью
devanswers.ru
Добавить комментарий