The up.feedback
module adds useful CSS classes to fragments while they are loading over the network.
By styling these classes you can provide instant feedback to user interactions, improving the perceived speed of your interface.
Let's say we have an <nav>
element with two links, pointing to /foo
and /bar
respectively:
<nav>
<a href="/foo" up-follow>Foo</a>
<a href="/bar" up-follow>Bar</a>
</nav>
By giving the navigation bar the [up-nav]
attribute, links pointing to the current browser address are highlighted
as we navigate through the site.
While the current URL is /foo
, the first link is automatically marked with an .up-current
class.
We also assign an [aria-current]
attribute
to convey the highlighted link to assistive technologies:
<nav up-nav>
<a href="/foo" up-follow class="up-current" aria-current="page">Foo</a>
<a href="/bar" up-follow>Bar</a>
</nav>
When the user clicks on the /bar
link, the link will receive the .up-active
class while it is waiting
for the server to respond. The targeted fragment (the <main>
element) gets the .up-loading
class:
<nav up-nav>
<a href="/foo" up-follow class="up-current" aria-current="page">Foo</a>
<a href="/bar" up-follow class="up-active">Bar</a>
</div>
<main class="up-loading">
Foo content
</main>
Once the response is received the .up-active
and .up-loading
classes are removed.
Since the new URL is /bar
, the .up-current
class has been moved to the "Bar" link.
<nav up-nav>
<a href="/foo" up-follow>Foo</a>
<a href="/bar" up-follow class="up-current" aria-current="page">Bar</a>
</nav>
<main>
Bar content
</main>
Navigation feedback is enabled per default when navigating.
When rendering without navigation, you may enable feedback by setting an
[up-feedback]
attribute or by passing a
{ feedback }
option:
up.render('.preview', { url: '/preview', feedback: true })
When watching fields you may show navigation feedback while an async callback is running.
Marks this element as a navigation component, such as a menu or navigation bar.
When a link within an [up-nav]
element points to the current location, it is assigned the .up-current
class.
While rendering with navigation feedback, the .up-active
class is added to the origin
element that triggered the change.
While rendering with navigation feedback,
targeted fragments are assigned the .up-loading
class.
While rendering with navigation feedback, the .up-active
class is added to the origin
element that triggered the change.
Links within [up-nav]
may use the [up-alias]
attribute to pass a URL pattern for which they
should also be highlighted as .up-current
.
When a link within an [up-nav]
element points to the current location, it is assigned the .up-current
class.
Sets default options for this package.
While rendering with navigation feedback,
targeted fragments are assigned the .up-loading
class.
Marks this element as a navigation component, such as a menu or navigation bar.