Изменение размера mat-spinner в mat-button в Angular/Material2

Быстрый ответ

Для того чтобы изменить размер индикатора загрузки Angular Material mat-spinner, вы можете использовать масштабирование с помощью CSS, используя свойство transform: scale(X). Для удвоения размера установите X равным 2:

.mat-spinner {
  transform: scale(2); // Эффективно, не так ли?
}

Либо установите размеры прямо через свойства width и height, как истинный эксперт:

.mat-spinner {
  width: 100px; // Расширяем по горизонтали!
  height: 100px; // И возможности по высоте не ограничены!
}

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

Заострим внимание: свойство Diameter

Свойство diameter действует аналогично лупе. Вы можете задать размер mat-spinner, присвоив значение элементу непосредственно:

<mat-spinner [diameter]="70"></mat-spinner> // Размер: 70, величественное простое число. Совпадение?

К слову, индикатор загрузки автоматически подстроится под размеры своего контейнера, это существенно облегчит вам работу.

Рекомендация: объявляйте стили в отдельных файлах

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

CSS 'zoom': масштабирование с энтузиазмом

Если вы хотите уменьшить размер индикатора внутри кнопки, не увеличивая размер самой кнопки, используйте свойство CSS zoom:

button .mat-spinner {
  zoom: 0.5; // И индикатор станет менее приметным
}

Использование zoom дает возможность контролировать размер индикатора, не влияя при этом на размер самой кнопки и на её внешний вид.

Индивидуальная настройка размера индикатора загрузки

Рассмотрим, как настроить размер индикатора под каждый отдельный экран.

Большое и малое: употребление медиа запросов

Медиа запросы помогут вашему индикатору загрузки адаптироваться к экранам любого размера и выглядеть аккуратно:

@media (max-width: 600px) {
  .mat-spinner {
    /* Адаптируем под мобильные устройства */
    transform: scale(0.75);
  }
}

Подробнее об этом расскажет наш спикер на видео

От простого к сложному: прогрессивное улучшение

Позвольте mat-spinner плавно увеличиваться в размерах вместе с ростом экрана устройства. Примените прогрессивное улучшение для увеличения размера:

/* Увеличиваем размер для больших экранов, как и предпочтения улучшаются со временем */
@media (min-width: 720px) {
  .mat-spinner {
    transform: scale(1.5);
  }
}

Продуманные пропорции: стиль в гармонии

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

Особое внимание: избегайте проблем UI

Искажение индикатора

Установка width и height независимо от diameter может исказить форму индикатора; следите за сохранением круглой формы.

Будьте осторожны с mat-diameter

Хоть mat-diameter и звучит заманчиво, на деле он устарел. Вместо него был создан атрибут diameter, чтобы менять размер индикатора в соответствии с вашими предпочтениями.

Особенности работы с контейнером

mat-spinner автоматически подстраивается под размеры своего родительского элемента. Держите это в голове, если желаете контролировать его поведение.

Визуализация

Представьте себе изменение размера вашего mat-spinner. В примерах ниже демонстрируются различные степени масштабирования:

🔍 Маленький mat-spinner: **масштаб 25%**

<mat-spinner diameter="25"></mat-spinner> // 🔄 Миниатюрный, но надежный

🔍 Стандартный mat-spinner: **масштаб 100% (по умолчанию)**

<mat-spinner></mat-spinner> // 🌀 Надежный стандартный вариант

🔍 Большой mat-spinner: **масштаб 200%**

<mat-spinner diameter="100"></mat-spinner> // 💫 Отважный и величественный

Тщательно подгоняйте настройки diameter, чтобы увеличивать или уменьшать размер индикатора загрузки, контролируя его влияние на интерфейс вашего приложения.

Полезные материалы

1. Progress Spinner API | Angular Material
2. Подробное руководство по SVG | CSS-Tricks
3. Свойство Transform | MDN
4. Angular Flex-Layout API Docs | Github
5. Руководство по тематизации | Angular Material
6. Руководство по стилям компонентов | Angular
7. Примеси | Sass