diff --git a/README.md b/README.md index 1a62919..4e41d86 100644 --- a/README.md +++ b/README.md @@ -2241,3 +2241,14 @@ const Svg = ({ title }) => { ``` Полные актуальные исходные коды примера можно увидеть в "app/panels/samples/svg.js" данного репозитория соответственно. + +### Ограничения дизайна пользовательского интерфейса + +Фреймворк позволяет реализовать любые пользовательские интерфейсы, вёрстка которых не противоречит возможностям современного HTML. Тем не менее, при разработке пользовательских интерфейсов панелей важно придерживаться предложенных ниже правил. Это позволит создавать их в едином ключе и упростит работу конечного пользователя при их освоении. + +- Избегайте нестандартных реакций элементов пользовательского интерфейса на действия пользователя. Например, выпадающий список при активации должен отобразить состав своих элементов, а не вызывать бизнес-функцию отработки документа. +- Избегайте прямого применения HTML-тэгов. В библиотеке [MUI](https://mui.com/), включенной во фреймворк, есть всё необходимое для сборки интерфейса. +- Старайтесь не применять `
` для всёрстки - для этого в [MUI](https://mui.com/) есть группа компонентов разметки ("Layout"), используйте их (`Grid`, `Box`, `Container`, `Stack`, `Paper` и пр.). +- Старайтесь не использовать без острой необходимости атрибуты `sx` и `style` - всё необходимое для стилизации как правило есть в атрибутах компонента [MUI](https://mui.com/), изучите его документацию. Если применение собственного стиля неизбежно - старайтесь выносить стили в единое место в коде, переиспользовать их, и импортировать там, где это необходимо. +- Придерживайтесь единой цветовой гаммы при реализации всех панелей (в идеале) или, если не удаётся, панелей, отнесённых к одному прикладному участку (ПУДП, УЗСР, БУ, ПУП и т.п.). +- Изучите и применяйте `ThemeProvider` из состава инструментов стилизации библиотеки [MUI](https://mui.com/) для придания индивидуальности панелям и их компонентам.