react paneless
1.0.0
Un administrador de ventanas mínimo que puede incluirse en su aplicación ReactJS.
Estoy desarrollando sin panel para usar en una aplicación más grande. Quiero poder mostrar múltiples ventanas superpuestas. Cada "ventana" se llama marco . Aquí hay una captura de pantalla de un marco de mi aplicación con cinco paneles .
Todo el contenido de la aplicación se representa en paneles.
Los fotogramas se pueden minimizar al tamaño de una miniatura.
El encabezado de un marco (también conocido como barra de título) y el pie de página (también conocido como barra de estado) pueden estar ocultos. Cuando un encabezado está oculto, aún puedes mover el marco pasando el mouse sobre su borde superior.
Los paneles se representan en marcos.
Cada panel se puede dividir de modo que un solo cuadro pueda contener un diseño arbitrario de múltiples paneles.
Esta biblioteca implementa paneles con pestañas.
Esta biblioteca admite diseños persistentes.
Las líneas azules indican el marco/panel con el foco del usuario. Puede navegar por cuadros y paneles con las teclas Alt-f y Alt-p. Alt-b activará el menú del panel enfocado. Al presionar Alt-b nuevamente se activará el menú del marco asociado. Las teclas de flecha se utilizan para navegar por los elementos del menú y Escape (o hacer clic en cualquier lugar exterior) cierra el menú.
El contorno azul que indica el panel enfocado aparece solo durante unos segundos y luego se desvanece para no oscurecer el contenido de la aplicación en ese panel.
El tamaño de un marco se ajusta con el ratón pasando el cursor por su esquina inferior derecha.
Desarrollo temprano. Probado sólo en Chrome hasta el momento.
Este repositorio incluye una aplicación de ejemplo. Las imágenes a continuación son de la aplicación de ejemplo e ilustran sus funciones.
Supongo que también debería mencionarse que panelss realiza la representación de fotogramas (normales y minimizados) en un marco de aplicación que tiene un encabezado de aplicación y un pie de página de aplicación .
La barra de botones de cualquier panel queda expuesta al pasar el mouse por la parte superior del panel.
Clona este repositorio en un directorio de tu máquina. Luego simplemente juega con la aplicación de ejemplo.
O, si ya tienes una aplicación en la que deseas incluirla, entonces hazlo:
npm install <paneless-directory>
donde <directorio-sin-panel> es el directorio en el que clonó este repositorio.
Vea la aplicación de ejemplo.
MIT © BradDunagan
