Skip to main content
Version: Next (5.0)

Side panel and popover

Both are dialogs that do not cover the whole screen: a side panel is anchored to the left or right edge and keeps the screen in view, a popover opens next to the control it belongs to. They open and close like a dialog (a button with a dialog action, close and close-cancel actions) and close with their cross, Esc or a click outside. Press the buttons below: the playgrounds run those actions.

note

Both are drawn over the whole page, outside the preview, so they follow the colour mode of the site and not the one of the Light / Dark switch of the preview.

Side panel​

Use it for content the user consults or edits next to the screen: filters, the detail of a row, settings. The header and the footer stay in view and the body scrolls between them.

Live preview
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>

The controls above write these attributes. The reference lists every attribute, its type and default. Attributes in the XSD reference

AttributeControlValues
labelTitletext
iconIconlucide:userlucide:settingslucide:filterlucide:bell
positionEdgerightleft
max-widthMaximum width20rem30rem50vw
on-closeWhen it is dismissedacceptreject
tagFooter with buttonstrue / false

With header-grid the header of a side panel shows the selected row of a grid (an avatar, a title, a subtitle and header-tag tags). That identity header needs a grid with a selected row and is not part of this playground: see the identity header.

Popover​

Use it for short content linked to a control: a quick edit, a few options, a note. Its anchor is the id of that control (a button, a criterion, a grid...) and position the side where it opens. It follows the anchor while the page scrolls.

Live preview
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>

The controls above write these attributes. The reference lists every attribute, its type and default. Attributes in the XSD reference

AttributeControlValues
labelTitletext
positionSide of the anchorbottomtopleftright
max-widthMaximum width14rem30rem
tagFooter with a buttontrue / false

Recipes​

Filters on the left​

A side panel on the left edge, narrow, whose on-close="reject" makes the cross, Esc and a click outside behave as Cancel: the actions that were waiting for the panel are cancelled.

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

<side-panel id="FiltersPanel" label="Filters" position="left" max-width="20rem" on-close="reject">
  <tag type="div" style="panel-body">
    <criteria id="Search" component="text" label="Search" placeholder="Name or email" />
    <criteria id="OnlyActive" component="checkbox" label="Only active customers" style="switch" />
  </tag>
  <tag type="div" style="modal-footer">
    <button id="Reset" label="Reset">
      <button-action type="close-cancel" target="FiltersPanel" />
    </button>
    <button id="Apply" label="Apply" style="btn-primary">
      <button-action type="close" target="FiltersPanel" />
    </button>
  </tag>
</side-panel>

Confirm over a control​

A popover above its anchor. Opening it from the button that needs the decision keeps the question next to the action.

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

<popover id="ArchivePopover" label="Archive this customer?" anchor="Archive" position="top" max-width="16rem">
  <tag type="p" label="Its orders stay in the history." />
  <tag type="div" style="modal-footer">
    <button id="Keep" label="Keep">
      <button-action type="close-cancel" target="ArchivePopover" />
    </button>
    <button id="Confirm" label="Archive" style="btn-danger">
      <button-action type="close" target="ArchivePopover" />
    </button>
  </tag>
</popover>

Events and actions​

Both store the open and close events when they are opened and closed, so a dependency can react to them. They are opened and closed with actions of the buttons, the same ones as a dialog.

ActionDescription
dialogOpens the side panel or popover named in target
closeCloses it and goes on with the actions that were waiting
close-cancelCloses it and cancels the actions that were waiting

With on-close="reject" the cross, Esc and a click outside act as close-cancel; by default (accept) they act as close. With deferred="true" the data of the components inside loads the first time it opens. While it is open the keyboard focus stays inside, and it goes back to the control that opened it when it closes.

More​

Edit this page
Last updated on by Pablo Javier García Mora