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

# IsselActionBox

> Tarjeta pulsable con imagen local, título y acción opcional de eliminar.

Tarjeta pulsable con imagen local, título y acción opcional de eliminar.

**Categoría:** Acciones. **Uso:** Accesos visuales a módulos u opciones que realmente necesitan imagen.

Importa el barrel público y Flutter Material. [Código fuente](https://github.com/IsselCode/issel_code_widgets/blob/main/lib/src/issel_action_box.dart).

## Constructor

Esta firma corresponde al código fuente, incluyendo nulabilidad y defaults; las condiciones y el comportamiento se explican debajo.

```dart theme={null}
const IsselActionBox({
    super.key,
    required this.asset,
    required this.title,
    required this.height,
    required this.width,
    required this.onTap,
    this.borderRadius = 10,
    this.onDeleteTap,
    this.color,
  })
```

## Propiedades

“Requerido” significa que debes pasar el argumento, incluso cuando su tipo admite `null`. Los valores `null` de color suelen delegar al tema; consulta las notas para el rol efectivo.

| Parámetro | Tipo | Requerido | Default | Descripción |
| - | - | - | - | - |
| `key` | `Key?` | No | `null` | Identidad del widget en el árbol Flutter. |
| `asset` | `String` | Sí | `—` | Ruta del asset utilizado por \[Image.asset]. |
| `title` | `String` | Sí | `—` | Texto mostrado debajo de la imagen. |
| `height` | `double` | Sí | `—` | Altura total de la caja de acción.  También define el padding interno, el tamaño de la imagen y el tamaño de fuente del título. |
| `width` | `double` | Sí | `—` | Ancho total de la caja de acción. |
| `onTap` | `VoidCallback` | Sí | `—` | Callback invocado cuando se presiona la caja de acción. |
| `borderRadius` | `double` | No | `10` | Radio aplicado a la caja y al borde del efecto táctil. |
| `onDeleteTap` | `VoidCallback?` | No | `null` | Callback opcional invocado cuando se presiona el icono de eliminar.  Si es null, el icono de eliminar no se renderiza. |
| `color` | `Color?` | No | `null` | Color de fondo opcional de la caja.  Si es null, usa \[ColorScheme.surface]. |

## Ejemplo

Este archivo define una función que devuelve el widget. Llámala desde `build` con tus datos/callbacks, y conserva el estado y los recursos en su dueño. No ejecuta callbacks ficticios.

```dart theme={null}
import 'package:flutter/material.dart';
import 'package:issel_code_widgets/issel_code_widgets.dart';

Widget actionBoxExample(String asset, VoidCallback onOpen) => IsselActionBox(
      asset: asset,
      title: 'Productos',
      height: 140,
      width: 140,
      onTap: onOpen,
    );
```

## Comportamiento y límites

* asset debe existir y estar declarado en pubspec.yaml de la app.
* height determina padding, imagen (45% del alto), zona del título (20%) y tamaño de fuente (9%). Ajusta títulos a ese espacio.
* onDeleteTap muestra un IconButton colocado parcialmente fuera de la caja. Revisa que el padre no recorte esa zona.
* La caja requiere Material en su árbol para Ink/InkWell. Un Scaffold proporciona ese contexto.

Para ejemplos con estado y composición completos, consulta [componentes reutilizables](/ejemplos/componentes-reutilizables) y [formularios](/guia/formularios-y-estados).


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