Saltar al contenido principal
Version: Next (5.0)

Mensajes e información

Dos grupos de componentes pequeños que hablan con el usuario. Los mensajes son lo que una pantalla dice tras una acción: un diálogo de confirmación antes de una acción arriesgada, y los avisos y los mensajes sobre un campo que el servidor envía en sus respuestas. Los componentes de información (info, info-button e info-criteria) son los controles compactos de la cabecera: un valor con un desplegable, un botón y un criterio que se colocan junto al título.

note

Los diálogos, los avisos y los desplegables se dibujan sobre toda la página, fuera de la vista previa, así que siguen el modo de color del sitio y no el del interruptor Claro / Oscuro de la vista previa.

Mensaje​

Un elemento message define un texto una sola vez, normalmente en la parte oculta de la pantalla, para que cualquier botón pueda usarlo. Una acción confirm lo muestra en un diálogo modal: Aceptar continúa con las acciones que siguen al confirm (un guardado, un borrado) y Cancelar las detiene. La vista previa tiene el botón que lo lanza, como muestra el XML. Púlsalo y cambia los textos.

Vista previa en vivo
XML
<message id="DeleteMsg"
         title="Delete the customer?"
         message="The customer and its orders will be deleted." />
<button id="AskDelete"
        label="Delete customer"
        icon="lucide:trash-2"
        style="btn-danger">
  <button-action type="confirm" target="DeleteMsg" />
</button>

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

AtributoControlValores
titleTítulotext
messageMensajetext

Info​

Un info es un botón redondeado de la cabecera. Su etiqueta puede venir de una consulta o de la sesión, y un unit añade una insignia. Cuando tiene contenido, un clic lo abre en un desplegable; si tiene una acción, el clic ejecuta la acción.

Vista previa en vivo
XML
<info id="demo" label="Notifications" icon="lucide:bell" unit="3">
  <tag type="p" label="You have 3 unread notifications." />
</info>

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

AtributoControlValores
labelEtiquetatext
iconIconolucide:belllucide:maillucide:circle-helplucide:user
unitInsigniatext
tagDesplegable con contenidotrue / false

Recetas​

Controles de cabecera​

Los tres componentes de información juntos: un info con desplegable, un info-button que ejecuta acciones (aquí abre un diálogo) y un info-criteria, un criterio con el estilo de la cabecera.

<info id="Alerts" label="Notificaciones" icon="lucide:bell" unit="3">
  <tag type="p" label="Hay 3 facturas vencidas." />
</info>
<info-button id="HelpBtn" label="Ayuda" icon="lucide:circle-help">
  <button-action type="dialog" target="HelpDlg" />
</info-button>
<info-criteria id="Find" component="text" label="Buscar" placeholder="Cliente o factura" />

<dialog id="HelpDlg" label="Ayuda" style="modal-sm">
  <tag type="div" style="modal-body" label="Busca por nombre de cliente o por número de factura." />
  <tag type="div" style="modal-footer">
    <button id="CloseHelp" label="Cerrar" style="btn-primary">
      <button-action type="close" target="HelpDlg" />
    </button>
  </tag>
</dialog>

Avisos del servidor​

La mayoría de los mensajes no se escriben en la pantalla: el servidor responde a una acción con una acción message y el cliente la muestra como un aviso. Su tipo (ok, info, warning o error) define el aspecto y cuánto tiempo permanece: los tres primeros se desvanecen, un error permanece hasta que se cierra. Cada botón de aquí envía una acción de servidor; la documentación no tiene servidor, así que el ejemplo responde a cada una con las acciones de la tabla, como lo haría el servidor.

<button id="Save" label="Guardar" style="btn-primary">
  <button-action type="server" server-action="maintain" target-action="SaveCustomer" />
</button>
<button id="Sync" label="Sincronizar">
  <button-action type="server" server-action="maintain" target-action="SyncCustomers" />
</button>
<button id="Check" label="Comprobar el límite">
  <button-action type="server" server-action="query" target-action="CheckLimit" />
</button>
<button id="Charge" label="Cobrar" style="btn-danger">
  <button-action type="server" server-action="maintain" target-action="ChargeCustomer" />
</button>
Acción de destinoMensaje que envía el servidorTipo
SaveCustomerCliente guardado: Los cambios se guardaron.ok
SyncCustomersSincronizando: Se están actualizando 12 clientes.info
CheckLimitLímite de crédito: El cliente está cerca del límite.warning
ChargeCustomerPago rechazado: El banco rechazó el pago.error

Un mensaje sobre un campo​

Un target-message muestra el mensaje en un popover sobre el componente al que se refiere, para que el usuario vea qué campo corregir. La respuesta indica ese componente en su dirección. Si no está en la pantalla, el mensaje se muestra como un aviso.

<criteria id="CustomerEmail" component="text" label="Correo" placeholder="nombre@empresa.com" icon="lucide:mail" />
<button id="Verify" label="Verificar" style="btn-primary">
  <button-action type="server" server-action="validate" target-action="CheckEmail" />
</button>

El servidor responde a CheckEmail con un target-message de tipo error dirigido al criterio CustomerEmail.

Eventos y acciones​

Un info y un info-button guardan su evento click cuando el usuario hace clic en ellos, así que una dependencia puede reaccionar a él. Los mensajes no tienen evento: las acciones de abajo son las que los muestran. Un mensaje que es un aviso termina su acción cuando se desvanece o se cierra, así que las acciones que le siguen esperan; un confirm la termina con Aceptar y cancela la pila con Cancelar.

AcciónDescripción
confirmMuestra el message indicado en target en un diálogo de confirmación
messageMuestra un aviso (lo envía el servidor): type, title y message están en sus parámetros
target-messageMuestra un mensaje sobre un componente (lo envía el servidor); un aviso si el componente no está en la pantalla

Más​