[up-main] - Unpoly

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.

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

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

up.fragment [up-main]
HTML selector

Example

Overlays can use different main targets

Using existing elements as main targets

Modifying attributes

up.fragment [up-main] HTML selector

Example

Overlays can use different main targets

Using existing elements as main targets

Modifying attributes

up.fragment [up-main]
HTML selector