Дизайн-система Goban разрабатывается для сложных приложений с вариативными стандартными компонентами. Чтобы не создавать больше количество вариаций для каждого компонента, я сделал гибкие базовые компоненты.
Принцип
Большая часть простых компонентов (формы ввода, теги, селекторы), если рассматривать их возможные вариации, имеет следующее устройство:
Префикс →
Опциональная часть компонента, следующая до основной.
У пункта выпадающего меню это может быть иконка, чек-бокс или отступ.
Основная часть →
Обязательная часть компонента.
У пункта выпадающего меню это будет его название.
Постфикс
Опциональная часть компонента, следующая после основной.
У пункта выпадающего меню это может быть шеврон, обозначающий наличие подменю, либо хинт с указанием хоткея.
Реализация
В своей системе я использую вложенные компоненты для основной части, префикса и постфикса. Компонент, созданный по этому принципу, выглядит так:
Созданные таким образом мастер-компоненты, позволяют создавать огромное количество вариаций компонента, объединённых общей размерностью, отступами и поведением (states).
Разработка таких компонентов требует значительного времени, но окупается гибкостью и удобством поддержки в дальнейшем.
Stepanov Design 