Skip to main content

Tabs

This section describes how to implement custom tab renderers

Register a Tab Component​

Default Tab Renderer​

Accessing Custom Panel Parameters​

You can provide a generic type that matches the structure of the expected custom panels parameters to provide type-hints for the panel parameters which can be accessed via the params option.

Extend the Default Tab Implementation​

If you only want to make minor changes to the tab rendering you may be able to use the default implementation as a base. This could include:

  • Hiding the close button
  • Attaching additional event listeners

As a simple example the below attaches a custom event handler for the context menu on all tabs as a default tab renderer

The below example uses a custom tab renderer to reigster a popover when the user right clicked on a tab. This still makes use of the DockviewDefaultTab since it's only a minor change.

Full Width Tab​

When a group has only one single tab you may want that tab to take the full width.

return <DockviewReactComponent singleTabMode="fullwidth" />

Tab Height​

Tab height can be controlled through CSS.