Представьте себе, у нас есть приложение с несколькими страницами:
Главная страница, фид блогов, профиль пользователя, настройка
Все они отображаются на полную ширину, они являются общими страницами.
В то же время в модале / окне должен отображаться некоторый контент:
Избранные записи пользователя, Панель аутентификации, Чат, Подписчики пользователя
Нам нужно сделать возможным открыть любую из этих панелей с любой страницы.И когда мы открываем, например, панель с избранными сообщениями, а затем сразу же открываем чат, панель чата должна иметь z-index больше, чем z-index панели избранных сообщений, и в результатепанель избранных постов должна перекрываться.
Но когда мы закрываем панель чата, мы должны видеть панель избранных постов.
Тот же процесс должен относиться ко всем другим панелям / окнам и для любого порядка перекрытий!
Какое наилучшее решение для достижения этой цели?
В настоящее время у меня есть компонент под названием LayerManager, который отображается прямо внутри моего компонента приложения.LayerManager отвечает за рендеринг всех элементов с абсолютным / фиксированным позиционированием.Существует часть избыточного состояния, которая содержит информацию обо всех открытых в данный момент панелях (массив объектов, содержащих такую информацию, как «show», «zIndex»).Когда мы «нажимаем» (открываем) новую панель, отправляется действие, отвечающее за поиск наибольшего zIndex, а затем оно присоединяет увеличенный zIndex к новой панели.