Skip to content
Agon ĀtriumAgon Ātrium

Source code

Open source page

Drawers

Present a focused task in an overlay with focus trapping, Escape dismissal, and focus restoration.

Start with your first page. Shared ui* providers are registered by createAdmin. Examples belong inside a route template, not the root HTML document. The page and its optional controller load through Atrium’s lazy route registry.

Minimal example

<button type="button" class="btn btn-primary" @click="$dispatch('dialog-open', { id: 'record-editor' })">Edit record</button>
<include src="{{ uiRoot }}/drawer.html" locals='{"id":"record-editor","title":"edit","content":"partials/editor.html"}'></include>

Create partials/editor.html in your application:

<div class="ui-dialog-body"><p>Your form or detail content.</p></div>
<footer class="ui-dialog-footer">
  <button type="button" class="btn btn-secondary" @click="close">Cancel</button>
</footer>

Settings and behavior

  • Required include locals are id, title, and content.
  • title is a translation key. content is a trusted application template compiled by Vite.
  • Use unique IDs for independent overlays.
  • Send an optional payload with dialog-open. Read it from payload inside the overlay.
  • JavaScript callers can import openDialog from @agon/atrium.
  • A dialog-close event closes the addressed instance. Supply detail.id when dispatching globally.

Integration notes

The shared template uses Atrium’s cancellable x-ui-trap directive, backed by focus-trap. Closing or removing the overlay cancels pending activation and restores native inert and scroll state. Drawers anchor to the logical end of the viewport and follow RTL. Do not open several modal focus traps at once. Close the current overlay before opening another.

Working reference

See the production example. Return to the component index.

Author

Laurent Declercq l.declercq@agon-innovation.ch

License

Unless otherwise stated all source code is licensed under LGPL 2.1 and has the following copyright:

© 2026, Agon Partners Innovation AG, All rights reserved.

The design material and the “Agon Ātrium” trademark is the property of their authors. Reuse of them without prior consent of their respective authors is strictly prohibited.

Version

Version: 20260921