# Como criar um card clicável

> Montar um Component com fundo arredondado, conteúdo em layout e resposta ao toque.

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

# Como criar um card clicável

**Propósito.** Criar um "cartão" (um `Component` com fundo, borda arredondada e conteúdo
interno) que reage ao toque, aplicando destaque visual ao ser pressionado e disparando
uma ação. Use para itens de lista, tiles de dashboard, atalhos etc.

## APIs usadas
- `new Component()` — tudo no CrossFly é `Component`; um card é apenas um `Component` com estilo e layout.
- `component.style(ComponentStyle s)` — aplica o estilo (fundo, borda, raio). Retorna `<T extends Component>` para encadear.
- `ComponentStyle.pressable()` — marca o estilo como `Pressable.YES`: o componente recebe destaque ao ser pressionado e passa a receber eventos de toque.
- `component.setLayout(Layout l)` — define o gerenciador de layout do conteúdo interno (ex.: `new GridLayout(...)`).
- `component.add(Object... params)` — adiciona filhos conforme o layout ativo.
- `component.onAction(Component.Action action)` — registra o callback disparado no toque (só funciona se o estilo for `pressable`).
- `Styles.component()` — retorna um `ComponentStyle` base do Skin ativo para você customizar.

## Exemplo completo (copiar, colar e rodar)
```java
package com.exemplo;

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

/** Tela principal executável. Aponte o launcher (classname) e rode: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      // Estilo do card: fundo branco, cantos arredondados, clicável
      ComponentStyle cardStyle = Styles.component()
         .backColor(0xFFFFFFFF)
         .borderColor(0xFFE0E0E0)
         .borderRadius(0.5f)   // raio em unidades de fonte
         .ingap(Gap.ofFont(0.8f))
         .pressable();         // ← torna o card sensível ao toque

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

      // Conteúdo interno em coluna (título + subtítulo)
      card.setLayout(new GridLayout(Position.START, Position.CENTER));
      card.add(new Label("Pedido #1234"));
      card.add(new Label("Entregue hoje"));

      // Ação ao tocar
      card.onAction(origin -> abrirDetalhe(1234));

      // Adiciona o card à tela/container atual
      add(card);
   }

   private void abrirDetalhe(int pedido)
   {
      // ... abrir a tela de detalhe do pedido ...
   }
}
```

> O trecho abaixo mostra **só o miolo**. Para rodar, coloque-o no esqueleto `MainWindow` acima.

## Trecho mínimo
```java
// Estilo do card: fundo branco, cantos arredondados, clicável
ComponentStyle cardStyle = Styles.component()
   .backColor(0xFFFFFFFF)
   .borderColor(0xFFE0E0E0)
   .borderRadius(0.5f)   // raio em unidades de fonte
   .ingap(Gap.ofFont(0.8f))
   .pressable();         // ← torna o card sensível ao toque

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

// Conteúdo interno em coluna (título + subtítulo)
card.setLayout(new GridLayout(Position.START, Position.CENTER));
card.add(new Label("Pedido #1234"));
card.add(new Label("Entregue hoje"));

// Ação ao tocar
card.onAction(origin -> abrirDetalhe(1234));

// Adiciona o card à tela/container atual
add(card);
```

> **Nota de verificação (código 2026).** Confirmado na fonte: `Component.style(ComponentStyle)`
> retorna `<T extends Component> T` (fluente), `ComponentStyle.pressable()` seta
> `Pressable.YES`, e `Component.onAction(Action)` marca `hasAction(true)`. O destaque
> de pressionado usa os estilos por estado (default/pressed) resolvidos pelo Skin —
> veja Capítulo 10 só se precisar customizar o
> estado pressed. Sem `pressable()`, o `onAction` **não dispara** porque o componente
> não é alvo de toque.

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