react paneless

безпанельный

Минимальный оконный менеджер, который можно включить в ваше приложение ReactJS.

Я разрабатываю беспанельный интерфейс для использования в более крупном приложении. Я хочу иметь возможность отображать несколько перекрывающихся окон. Каждое «окно» называется фреймом . Вот скриншот одного кадра моего приложения с пятью панелями .

• Весь контент приложения отображается на панелях.

• Кадры можно свернуть до размера миниатюры.

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

• Панели отображаются в рамках.

• Каждую панель можно разделить так, чтобы один кадр мог содержать произвольную компоновку нескольких панелей.

• Панели с вкладками реализованы этой библиотекой.

• Эта библиотека поддерживает постоянные макеты.

• Синие линии обозначают фрейм/панель, на которой находится фокус пользователя. Вы можете перемещаться по значкам и панелям с помощью клавиш Alt-f и Alt-p. Alt-b активирует меню выделенной панели. Повторное нажатие Alt-b активирует меню соответствующего кадра. Клавиши со стрелками используются для навигации по пунктам меню, а Escape (или щелчок в любом месте за пределами) закрывает меню.

• Синий контур, обозначающий область в фокусе, появляется только на несколько секунд, а затем исчезает, чтобы не заслонять содержимое приложения на этой панели.

• Размер рамки можно изменить с помощью мыши, наведя курсор на ее правый нижний угол.

Предупреждение

Раннее развитие. Пробовал пока только в Chrome.

Пример

Этот репозиторий включает пример приложения. На изображениях ниже показан пример приложения, иллюстрирующий его функции.

Я полагаю, следует также упомянуть, что Panelless выполняет рендеринг кадров (обычных и минимизированных) в app-frame , который имеет app-header и app-footer .

Панель кнопок любой панели отображается при наведении указателя мыши на верхнюю часть панели.

Установить

Клонируйте этот репозиторий в каталог на вашем компьютере. Затем просто поиграйтесь с примером приложения.

Или, если у вас уже есть приложение, в которое вы хотите его включить, сделайте следующее:

 npm install <paneless-directory>

где <paneless-directory> — это каталог, в который вы клонировали этот репозиторий.

Использование

См. пример приложения.

Лицензия

Массачусетский технологический институт © БрэдДунаган