Edit this page

up.fragment [up-main]
HTML selector

Updates this element when no other render target is given.

Example

Many links simply replace the main content element in your application layout.

Unpoly lets you mark this elements as a default target using the [up-main] attribute:

<body>
  <div class="layout">
    <div class="layout--side">
      ...
    </div>
    <div class="layout--content" up-main>
     ...
    </div>
  </div>
</body>

Once a main target is configured, you no longer need [up-target] in a link.
Use [up-follow] and the [up-main] element will be replaced:

<a href="/foo" up-follow>...</a>

If you want to update something more specific, you can still use [up-target]:

<a href="/foo" up-target=".profile">...</a>

Instead of assigning [up-main] you may also configure an existing selector in up.fragment.config.mainTargets:

up.fragment.config.mainTargets.push('.layout--content')

Overlays can use different main targets

Overlays often use a different default selector, e.g. to exclude a navigation bar.

To define a different main target for an overlay, set the layer mode as the value of the [up-main] attribute:

<body>
  <div class="layout" up-main="root">
    <div class="layout--side">
      ...
    </div>
    <div class="layout--content" up-main="modal">
      ...
    </div>
  </div>
</body>

Instead of assigning [up-main] you may also configure layer-specific targets in up.layer.config:

up.layer.config.popup.mainTargets.push('.menu')              // for popup overlays
up.layer.config.drawer.mainTargets.push('.menu')             // for drawer overlays
up.layer.config.overlay.mainTargets.push('.layout--content') // for all overlay modes

A space-separated list of layer modes for which to use this main target.

Omit the attribute value to define a main target for all layer modes.

To use a different main target for all overlays (but not the root layer), set [up-main=overlay].

Modifying attributes

[up-main] optional
This website uses cookies to improve usability and analyze traffic.
I accept or learn more