Saltar al contenido principal
Version: Next (5.0)

Panel lateral y popover

Ambos son diálogos que no cubren toda la pantalla: un panel lateral se ancla al borde izquierdo o derecho y deja la pantalla a la vista, un popover se abre junto al control al que pertenece. Se abren y se cierran como un diálogo (un botón con una acción dialog, y las acciones close y close-cancel) y se cierran con su cruz, con Esc o con un clic fuera. Pulsa los botones de abajo: los playgrounds ejecutan esas acciones.

note

Ambos 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.

Panel lateral​

Úsalo para contenido que el usuario consulta o edita junto a la pantalla: filtros, el detalle de una fila, ajustes. La cabecera y el pie siguen a la vista y el cuerpo se desplaza entre ellos.

Vista previa en vivo
XML
<side-panel id="demo" label="Edit customer">
  <tag type="div" style="panel-body">
    <criteria id="Name" component="text" label="Name" />
    <criteria id="Notes" component="textarea" label="Notes" />
  </tag>
  <tag type="div" style="modal-footer">
    <button id="Cancel" label="Cancel">
      <button-action type="close-cancel" target="demo" />
    </button>
    <button id="Save" label="Save" style="btn-primary">
      <button-action type="close" target="demo" />
    </button>
  </tag>
</side-panel>
<button id="OpenPanel" label="Open the side panel">
  <button-action type="dialog" target="demo" />
</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
labelTítulotext
iconIconolucide:userlucide:settingslucide:filterlucide:bell
positionBorderightleft
max-widthAncho máximo20rem30rem50vw
on-closeAl descartarloacceptreject
tagPie con botonestrue / false

Con header-grid la cabecera de un panel lateral muestra la fila seleccionada de una tabla (un avatar, un título, un subtítulo y etiquetas header-tag). Esa cabecera de identidad necesita una tabla con una fila seleccionada y no forma parte de este playground: consulta la cabecera de identidad.

Popover​

Úsalo para contenido breve ligado a un control: una edición rápida, unas pocas opciones, una nota. Su anchor es el id de ese control (un botón, un criterio, una tabla...) y position el lado por el que se abre. Sigue al ancla mientras la página se desplaza.

Vista previa en vivo
XML
<popover id="demo" label="Quick note" anchor="OpenNote">
  <criteria id="Note" component="textarea" label="Note" />
</popover>
<button id="OpenNote" label="Add a note" icon="lucide:message-square">
  <button-action type="dialog" target="demo" />
</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
labelTítulotext
positionLado del anclabottomtopleftright
max-widthAncho máximo14rem30rem
tagPie con un botóntrue / false

Recetas​

Filtros a la izquierda​

Un panel lateral en el borde izquierdo, estrecho, cuyo on-close="reject" hace que la cruz, Esc y un clic fuera se comporten como Cancelar: las acciones que esperaban al panel se cancelan.

<button id="OpenFilters" label="Filtros" icon="lucide:filter">
  <button-action type="dialog" target="FiltersPanel" />
</button>

<side-panel id="FiltersPanel" label="Filtros" position="left" max-width="20rem" on-close="reject">
  <tag type="div" style="panel-body">
    <criteria id="Search" component="text" label="Buscar" placeholder="Nombre o correo" />
    <criteria id="OnlyActive" component="checkbox" label="Solo clientes activos" style="switch" />
  </tag>
  <tag type="div" style="modal-footer">
    <button id="Reset" label="Restablecer">
      <button-action type="close-cancel" target="FiltersPanel" />
    </button>
    <button id="Apply" label="Aplicar" style="btn-primary">
      <button-action type="close" target="FiltersPanel" />
    </button>
  </tag>
</side-panel>

Confirmar sobre un control​

Un popover encima de su ancla. Abrirlo desde el botón que necesita la decisión mantiene la pregunta junto a la acción.

<button id="Archive" label="Archivar cliente" icon="lucide:archive">
  <button-action type="dialog" target="ArchivePopover" />
</button>

<popover id="ArchivePopover" label="¿Archivar este cliente?" anchor="Archive" position="top" max-width="16rem">
  <tag type="p" label="Sus pedidos se conservan en el historial." />
  <tag type="div" style="modal-footer">
    <button id="Keep" label="Mantener">
      <button-action type="close-cancel" target="ArchivePopover" />
    </button>
    <button id="Confirm" label="Archivar" style="btn-danger">
      <button-action type="close" target="ArchivePopover" />
    </button>
  </tag>
</popover>

Eventos y acciones​

Ambos guardan los eventos open y close cuando se abren y se cierran, así que una dependencia puede reaccionar a ellos. Se abren y se cierran con acciones de los botones, las mismas que un diálogo.

AcciónDescripción
dialogAbre el panel lateral o el popover indicado en target
closeLo cierra y continúa con las acciones que esperaban
close-cancelLo cierra y cancela las acciones que esperaban

Con on-close="reject" la cruz, Esc y un clic fuera actúan como close-cancel; por defecto (accept) actúan como close. Con deferred="true" los datos de los componentes de dentro se cargan la primera vez que se abre. Mientras está abierto, el foco del teclado se queda dentro, y vuelve al control que lo abrió cuando se cierra.

Más​