Лучшие практики MUI

В этой статье предполагается, что вы следуете нашей рекомендуемой практике, используя наш Материал пользовательского интерфейса. Следуя приведенным далее шагам, вы максимизируете совместимость с Docker Desktop и сведете к минимуму работу, которую вам необходимо выполнять как автору расширения. Их следует рассматривать как дополнение к рекомендациям, не относящимся к MUI, изложенным в Обзор стиля пользовательского интерфейса.

Предположим, что тема может измениться в любое время

Не поддавайтесь искушению настроить пользовательский интерфейс с точными цветами, смещениями и размерами шрифта, чтобы он выглядел как можно более привлекательным. Любые специализации, которые вы сделаете сегодня, будут связаны с текущей темой MUI и могут выглядеть хуже, когда тема изменится. Любая часть темы может быть изменена без предупреждения, включая (но не ограничиваясь):

  • Шрифт или размеры шрифта

  • Толщина границ или стили

  • Цвета:

  • Члены нашей палитры (например, red-100) могут изменяет свои значения RGB.

  • Семантические цвета (например, error, primary, textPrimary и т. д.) можно изменяет, чтобы использовать другой член нашей палитры.

  • Цвета фона (например, страницы или диалогов) могут измениться.

  • Промежутки:

  • Размер базовой единицы интервала (отображается через theme.spacing. Например, мы можем позволить пользователям настраивать плотность пользовательского интерфейса

  • Интервал по умолчанию между абзацами или элементами сетки

Лучший способ создать пользовательский интерфейс, чтобы он был устойчивым к будущим изменениям темы, — это:

  • Как можно меньше переопределяйте стиль по умолчанию.

  • Используйте семантическую типографику. например используйте Typographyили Linkс соответствующими variantвместо использования типографских элементов HTML (<a>, <p>, <h1> и т. д.) напрямую.

  • Используйте консервированные размеры. например используйте size="small" для кнопок или fontSize="small" для значков вместо указания размеров в пикселях.

  • Отдавайте предпочтение смысловым цветам. например используйте error или primary вместо явных цветовых кодов.

  • Пишите как можно меньше CSS. Вместо этого напишите семантическую разметку. Например, если вы хотите разнести абзацы текста, используйте реквизит paragraph в своих экземплярах Typography. Если вы хотите расставить что-то ещё, используйте Stack или Grid с интервалом по умолчанию.

  • Используйте визуальные идиомы, которые вы видели в пользовательском интерфейсе Docker Desktop, т. к. это основные, с которыми мы будем тестировать любые изменения темы.

Когда вы идете на порядок, централизуйте его

Иногда вам понадобится часть пользовательского интерфейса, которой нет в нашей дизайн-системе. Если это так, мы рекомендуем вам сначала обратиться к нам. Возможно, у нас уже есть что-то в нашей внутренней системе дизайна, или мы можем расширить нашу систему дизайна, чтобы приспособить её к вашему варианту использования.

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

Некоторые из вышеперечисленных опций требуют, чтобы вы расширили нашу тему MUI. См. документацию MUI на тематическая композиция.

Что дальше?