Campo de formulario

En pocas palabras

Una fila de un formulario: el nombre de un ajuste a la izquierda y su control a la derecha.

Una fila de formulario como las de una pantalla de ajustes: el título (y una descripción opcional) a la izquierda y cualquier control a la derecha. Apila varias en una columna o en un Grupo de ajustes.

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

Vista previa

Código

pz.column([
    ui.field("Autosave", ui.switch(True, on_toggle), description="Saves when you switch tabs"),
    ui.field("Format on save", ui.checkbox(False, on_toggle)),
    ui.field("Font size", ui.number_field(14, on_change, suffix="px")),
], spacing=14, width=440)

Cuándo usarlo

• Para preferencias y formularios en los que cada control necesita una etiqueta y quizá una pista.
• Alinea interruptores, selects y campos numéricos de anchos distintos.

Uso

import pyzed as pz
from pyzed import ui

pz.column([
    ui.field("Autosave", ui.switch(True, on_toggle), description="Saves when you switch tabs"),
    ui.field("Format on save", ui.checkbox(False, on_toggle)),
    ui.field("Font size", ui.number_field(14, on_change, suffix="px")),
], spacing=14, width=440)

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.

Control

Interruptor

Código

pz.container(ui.field("Autosave", ui.switch(True, on_toggle)), width=380)

Campo numérico

Código

pz.container(ui.field("Font size", ui.number_field(14, on_change, suffix="px")), width=380)

Select

Código

pz.container(ui.field("Theme", ui.select(["One Dark", "One Light"], "One Dark", on_select, width=150)), width=380)

Campo de texto

Código

pz.container(ui.field("Name", ui.input("Pyzed", on_input, width=180)), width=380)

Ayuda y errores

description=

Código

pz.container(ui.field("Autosave", ui.switch(True, on_toggle), description="Saves when you switch tabs"), width=380)

error=

Código

pz.container(ui.field("Port", ui.number_field(80, on_change), error="Ports below 1024 need admin rights"), width=380)

Estados y eventos

required=True

Código

pz.container(ui.field("Name", ui.input("", on_input, width=180), required=True), width=380)

vertical=True

Código

pz.container(ui.field("Email", ui.input("ada@", on_input, invalid=True), vertical=True, required=True,
                      error="Enter a valid email"), width=320)

Eventos

Campo de formulario 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.field

field(
    title,
    control,
    *,
    description=None,
    error=None,
    required=False,
    vertical=False,
    theme=None,
)

Una fila de formulario: título y descripción a la izquierda, control a la derecha (como una pantalla de ajustes).

Propiedad	Por defecto	Descripción
title	obligatorio	Título.
control	obligatorio	El control (switch, input…).
description	None	Texto de ayuda.
error	None	Un mensaje de validación que se muestra bajo el título con el color de error (ver pz.validation_errors).
required	False	Añade un * rojo tras el título.
vertical	False	Pone el control bajo el título.
theme	None	Tema a usar en lugar del actual (pyzed.theme.current()).

Referencia completa →

Relacionados

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

InterruptorUn interruptor para ajustes que se aplican al momento.

Campo numéricoUn número con botones −/+, límites, paso y sufijo.