> ## Documentation Index
> Fetch the complete documentation index at: https://docs.comfy.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Pestañas del panel inferior

> Añade pestañas personalizadas al panel inferior de ComfyUI con la API de pestañas del panel inferior, incluidos elementos interactivos, componentes de React y registro independiente.

La API de pestañas del panel inferior permite a las extensiones añadir pestañas personalizadas al panel inferior de la interfaz de ComfyUI. Resulta útil para añadir funciones como registros, herramientas de depuración o paneles personalizados.

## Uso básico

```javascript theme={null}
app.registerExtension({
  name: "MyExtension",
  bottomPanelTabs: [
    {
      id: "customTab",
      title: "Custom Tab",
      type: "custom",
      render: (el) => {
        el.innerHTML = '<div>This is my custom tab content</div>';
      }
    }
  ]
});
```

## Configuración de pestañas

Cada pestaña requiere un `id`, un `title` y un `type`, además de una función de renderizado:

```javascript theme={null}
{
  id: string,              // Identificador único de la pestaña
  title: string,           // Título que se muestra en la pestaña
  type: string,            // Tipo de pestaña (normalmente "custom")
  icon?: string,           // Clase del icono (opcional)
  render: (element) => void // Función que rellena el contenido de la pestaña
}
```

La función `render` recibe un elemento DOM en el que debes insertar el contenido de tu pestaña.

## Elementos interactivos

Puedes añadir elementos interactivos como botones:

```javascript theme={null}
app.registerExtension({
  name: "InteractiveTabExample",
  bottomPanelTabs: [
    {
      id: "controlsTab",
      title: "Controls",
      type: "custom",
      render: (el) => {
        el.innerHTML = `
          <div style="padding: 10px;">
            <button id="runBtn">Run Workflow</button>
          </div>
        `;
        
        // Añadir detectores de eventos
        el.querySelector('#runBtn').addEventListener('click', () => {
          app.queuePrompt();
        });
      }
    }
  ]
});
```

## Uso de componentes de React

Puedes montar componentes de React en las pestañas del panel inferior:

```javascript theme={null}
// Importar las dependencias de React en tu extensión
import React from "react";
import ReactDOM from "react-dom/client";

// Componente de React simple
function TabContent() {
  const [count, setCount] = React.useState(0);
  
  return (
    <div style={{ padding: "10px" }}>
      <h3>React Component</h3>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// Registrar la extensión con contenido de React
app.registerExtension({
  name: "ReactTabExample",
  bottomPanelTabs: [
    {
      id: "reactTab",
      title: "React Tab",
      type: "custom",
      render: (el) => {
        const container = document.createElement("div");
        container.id = "react-tab-container";
        el.appendChild(container);
        
        // Montar el componente de React
        ReactDOM.createRoot(container).render(
          <React.StrictMode>
            <TabContent />
          </React.StrictMode>
        );
      }
    }
  ]
});
```

## Registro independiente

También puedes registrar pestañas fuera de `registerExtension`:

```javascript theme={null}
app.extensionManager.registerBottomPanelTab({
  id: "standAloneTab",
  title: "Stand-Alone Tab",
  type: "custom",
  render: (el) => {
    el.innerHTML = '<div>This tab was registered independently</div>';
  }
});
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.