# Cómo crear una card cliqueable

> Montar un Component con fondo redondeado, contenido en layout y respuesta al toque.

Source: https://crossfly.dev/es/docs/cookbook/ui/card-clicavel — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# Cómo crear una card cliqueable

**Propósito.** Crear una "card" (un `Component` con fondo, borde redondeado y contenido
interno) que reacciona al toque, aplicando un realce visual al ser presionada y disparando
una acción. Úsalo para elementos de lista, tiles de dashboard, atajos, etc.

## APIs usadas
- `new Component()` — todo en CrossFly es `Component`; una card es solo un `Component` con estilo y layout.
- `component.style(ComponentStyle s)` — aplica el estilo (fondo, borde, radio). Devuelve `<T extends Component>` para encadenar.
- `ComponentStyle.pressable()` — marca el estilo como `Pressable.YES`: el componente recibe realce al ser presionado y pasa a recibir eventos de toque.
- `component.setLayout(Layout l)` — define el gestor de layout del contenido interno (ej.: `new GridLayout(...)`).
- `component.add(Object... params)` — añade hijos según el layout activo.
- `component.onAction(Component.Action action)` — registra el callback disparado al toque (solo funciona si el estilo es `pressable`).
- `Styles.component()` — devuelve un `ComponentStyle` base del Skin activo para que lo personalices.

## Ejemplo completo (copiar, pegar y ejecutar)
```java
package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.style.*;

/** Pantalla principal ejecutable. Apunta el launcher (classname) y corre: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      // Estilo del card: fondo blanco, esquinas redondeadas, clicable
      ComponentStyle cardStyle = Styles.component()
         .backColor(0xFFFFFFFF)
         .borderColor(0xFFE0E0E0)
         .borderRadius(0.5f)   // radio en unidades de fuente
         .ingap(Gap.ofFont(0.8f))
         .pressable();         // ← hace el card sensible al toque

      Component card = new Component()
         .style(cardStyle);

      // Contenido interno en columna (título + subtítulo)
      card.setLayout(new GridLayout(Position.START, Position.CENTER));
      card.add(new Label("Pedido #1234"));
      card.add(new Label("Entregue hoje"));

      // Acción al tocar
      card.onAction(origin -> abrirDetalhe(1234));

      // Añade el card a la pantalla/container actual
      add(card);
   }

   private void abrirDetalhe(int pedido)
   {
      // ... abrir la pantalla de detalle del pedido ...
   }
}
```

> El fragmento de abajo muestra **solo el núcleo**. Para ejecutarlo, colócalo en el esqueleto `MainWindow` de arriba.

## Fragmento mínimo
```java
// Estilo del card: fondo blanco, esquinas redondeadas, clicable
ComponentStyle cardStyle = Styles.component()
   .backColor(0xFFFFFFFF)
   .borderColor(0xFFE0E0E0)
   .borderRadius(0.5f)   // radio en unidades de fuente
   .ingap(Gap.ofFont(0.8f))
   .pressable();         // ← hace el card sensible al toque

Component card = new Component()
   .style(cardStyle);

// Contenido interno en columna (título + subtítulo)
card.setLayout(new GridLayout(Position.START, Position.CENTER));
card.add(new Label("Pedido #1234"));
card.add(new Label("Entregue hoje"));

// Acción al tocar
card.onAction(origin -> abrirDetalhe(1234));

// Añade el card a la pantalla/container actual
add(card);
```

> **Nota de verificación (código 2026).** Confirmado en la fuente: `Component.style(ComponentStyle)`
> devuelve `<T extends Component> T` (fluido), `ComponentStyle.pressable()` establece
> `Pressable.YES`, y `Component.onAction(Action)` marca `hasAction(true)`. El realce
> de presionado usa los estilos por estado (default/pressed) resueltos por el Skin —
> consulta el Capítulo 10 solo si necesitas personalizar el
> estado pressed. Sin `pressable()`, el `onAction` **no se dispara** porque el componente
> no es objetivo de toque.

## Profundiza
- Catálogo de widgets: [Widget Catalog](/docs/reference/widget-catalog)