Edit this page

up.fragment [up-main]
HTML selector

Marks this element as the primary content element of your application layout.

Unpoly will update a main element when no more specific render target is given.

Targeting fragments

Example

Many links simply replace the primary 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>

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>

Using existing elements as main targets

Instead of the [up-main] attribute you may also use the standard <main> element.

You may also configure an existing selector in up.fragment.config.mainTargets:

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

You may 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

Modifying attributes

[up-main]
optional

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].