up.link [up-expand]

HTML attribute

Enlarges the click area of a descendant link. A click anywhere in the area does what a click on its link does.

When Unpoly follows the link, the area takes over the link's Unpoly attributes, like [up-target], [up-instant], or [up-preload]. A click on the area then follows the link itself. Events like up:link:follow are emitted on the link, and the link is the origin of the fragment update.

Example

<div class="notification" up-expand>
  Record was saved!
  <a href="/records" up-follow>Close</a>
</div>

In the example above, clicking anywhere within the .notification element would follow the Close link.

A click on another link, a form field, a button, a label or a <summary> within the area is left to that element. To keep the area from following a click on another element, prevent its up:click event.

Multiple contained links

If a container contains more than one link, you can set the value of the [up-expand] attribute to a CSS selector that defines which link should be expanded:

<div class="notification" up-expand="#close"> <!-- mark: #close -->
  Record was saved!
  <a id="details" href="/records/5" up-follow>Details</a>
  <a id="close" href="/records" up-follow>Close</a> <!-- mark: id="close" -->
</div>

Links that Unpoly doesn't follow

When Unpoly doesn't follow the expanded link, a click on the area clicks the link. The browser then does what the link does. A plain link makes a full page load, a [download] link downloads its file, and a [target=_blank] link opens a new tab.

To update a fragment instead, give the link an [up-follow] attribute or follow all links.

Feedback classes

Unpoly assigns the .up-active class to clicked links while they are loading. This class is assigned to both the expanded link and the expanded click area.

Assume this [up-expand] container with two contained links:

<div up-expand>
  <a href="/foo" up-follow>Foo</a>
  <a href="/bar" up-follow>Bar</a>
</div>

When either the [up-expand] container or the first link is clicked, the .up-active class is assigned to both elements:

<div up-expand class="up-active"> <!-- mark: class="up-active" -->
  <a href="/foo" up-follow class="up-active">Foo</a> <!-- mark: class="up-active" -->
  <a href="/bar" up-follow>Bar</a>
</div>

When a non-expanded link is clicked, only that link becomes .up-active:

<div up-expand>
  <a href="/foo" up-follow>Foo</a> <!-- chip: not active -->
  <a href="/bar" up-follow class="up-active">Bar</a> <!-- mark: class="up-active" -->
</div>

Limitations

[up-expand] has some limitations for advanced browser users:

• Users won't be able to right-click the expanded area to open a context menu.
• Users won't be able to CTRL+click the expanded area to open a new tab.

To overcome these limitations, consider nesting the entire clickable area in an actual <a> tag. It's OK to put block elements inside an anchor tag.