Dockview: gestor de paneles

Librería para diseñar y gestionar paneles parecidos a los de un diseño de una aplicación de escritorio.

dockview-docking-layout-manager

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.

Instalar DockView

Puedes instalar el paquete en tu proyecto desde la línea de comandos. Si quieres la versión JavaScript nativa:

Terminal
npm install dockview-core

Si usas React:

Terminal
npm install dockview-react

Si usas Vue:

Terminal
npm install dockview-core

Estilos CSS

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.

Ejemplo completo

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;

Conclusión

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.