Efectos

En pocas palabras

Brillos, cristal esmerilado y transparencia que puedes añadir a cualquier caja.

Los efectos visuales son propiedades de estilo: glow (un halo suave), bloom (un resplandor amplio y brillante), glass (un panel translúcido y esmerilado), opacity, y translate y scale, que desplazan o escalan el dibujo sin cambiar el layout. Las animaciones también pueden cambiar glow.

pz.Style · Categoría: Contenido · Referencia completa →

Vista previa

Código

pz.container(pz.row([
    pz.container(ui.label("Glass"), width=150, height=70, padding=14).style(glass=True, radius=12),
    pz.container(ui.label("Glow"), width=150, height=70, padding=14).style(
        background="#0b1220", radius=12, glow=("#22d3ee", 18)),
    pz.container(ui.label("Bloom"), width=150, height=70, padding=14).style(
        background="#1a0b16", radius=12, bloom=("#f472b6", 0.8)),
    pz.container(ui.label("Opacity"), width=150, height=70, padding=14).style(
        background="#0b1220", radius=12, opacity=0.5),
], spacing=24), padding=32).style(
    background=pz.Gradient(["#0f172a", "#312e81", "#0e7490"], angle=90), radius=14)

Nuevo

Este componente se añadió hace poco. Cuéntanos qué tal te funciona en el gestor de incidencias.

Cuándo usarlo

• Para destacar la acción principal o un estado en vivo (grabando, conectado).
• Para paneles flotantes sobre fondos coloridos (glass).

Uso

import pyzed as pz
from pyzed import ui

pz.container(pz.row([
    pz.container(ui.label("Glass"), width=150, height=70, padding=14).style(glass=True, radius=12),
    pz.container(ui.label("Glow"), width=150, height=70, padding=14).style(
        background="#0b1220", radius=12, glow=("#22d3ee", 18)),
    pz.container(ui.label("Bloom"), width=150, height=70, padding=14).style(
        background="#1a0b16", radius=12, bloom=("#f472b6", 0.8)),
    pz.container(ui.label("Opacity"), width=150, height=70, padding=14).style(
        background="#0b1220", radius=12, opacity=0.5),
], spacing=24), padding=32).style(
    background=pz.Gradient(["#0f172a", "#312e81", "#0e7490"], angle=90), radius=14)

Variantes

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.

Efectos

glass=True

Código

pz.container(pz.container(ui.label("Glass"), width=130, height=60, padding=12).style(glass=True, radius=12),
             padding=24).style(background=pz.Gradient(["#0f172a", "#312e81", "#0e7490"], angle=90), radius=12)

glow=

Código

pz.container(pz.container(ui.label("Glow"), width=130, height=60, padding=12).style(background="#0b1220", radius=12, glow=("#22d3ee", 18)),
             padding=24).style(background=pz.Gradient(["#0f172a", "#312e81", "#0e7490"], angle=90), radius=12)

bloom=

Código

pz.container(pz.container(ui.label("Bloom"), width=130, height=60, padding=12).style(background="#1a0b16", radius=12, bloom=("#f472b6", 0.8)),
             padding=24).style(background=pz.Gradient(["#0f172a", "#312e81", "#0e7490"], angle=90), radius=12)

opacity=0.5

Código

pz.container(pz.container(ui.label("Opacity"), width=130, height=60, padding=12).style(background="#0b1220", radius=12, opacity=0.5),
             padding=24).style(background=pz.Gradient(["#0f172a", "#312e81", "#0e7490"], angle=90), radius=12)

scale=1.15

Código

pz.container(pz.container(ui.label("Scale"), width=130, height=60, padding=12).style(background="#0b1220", radius=12, scale=1.15),
             padding=24).style(background=pz.Gradient(["#0f172a", "#312e81", "#0e7490"], angle=90), radius=12)

translate=

Código

pz.container(pz.container(ui.label("Translate"), width=130, height=60, padding=12).style(background="#0b1220", radius=12, translate=(16, 8)),
             padding=24).style(background=pz.Gradient(["#0f172a", "#312e81", "#0e7490"], angle=90), radius=12)

Eventos

Efectos no tiene eventos propios: muestra lo que le das. 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.

Propiedades y API

pz.Style

class Style

Un conjunto reutilizable de propiedades de estilo para widget.style(...), el style= de un componente o App.style. Combina estilos con | (gana el de la derecha). Ver Estilos.

Propiedad	Por defecto	Descripción
*styles	—	Estilos, dicts o nombres de estilo de partida.
**props	—	Propiedades: background, color, font, weight, italic, size, line_height, border_color, border_width, border ((ancho, color)), radius, shadow, padding, margin, width, height, max_width, max_height, min_width, min_height, align_x, align_y, clip. Efectos: opacity, translate ((x, y), píxeles o "50%"), scale, glow (un color, un tamaño o (color, tamaño)), bloom (un color o (color, intensidad)) y glass (True, un tinte o {"tint", "strength"}). Estados: hover, pressed (o active) y focus, cada uno con las propiedades que se muestran entonces. transition: milisegundos, True o {"duration", "easing", "delay"}. media: {consulta: estilo} que se aplica cuando la ventana la cumple. Los colores pueden ser tokens del tema.

Referencia completa →

Relacionados

AnimaciónPresets, keyframes y transiciones para cualquier widget.

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