Widgets

Un widget incrusta un componente que el XSD no describe por sí mismo: su type lo elige del registro del cliente. Esta página tiene los dos que muestran contenido: un carrusel que recorre imágenes, vídeos y documentos PDF, y el visor de ayuda que muestra la página de ayuda de la aplicación. Los visores de archivos y de PDF están en su propia página.

Vista previa en vivo

ClaroOscuro

Controles

Tipo de widget

CarruselVisor de ayuda

XML

<widget id="demo"
        type="carousel"
        initial-load="query"
        target-action="GalleryQuery" />

Atributos

Los controles de arriba escriben estos atributos. La referencia lista todos los atributos, con su tipo y valor por defecto. Atributos en la referencia XSD

Atributo	Control	Valores
type	Tipo de widget	carouselhelp-viewer

Referencia completa

• Documentación completa de este componente
• Referencia XSD del elemento

Recetas

Carrusel con títulos y un vídeo

Un carrusel toma sus diapositivas de una consulta (initial-load="query" y target-action), una por fila. Cada fila tiene un type (image, video o pdf), la url del archivo y, opcionalmente, un title y una description que se muestran encima. Una imagen se abre a tamaño completo al hacer clic en ella.

<widget id="Gallery" type="carousel" initial-load="query" target-action="GalleryQuery" />

Columna	Descripción
type	image (por defecto), video o pdf
url	Dirección del archivo
title	Título que se muestra encima de la diapositiva (opcional)
description	Texto que se muestra bajo el título (opcional)

Ayuda en un panel lateral

El visor de ayuda pide al servidor el HTML de la ayuda de la aplicación (o de la opción del menú en la que está la pantalla) cuando se muestra. Dentro de un panel lateral se carga la primera vez que se abre el panel. La documentación no tiene servidor, así que el ejemplo responde a esa petición con una página fija.

<button id="OpenHelp" label="Ayuda" icon="lucide:circle-help">
  <button-action type="dialog" target="HelpPanel" />
</button>

<side-panel id="HelpPanel" label="Ayuda" max-width="30rem">
  <widget id="HelpContent" type="help-viewer" />
</side-panel>

Calendario de eventos

El event-calendar que aparece en la documentación de los widgets no es un widget del cliente React: es el ejemplo de la guía de widgets personalizados, que una aplicación registra con registerWidget(type, component). Los widgets incluidos en el cliente React son carousel, help-viewer, file-viewer, pdf-viewer, file-manager y log-viewer.

Eventos y acciones

Estos widgets no tienen evento ni acción propios. Una dependencia puede mostrar u ocultar cualquiera de ellos, y un widget con una consulta se recarga cuando una acción carga su destino.

Más

• Documentación completa del widget: el registro, los parámetros y los widgets personalizados.
• Referencia XSD del elemento widget y del elemento widget-parameter.