Skip to content

<fragment>

A tag that renders a UI fragment by name. Supports folders, inherited attributes, query parameters, and child <param> elements.

For a comprehensive guide to fragments, see Fragments.

Attributes

Name Type Description Required Default
name String The name of the fragment resource to render (e.g., home, auth/login). Supports query parameters. Yes -
for String The name of the parent's attribute that will be assigned the fragment's output. No null
visible bool Controls whether the fragment is rendered. When false, the fragment is not inflated at all. No true
dependenciesScope String How to scope dependencies: new, copy, or inherit. Defaults to copy if params or query parameters are present. No auto

Any attributes not listed above are forwarded to the child fragment as inherited attributes.

Children

The <fragment> tag accepts <param> child elements to pass named parameters to the fragment. Parameters are added to the fragment's dependencies before inflation.

<fragment name="product_card">
    <param name="productId" value="${product.id}"/>
    <param name="showPrice" value="true"/>
</fragment>

Examples

Basic Fragment Inclusion

<Column>
    <fragment name="header"/>
    <fragment name="content"/>
    <fragment name="footer"/>
</Column>

Fragment with for Attribute

<AppBar>
    <fragment for="leading" name="profile/icon"/>
</AppBar>

Conditional Fragment

<fragment name="admin_panel" visible="${isAdmin}"/>

Fragment with Query Parameters

<fragment name="settings?tab=profile&edit=true"/>

Fragment with Inherited Attributes

<fragment name="user_card" userId="${user.id}" showAvatar="true"/>

Attributes userId and showAvatar are forwarded to the child fragment.

Fragment with Parameters

<fragment name="product_card">
    <param name="productId" value="${product.id}"/>
    <param name="showPrice" value="true"/>
</fragment>

See Also

  • Fragments - Comprehensive fragment guide
  • <var> - For declaring variables
  • <if>/<else> - For conditional rendering