Acordeón

En pocas palabras

Varias secciones apiladas; cada una se abre o se cierra al pulsar su título.

Secciones plegables apiladas separadas por divisores. Las secciones son tuplas (key, title, content) u objetos ui.AccordionSection (con icon y un widget end en la cabecera). El estado abierto es tuyo: open es un conjunto de claves, un dict {clave: bool} o True, y on_toggle recibe la clave.

ui.accordion · Categoría: Listas y menús · Referencia completa →

Vista previa

Código

rows = lambda *items: pz.column([ui.field(k, ui.switch(v, on_toggle)) for k, v in items], spacing=8)
pz.container(ui.accordion([
    ("editor", "Editor", rows(("Soft wrap", True), ("Minimap", False))),
    ("files", "Files", rows(("Autosave", True))),
    ("git", "Git", ui.muted("Collapsed sections only show their header.")),
], open={"editor", "files"}, on_toggle=on_toggle,
   icons={"editor": "file-code", "files": "folder", "git": "git-branch"}), width=400)

Cuándo usarlo

• Para paneles largos de ajustes o propiedades en los que solo hacen falta algunas secciones a la vez.
• Para un solo bloque plegable, usa un Desplegable.

Uso

import pyzed as pz
from pyzed import ui

class Settings(pz.App):
    def __init__(self):
        self.open = {"editor"}

    def view(self):
        return ui.accordion(
            [("editor", "Editor", ui.muted("…")), ("files", "Files", ui.muted("…"))],
            open=self.open, on_toggle=lambda key: self.open.symmetric_difference_update({key}),
        )

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.

Secciones abiertas

Todas cerradas

Código

pz.container(ui.accordion([("a", "Editor", ui.muted("…")), ("b", "Files", ui.muted("…")),
                           ("c", "Git", ui.muted("…"))], open=set(), on_toggle=on_toggle), width=320)

open={"a"}

Código

pz.container(ui.accordion([("a", "Editor", ui.muted("Font, wrapping, minimap.")),
                           ("b", "Files", ui.muted("…"))], open={"a"}, on_toggle=on_toggle), width=320)

open=True

Código

pz.container(ui.accordion([("a", "Editor", ui.muted("Font, wrapping.")),
                           ("b", "Files", ui.muted("Autosave."))], open=True, on_toggle=on_toggle), width=320)

Contenido

icons=

Código

pz.container(ui.accordion([("e", "Editor", ui.muted("…")), ("g", "Git", ui.muted("…"))], open=set(),
                          icons={"e": "file-code", "g": "git-branch"}, on_toggle=on_toggle), width=320)

AccordionSection(end=)

Código

pz.container(ui.accordion([ui.AccordionSection("p", "Problems", ui.muted("…"), icon="circle-x",
                                              end=ui.count_badge(3, tint="error"))],
                          open=set(), on_toggle=on_toggle), width=320)

Eventos

Acordeón tiene 1 evento 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.

Evento	El handler recibe	Cuándo
on_toggle	(key)	Se llama con la clave de la cabecera pulsada.

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.

Imperativo

class Settings(pz.App):
    def __init__(self):
        self.open = {"editor"}

    def toggle(self, key):               # on_toggle: the key of the clicked header
        self.open ^= {key}

    def view(self):
        return ui.accordion([("editor", "Editor", ui.muted("Font, tabs, wrapping")),
                             ("files", "Files", ui.muted("Autosave, encoding"))],
                            open=self.open, on_toggle=self.toggle)

Declarativo

from dataclasses import dataclass


@dataclass
class Toggle:
    key: str


class Settings(pz.App):
    open = frozenset({"editor"})

    def update(self, message):
        match message:
            case Toggle(key):
                self.open = self.open ^ {key}

    def view(self):
        return ui.accordion([("editor", "Editor", ui.muted("…")), ("files", "Files", ui.muted("…"))],
                            open=self.open, on_toggle=Toggle)

Funcional

from dataclasses import dataclass


@dataclass(frozen=True)
class State:
    open: frozenset = frozenset({"editor"})


def view(state, set_state):
    return ui.accordion([("editor", "Editor", ui.muted("…")), ("files", "Files", ui.muted("…"))],
                        open=state.open, on_toggle=lambda key: set_state(open=state.open ^ {key}))

Propiedades y API

ui.accordion

accordion(
    sections,
    *,
    open=(),
    on_toggle=None,
    icons=None,
    spacing=8,
    padding=(6, 12, 10, 12),
    theme=None,
)

Secciones plegables apiladas y separadas por divisores, como los paneles de una pantalla de ajustes. Cada cabecera ocupa todo el ancho, así que el contenido queda alineado con el resto del panel. El estado abierto es tuyo: cámbialo en on_toggle.

Propiedad	Por defecto	Descripción
sections	obligatorio	Elementos ui.AccordionSection(key, title, content, icon=None, end=None) (o tuplas (key, title, content)).
open	()	El conjunto de ids abiertos, un dict {id: bool} o True para todos.
icons	None	{id: icono}: un icono de Lucide para cada cabecera.
spacing	8	Espacio alrededor de los divisores entre secciones.
padding	(6, 12, 10, 12)	Relleno alrededor del contenido de una sección abierta.
theme	None	Tema a usar en lugar del actual (pyzed.theme.current()).

Eventos: on_toggle (eventos).

Referencia completa →

ui.AccordionSection

class AccordionSection

Una sección de ui.accordion: key, title, content y, opcionales, icon y un widget end en la cabecera.

Propiedad	Por defecto	Descripción
key	obligatorio	Clave que identifica la suscripción (por defecto, el mensaje o la función).
title	obligatorio	Título.
content	obligatorio	Contenido: un Widget, un texto o un número (se convierte en texto).
icon	None	Nombre de un icono de Lucide (pyzed icons los lista).
end	None	Widgets al final (derecha).

Referencia completa →

Relacionados

DesplegableUna sección plegable con flecha.

Grupo de ajustesUn bloque con título de filas de ajustes, para pantallas de ajustes.