Contador

En pocas palabras

Un numerito redondo, como el número de mensajes sin leer en el icono de una app.

Un contador redondo para notificaciones o problemas. Por encima de max muestra 99+.

ui.count_badge · Categoría: Estado y avisos · Referencia completa →

Vista previa

Código

pz.row([
    ui.count_badge(3),
    ui.count_badge(42, tint="success"),
    ui.count_badge(120, tint="error"),
    pz.row([ui.icon_button("bell", on_press), ui.count_badge(7)], spacing=2, align="center"),
], spacing=16, align="center")

Cuándo usarlo

• Junto a un icono o pestaña para indicar cuántos elementos sin leer o errores hay.
• Para estados de texto usa una Insignia.

Uso

import pyzed as pz
from pyzed import ui

pz.row([
    ui.count_badge(3),
    ui.count_badge(42, tint="success"),
    ui.count_badge(120, tint="error"),
    pz.row([ui.icon_button("bell", on_press), ui.count_badge(7)], spacing=2, align="center"),
], spacing=16, align="center")

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.

Cuenta

Por encima de max muestra max+.

3

Código

ui.count_badge(3)

42

Código

ui.count_badge(42)

120

Código

ui.count_badge(120)

max=9

Código

ui.count_badge(12, max=9)

Tinte

tint="success"

Código

ui.count_badge(5, tint="success")

tint="warning"

Código

ui.count_badge(5, tint="warning")

tint="error"

Código

ui.count_badge(5, tint="error")

Junto a un icono

Notificaciones

Código

pz.row([ui.icon_button("bell", on_press), ui.count_badge(7)], spacing=2, align="center")

Estados y eventos

Con show_zero=False no dibuja nada en 0 pero mantiene su lugar en el diseño.

show_zero=False

Código

pz.row([ui.icon_button("bell", on_press), ui.count_badge(0, show_zero=False)], align="center")

Eventos

Contador 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

ui.count_badge

count_badge(count, *, tint='accent', max=99, show_zero=True, theme=None)

Un contador redondo (notificaciones, problemas…). Muestra 99+ por encima de max.

Propiedad	Por defecto	Descripción
count	obligatorio	El número.
tint	"accent"	Color semántico: "accent", "error", "warning", "success", "info" o un token.
max	99	Máximo antes de mostrar N+.
show_zero	True	Con False, un 0 no dibuja nada.
theme	None	Tema a usar en lugar del actual (pyzed.theme.current()).

Referencia completa →

Relacionados

InsigniaUna pastilla pequeña para estados, versiones y contadores.

IndicadorUn punto de color para estado, presencia o cambios sin guardar.

Barra de estadoLa barra inferior: diagnósticos, posición del cursor, lenguaje.