Серия

Fluent UI React Trainings: рекомендации по стилю и значки

на Oleksandr Fediashov

Fluent UI React Аналитика и обучение

В этом руководстве рассматриваются два отдельных раздела. В первой статье рассматриваются некоторые рекомендации по использованию griffel CSS-in-JS с компонентами пользовательского интерфейса Fluent или без них. Мы рассмотрим распространенные шаблоны разработки при использовании Griffel и лучший способ их реализации. Второй раздел — более подробное представление о различных вариантах значков, которые у нас есть в пользовательском интерфейсе Fluent и их эффективном использовании.

Главы

  • 00:00 - Введение
  • 00:11 — руководство по стилям
  • 01:00 — ограничения стилей среды выполнения Griffel
  • 01:12 — неправильный пример стилизации
  • 02:03 — перечисление всех сочетаний стилей
  • 03:17 — встроенные стили
  • 03:52 — встроенные переменные CSS
  • 05:19 — определения стилей структурирования
  • 07:09 . Разработка маркеров и тем
  • 09:22 — не используйте !важно
  • 11:38 — вложенные комбинаторы
  • 16:37 — значок повторного вывода
  • 17:25 — обычные и заполненные варианты значков
  • 18:05 — значки bundling
  • 19:31 — переключение вариантов значков при наведении указателя мыши
  • 20:17 — обработка значка компонента пользовательского интерфейса Fluent
  • 21:15 - Outro

Разработка