# Bloque

Los bloques son contenedores de datos y contenido. Puede colocarlos en una página (Page), un Modal o un Drawer, y organizar múltiples bloques libremente arrastrándolos.

## Tipos de Bloque

![Tipos de Bloque](https://static-docs.nocobase.com/f71af45b5cd914ea0558f760ddbbba58.png)

- Bloque de Datos: Se utiliza para mostrar datos de una **fuente de datos** en la interfaz.
- Bloque de Filtro: Se utiliza para tomar datos de una **fuente de datos** como condiciones de filtro y aplicarlos a otros bloques de datos.
- Otros Bloques: Se utilizan para contener contenido específico o independiente, como tareas pendientes de un **flujo de trabajo**, registros de auditoría o Markdown.

## Añadir Bloques

Puede colocar bloques en una página (Page), un Modal o un Drawer.

### Bloques en una Página

Actualmente, los tipos de bloque disponibles en una página incluyen: Bloque de Datos, Bloque de Filtro y Otros Bloques.

![20251023222441](https://static-docs.nocobase.com/20251023222441.png)

### Bloques en una Ventana Emergente (Modal o Drawer)

Las ventanas emergentes pueden ser de dos tipos: Modals y Drawers. Al igual que en las páginas, también puede añadir bloques a estas. La diferencia es que los bloques de formulario en las ventanas emergentes suelen utilizarse para añadir, editar o ver un solo registro. Los tipos de bloque disponibles aquí incluyen: Bloque de Datos y Otros Bloques.

![20251023222613](https://static-docs.nocobase.com/20251023222613.png)

## Diseñador de Bloques

Cada bloque tiene tres pequeños iconos en la esquina superior derecha. De izquierda a derecha, son:

1. Diseño por arrastre
2. [Flujo de Eventos](/interface-builder/event-flow)
3. Configuración del bloque

![20251023224032](https://static-docs.nocobase.com/20251023224032.png)

Para los bloques sencillos, todas las opciones de configuración se centralizan en la "Configuración del bloque", como en el Bloque JS.

![20251023224903](https://static-docs.nocobase.com/20251023224903.png)

Los bloques de datos complejos también ofrecen opciones de "Configurar campos" y "Configurar acciones" independientes e incrustadas.

![20251023225141](https://static-docs.nocobase.com/20251023225141.png)

Además, existe la flexibilidad de ofrecer más posibilidades de anidamiento, como se ve en el bloque de gráficos.

![](https://static-docs.nocobase.com/07588190b3f41ae3060e71d8b76b4447.png)

## Diseño de Bloques

Puede ajustar el diseño de múltiples bloques arrastrándolos y soltándolos.

![20251029201501](https://static-docs.nocobase.com/20251029201501.gif)