`up.Preview`

JavaScript class

Instances of up.Preview can describe temporary changes to a page.

You can use this to describe arbitrary loading state or implement optimistic rendering.

Previews are usually defined using up.preview() (lowercase) and then applied using the [up-preview] attribute or { preview } option. See Previews for an overview.

Features

up.Preview.prototype.addClass([element], className) JS

Temporarily adds a CSS class to an element.
up.Preview.prototype.disable([element]) JS

Temporarily disables fields and buttons.
up.Preview.prototype.ended JS

Whether this preview has ended.
up.Preview.prototype.expiredResponse JS experimental

When revalidating a cache entry, this property is the cached response with expired content.
up.Preview.prototype.fragment JS

The targeted Element that is being previewed.
up.Preview.prototype.hide([element]) JS

Temporarily hides an element.
up.Preview.prototype.hideContent([element]) JS experimental

Temporarily hides the children of an element.
up.Preview.prototype.insert([reference], [position], newElement) JS

Temporarily inserts an element.
up.Preview.prototype.layer JS

The layer that the previewed render pass is going to update.
up.Preview.prototype.openLayer() JS experimental

Opens a temporary overlay.
up.Preview.prototype.origin JS

The origin element that triggered this render pass.
up.Preview.prototype.params JS

Form data for the request being previewed.
up.Preview.prototype.removeClass([element], className) JS

Temporarily removes a CSS class from an element.
up.Preview.prototype.renderOptions JS

The render options for this render pass.
up.Preview.prototype.request JS

The request that is loading.
up.Preview.prototype.revalidating JS experimental

Whether the previewed render pass is a revalidation of an expired cache entry.
up.Preview.prototype.run(nameOrFn, options) JS experimental

Runs another preview function.
up.Preview.prototype.setAttrs([element], attributes) JS

Temporarily changes an element's attributes.
up.Preview.prototype.setStyle([element], styles) JS

Temporarily sets inline CSS styles on an element.
up.Preview.prototype.show([element]) JS

Temporarily shows a hidden element.
up.Preview.prototype.showPlaceholder([element], newContent) JS experimental

Shows a temporary placeholder within an element.
up.Preview.prototype.swapContent([element], newContent) JS experimental

Visually replaces the children of an element with new content for the duration of this preview.
up.Preview.prototype.undo(undoFn) JS

Register a function that will revert this preview's effects when the preview ends.