up.fragment [up-main]

HTML attribute

Marks this element as the main fragment of your application layout.

Unpoly will update the main fragment when no more specific render target is given.

Example

Many links simply replace the main fragment in your application layout.

Unpoly lets you mark this element 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 the main fragment is marked, 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 a different main fragment

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

To mark a different main fragment 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