# Chip

> Una etiqueta compacta: pulsable como filtro y con ✕ para quitarla. Componente de Pyzed para GUIs de escritorio en Python, con ejemplos y API.

Source: https://albakore.github.io/pyzed/es/library/chip/

:::tip[En pocas palabras]
Una etiqueta pequeña y redondeada. Púlsala para activar o quitar un filtro, o pulsa su ✕ para quitarla.
:::

Una etiqueta pequeña y redondeada. Con `on_press` funciona como un filtro que se activa (`selected=True` la resalta) y con `on_remove` muestra un botón para quitarla, como en una lista de etiquetas.

`ui.chip` · Categoría: [Acciones](https://albakore.github.io/pyzed/es/library/#acciones) · [Referencia completa →](https://albakore.github.io/pyzed/es/reference/ui/#chip)

**Código:**

```python
pz.row([
    ui.chip("python", icon="tag", selected=True, on_press=on_filter),
    ui.chip("rust", on_press=on_filter),
    ui.chip("iced", on_remove=on_remove),
    ui.chip("zed", icon="sparkles", on_remove=on_remove),
], spacing=6)
```

## Cuándo usarlo

- Para etiquetas, filtros y valores elegidos (una selección múltiple, destinatarios).
- Para estados de solo lectura usa una [Insignia](https://albakore.github.io/pyzed/es/library/badge/).

## Uso

```python
import pyzed as pz
from pyzed import ui

class Tags(pz.App):
    def __init__(self):
        self.tags = ["python", "rust", "iced"]

    def view(self):
        return pz.row([ui.chip(t, on_remove=lambda t=t: self.tags.remove(t)) for t in self.tags],
                      spacing=6, wrap=True)
```

## Variantes

:::note[Sobre estas capturas]
Cada captura la graba pyzed mismo, fuera de pantalla a 2x, en One Dark o One Light según el tema de este sitio, y recortada al componente para que se vea a su tamaño real. El puntero pasa por encima, pulsa o escribe en él; un componente que no reacciona al puntero recorre algunos temas. Con movimiento reducido ves el primer fotograma. Abre **Código** bajo una captura para ver el fragmento que la dibuja; los nombres libres como `on_save` son tus propios callbacks.
:::

### Tipo

```python
ui.chip("python")
```

```python
ui.chip("rust", on_press=on_filter)
```

```python
ui.chip("python", on_press=on_filter, selected=True)
```

```python
ui.chip("iced", on_remove=on_remove)
```

### Contenido

```python
ui.chip("design", icon="tag")
```

```python
ui.chip("ada@example.com", icon="user", on_remove=on_remove)
```

```python
ui.chip("favorites", icon="star", selected=True, on_press=on_filter)
```

### Estados y eventos

```python
ui.chip("Failing", on_press=on_press, selected=True, tint="error")
```

```python
ui.chip("Archived", on_press=on_press, on_remove=on_remove, disabled=True)
```

## Eventos

Chip tiene **2 eventos propios**, en la tabla de abajo. Como todo widget, también tiene los **18 eventos comunes** (`click`, `double_click`, `right_click`, `mouse_enter`, `drag`, `key_down`, `resize`…), que se conectan con `.on(...)`: mira [Eventos](https://albakore.github.io/pyzed/es/guides/events/) y [Eventos de cada componente](https://albakore.github.io/pyzed/es/library/events/).

| Evento | El handler recibe | Cuándo |
| --- | --- | --- |
| `on_press` | `()` | Mensaje o callable que se envía al pulsar. `None` deshabilita el control. |
| `on_remove` | `()` | Muestra una ✕ que envía esto al pulsarla. |

**El handler recibe** es lo que Pyzed le pasa a tu función: `()` es nada. Cualquier handler también puede ser un mensaje (un valor que no se puede llamar), que va a `update()`.

### Manejar los eventos

Los mismos eventos escritos de tres formas. **Imperativa**: métodos de la app que cambian `self`. **Declarativa**: los handlers producen mensajes y un único `update()` decide. **Funcional**: una función pura dibuja un estado inmutable y pide cambios con `set_state(...)`. Mira [Imperativo, declarativo y funcional](https://albakore.github.io/pyzed/es/guides/code-styles/).

**Imperativo:**

```python
class Filters(pz.App):
    def __init__(self):
        self.tags = ["python", "rust", "iced"]
        self.active = "python"

    def view(self):
        return pz.row([
            ui.chip(t, selected=t == self.active,
                    on_press=lambda t=t: setattr(self, "active", t),     # pick it
                    on_remove=lambda t=t: self.tags.remove(t))           # its ✕
            for t in self.tags
        ], spacing=6, wrap=True)
```

**Declarativo:**

```python
from dataclasses import dataclass

@dataclass
class Pick:
    tag: str

@dataclass
class Remove:
    tag: str

class Filters(pz.App):
    tags = ["python", "rust", "iced"]
    active = "python"

    def update(self, message):
        match message:
            case Pick(tag):
                self.active = tag
            case Remove(tag):
                self.tags = [t for t in self.tags if t != tag]

    def view(self):
        return pz.row([ui.chip(t, selected=t == self.active, on_press=Pick(t), on_remove=Remove(t))
                       for t in self.tags], spacing=6, wrap=True)
```

**Funcional:**

```python
from dataclasses import dataclass

@dataclass(frozen=True)
class State:
    tags: tuple = ("python", "rust", "iced")
    active: str = "python"

def view(state, set_state):
    return pz.row([
        ui.chip(t, selected=t == state.active,
                on_press=lambda t=t: set_state(active=t),
                on_remove=lambda t=t: set_state(tags=tuple(x for x in state.tags if x != t)))
        for t in state.tags
    ], spacing=6, wrap=True)
```

## Propiedades y API

### `ui.chip`

```python
chip(
    content,
    *,
    on_press=None,
    on_remove=None,
    selected=False,
    icon=None,
    tint='accent',
    disabled=False,
    theme=None,
)
```

Una etiqueta compacta, opcionalmente pulsable (filtros) y con botón para quitarla.

| Propiedad | Por defecto | Descripción |
| --- | --- | --- |
| `content` | *obligatorio* | Texto. |
| `selected` | `False` | Lo marca como seleccionado. |
| `icon` | `None` | Nombre de un icono de Lucide (`pyzed icons` los lista). |
| `tint` | `"accent"` | Color cuando está seleccionada (un token del tema). |
| `disabled` | `False` | La atenúa e ignora las pulsaciones. |
| `theme` | `None` | Tema a usar en lugar del actual (`pyzed.theme.current()`). |

Eventos: `on_press`, `on_remove` ([eventos](#eventos)).

[Referencia completa →](https://albakore.github.io/pyzed/es/reference/ui/#chip)

## Relacionados

- [Insignia](https://albakore.github.io/pyzed/es/library/badge/): Una pastilla pequeña para estados, versiones y contadores.
- [Grupo de alternancia](https://albakore.github.io/pyzed/es/library/toggle-group/): Un control segmentado solo con iconos.