Enum HtmxSwap

Namespace

Ramstack.HtmxToolkit

Assembly

Ramstack.HtmxToolkit.dll

Defines the values for the hx-swap attribute.

public enum HtmxSwap

Fields

InnerHtml = 0

Replaces the inner HTML of the target element.

OuterHtml = 1

Replaces the entire target element with the response.

InnerMorph = 2

Morphs the inner HTML of the target element.

Remarks

Supported natively by HTMX 4.x.

With HTMX 1.9.x or 2.x, activate the ramstack-swap extension and optionally load Idiomorph. Without Idiomorph, the extension falls back to InnerHtml.

OuterMorph = 3

Morphs the target element itself.

Remarks

Supported natively by HTMX 4.x.

With HTMX 1.9.x or 2.x, activate the ramstack-swap extension and optionally load Idiomorph. Without Idiomorph, the extension falls back to OuterHtml.

OuterSync = 4

Synchronizes the target element with the response.

Remarks

Supported natively by HTMX 4.x.

With HTMX 1.9.x or 2.x, activate the ramstack-swap extension to fall back to attribute synchronization and InnerHtml.

TextContent = 5

Replaces the text content of the target element.

Remarks

Supported natively by HTMX 2.x and 4.x.

With HTMX 1.9.x, activate the ramstack-swap extension. Idiomorph is not required for this style.

BeforeBegin = 6

Inserts the response before the target element.

AfterBegin = 7

Inserts the response before the first child of the target element.

BeforeEnd = 8

Inserts the response after the last child of the target element.

AfterEnd = 9

Inserts the response after the target element.

Delete = 10

Deletes the target element, regardless of the response.

None = 11

Does not swap content from the response. Out-of-band items are still processed.

Examples

// Morphing updates the existing elements instead of replacing them,
// so focus and the state of form fields survive the update.
Response.Htmx(htmx => htmx.Reswap(HtmxSwap.OuterMorph));

return PartialView("_Profile", profile);

@* HTMX 1.9.x and 2.x: enable the swap styles from the Toolkit script
   and load Idiomorph for true morphing. HTMX 4.x supports them natively. *@
<body hx-ext="ramstack-swap">
    ...
    <script src="https://cdn.jsdelivr.net/npm/idiomorph@0.7.4/dist/idiomorph.min.js"
            integrity="sha384-YWh9vmu1Q6BptPp1emqfsNatFASVLolFKP/5f4LWR6eGMLEhBDh1zcwU2OzfVCe9"
            crossorigin="anonymous"></script>
</body>