From 3e3bc37234205a1c2abf8a0372c55a53aac598f6 Mon Sep 17 00:00:00 2001 From: Jake Lazaroff Date: Fri, 8 Dec 2023 00:45:20 -0500 Subject: [PATCH] Load modal content when a Shoelace dialog opens --- ...modal-content-when-shoelace-dialog-opens.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 htmx/load-modal-content-when-shoelace-dialog-opens.md diff --git a/htmx/load-modal-content-when-shoelace-dialog-opens.md b/htmx/load-modal-content-when-shoelace-dialog-opens.md new file mode 100644 index 0000000..bf77f60 --- /dev/null +++ b/htmx/load-modal-content-when-shoelace-dialog-opens.md @@ -0,0 +1,18 @@ +# Load modal content when a Shoelace dialog opens + +This is pretty idiosyncratic to [HTMX](https://htmx.org) and [Shoelace](https://shoelace.style), but it's a neat pattern so I'm documenting it here. + +HTMX lets you make an HTTP request in response to an event and insert it elsewhere into the DOM. Shoelace's [Dialog](https://shoelace.style/components/dialog) component fires an `sl-show` event when the dialog opens. These can be combined to automatically load modal content when the modal opens: + +```html + +``` + +If parts of the modal don't need to be loaded via HTTP — for example, the title — `hx-target` can be used to replace only the modal content: + +```html + + My Modal +
+ +```