up.status [up-preview]

HTML selector

Links or forms can name a preview function that is called while loading content from the server.

When the user interacts with a link or form, its preview function is invoked immediately. The function will usually mutate the DOM to signal that the app is working, or to provide clues for how the page will ultimately look. For example, if the user is deleting an item from a list, the preview function could hide that item visually.

See Previews for details and examples.

Usage

To refer to a preview function, set its name as an [up-preview] attribute:

<a href="/edit" up-follow up-preview="spinner">Edit page</a> <!-- mark-phrase "spinner" -->

To call multiple previews, separate their names with a comma:

<a href="/edit" up-follow up-preview="spinner, dim-page">Edit page</a> <!-- mark-phrase "spinner, dim-page" -->

Preview options can be appended after each preview name, encoded as Relaxed JSON:

<a href="/edit"
   up-follow
   up-preview="spinner { size: 20 }, dim-page { animation: 'pulse' }"> <!-- mark-phrase "spinner { size: 20 }, dim-page { animation: 'pulse' }" -->
  Edit page
</a>