ui:detachable

Lets a part render outside its root. Add it to the template of the part, and the part takes a provider prop with the id of a <component>.provider:

    
            <ui:detachable />

<button {ui:ref(name: 'trigger')} {ui:attributes()}>
    <f:slot />
</button>

    
            <ui:dialog.provider id="cookie-settings" />
<ui:dialog.trigger provider="cookie-settings">Cookie settings</ui:dialog.trigger>
<ui:dialog.root provider="cookie-settings">...</ui:dialog.root>

A wrapper built with ui:useProps adds its own <ui:detachable /> to take provider.

Arguments

None

On this page