Selector de color

ui.ColorPicker es un componente que elige un color con alfa, un degradado lineal (paradas que añades, arrastras y quitas, más un ángulo) o un relleno con máscara de opacidad. on_change recibe un evento cuyo value es una cadena "#rrggbb[aa]", un pz.Gradient o un pz.Paint, todos válidos como fondo. ui.color_swatch muestra cualquiera de ellos sobre un damero.

ui.ColorPicker · Categoría: Formularios · Referencia completa →

Vista previa
Código

pz.row([
    ui.ColorPicker(value="#3b82f6cc", on_change=on_change),
    pz.column([
        ui.color_swatch("#3b82f6", size=28),
        ui.color_swatch("#a1c181aa", size=28),
        ui.color_swatch(pz.Gradient(["#f97316", "#7c3aed"], angle=90), size=28),
    ], spacing=8),
], spacing=16)

Cuándo usarlo

Para editores de temas, apps de dibujo y propiedades de estilo.
Muestra un color_swatch y abre el selector en un Popover al pulsarlo.

Uso

import pyzed as pz
from pyzed import ui

class Styles(pz.App):
    def __init__(self):
        self.fill = "#3b82f6"

    def view(self):
        return pz.row([
            ui.ColorPicker(value=self.fill, on_change=lambda e: setattr(self, "fill", e.value)),
            pz.container(width=120, height=120, bg=self.fill, radius=8),
        ], spacing=16)

Variantes

Opciones

Selector de color: alpha=False, gradients=False, masks=False — `alpha=False, gradients=False, masks=False`

Selector de color: swatches=[...] — `swatches=[...]`

Muestras

Una muestra dibuja cualquier color, degradado o relleno sobre un damero, para que se vea la transparencia.

Selector de color: pz.Gradient — `pz.Gradient`

Selector de color: ui.checkerboard — `ui.checkerboard`

Eventos

Selector de color 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 y Eventos de cada componente.

Es un pz.Component, así que también lanza on_mount y on_unmount, y sus handlers reciben un pz.Event cuyo value trae el dato.

Evento	De	El handler recibe	Cuándo
`on_change`	`ui.ColorPicker`	`(event)`	Recibe `event.value`.
`on_press`	`ui.color_swatch`	`()`	Lo hace pulsable.

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.

class Styles(pz.App):
    def __init__(self):
        self.fill = "#3b82f6"

    def picked(self, event):             # a pz.Component: the color is event.value
        self.fill = event.value

    def view(self):
        return pz.row([
            ui.ColorPicker(value=self.fill, on_change=self.picked),
            pz.container(width=80, height=80, bg=self.fill, radius=8),
            ui.color_swatch("#ef4444", on_press=lambda: setattr(self, "fill", "#ef4444")),
        ], spacing=16)

from dataclasses import dataclass


@dataclass
class Fill:
    color: str


class Styles(pz.App):
    fill = "#3b82f6"

    def update(self, message):
        match message:
            case Fill(color):
                self.fill = color

    def view(self):
        return pz.row([ui.ColorPicker(value=self.fill, on_change=lambda e: Fill(e.value)),
                       ui.color_swatch("#ef4444", on_press=Fill("#ef4444"))], spacing=16)

from dataclasses import dataclass


@dataclass(frozen=True)
class State:
    fill: str = "#3b82f6"


def view(state, set_state):
    return pz.row([ui.ColorPicker(value=state.fill, on_change=lambda e: set_state(fill=e.value)),
                   pz.container(width=80, height=80, bg=state.fill, radius=8)], spacing=16)

Propiedades y API

`ui.ColorPicker`

class ColorPicker

Un componente para elegir un color con alfa, un gradiente lineal (paradas que se añaden, arrastran y quitan, más un ángulo) o un relleno con máscara de opacidad. on_change recibe un texto "#rrggbb[aa]", un pz.Gradient o un pz.Paint, todos válidos como background. Devuelve el valor elegido en value. Ver Estilos.

Propiedad	Por defecto	Descripción
`value`	`"#3b82f6"`	Un color, token del tema, `pz.Gradient` o `pz.Paint`.
`alpha`	`True`	Muestra la barra y el campo de alfa.
`gradients`	`True`	Muestra el cambio Sólido/Gradiente.
`masks`	`True`	Muestra el editor de máscara.
`swatches`	`None`	Colores rápidos (por defecto: el acento y los colores de estado del tema).

Eventos: on_change (eventos).

Referencia completa →

`ui.color_swatch`

color_swatch(value, *, size=20, on_press=None)

Un cuadrito que muestra un color, gradiente o pintura sobre un damero.

Propiedad	Por defecto	Descripción
`value`	obligatorio	Qué mostrar.
`size`	`20`	Lado en píxeles.

Eventos: on_press (eventos).

Referencia completa →

`ui.checkerboard`

checkerboard(width, height, size=6)

Un damero claro/oscuro para dibujar bajo colores translúcidos.

Propiedad	Por defecto	Descripción
`width`	obligatorio	Ancho.
`height`	obligatorio	Alto.
`size`	`6`	Tamaño de celda.

Referencia completa →

Relacionados

PopoverContenido flotante en un punto: menús contextuales, selectores de color.

TarjetaUna superficie con borde, título y acciones opcionales.