Librería para diseñar y gestionar paneles parecidos a los de un diseño de una aplicación de escritorio.
Cuando hablamos de desarrollar una página web, normalmente pensamos en una página que se mostrará en algún navegador. Pero hoy en día esto no tiene por qué ser así, de hecho, hay muchas aplicaciones que se pueden ejecutar en Windows o Mac en las que su interfaz de usuario está codificada en HTML, CSS y JavaScript. Frameworks como Electron o Tauri, permiten empaquetar aplicaciones web y ejecutarlas en entornos de Escritorio. Por ejemplo, el conocido editor Vistual Studio Code es una aplicación web que usa Electron.
Si bien es cierto que para este tipo de aplicaciones se necesita otro tipo de diseño para la interfaz de usuario. En este artículo mostraremos la librería DockView, un gestor de paneles en JavaScript sin dependencias.
Puedes instalar el paquete en tu proyecto desde la línea de comandos. Si quieres la versión JavaScript nativa:
npm install dockview-core
Si usas React:
npm install dockview-react
Si usas Vue:
npm install dockview-core
Importa los estilos CSS, si usas Sass:
@import './node_modules/dockview-core/dist/styles/dockview.css';
o bien con JavaScript:
import 'dockview/dist/styles/dockview.css';
Incluye varios temas como el claro y el oscuro, entre otros.
Veamos un ejemplo completo con 3 ventanas arrastrables.
import { DockviewReact, DockviewReadyEvent, IDockviewPanelProps, IDockviewPanelHeaderProps,} from 'dockview';import * as React from 'react';
const components = { default: (props: IDockviewPanelProps<{ title: string; x?: number }>) => { return ( <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', color: 'white', height: '100%', }} > <span>{`${props.params.title}`}</span> {props.params.x && <span>{` ${props.params.x}`}</span>} </div> ); },};
const tabComponents = { default: (props: IDockviewPanelHeaderProps<{ title: string }>) => { return ( <div className="my-custom-tab"> <span>{props.params.title}</span> <span style={{ flexGrow: 1 }} />
<span className="material-symbols-outlined"> minimize </span> <span className="material-symbols-outlined"> maximize </span> <span className="material-symbols-outlined"> close </span> </div> ); },};
const ExampleDockView = (props: { theme?: string }) => { const onReady = (event: DockviewReadyEvent) => { const panel1 = event.api.addPanel({ id: 'panel_1', component: 'default', tabComponent: 'default', params: { title: 'Ventana 1', }, }); panel1.group.locked = true;
const panel2 = event.api.addPanel({ id: 'panel_2', component: 'default', tabComponent: 'default', params: { title: 'Ventana 2', }, position: { direction: 'right', }, }); panel2.group.locked = true;
const panel3 = event.api.addPanel({ id: 'panel_3', component: 'default', tabComponent: 'default', params: { title: 'Ventana 3', }, position: { direction: 'below', }, }); panel3.group.locked = true; };
return ( <DockviewReact onReady={onReady} components={components} tabComponents={tabComponents} className={`${props.theme || 'dockview-theme-abyss'}`} singleTabMode="fullwidth" /> );};
export default ExampleDockView;
DockView es una herramienta potente que permite diseñar un layout con paneles y tabs además de añadir la funcionalidad de arrastrar y mover paneles.
Visita la página oficial para documentarte más sobre sus principales características.