Skip to Content

Document

<Viewer template={Document} /><clover-viewer template="document">95 kB loaded by a page with the Viewer in Document to first view, styles included, gzipped133 kB loaded by a page with a <clover-viewer> in Document to first view, styles included, gzipped

Reads as a PDF does: a toolbar, page thumbnails down the left, the pages down one column, and the information panel on the right.

import Viewer from "@nulib/clover";
import { Document } from "@nulib/clover/templates";
import "@nulib/clover/styles.css";
import "@nulib/clover/templates.css";
 
<Viewer
  iiifContent="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json"
  template={}
  defaultSidebarOpen={}
  defaultPanelOpen={}
  panelLayout=
/>;
<script type="module">
  import "@nulib/clover/web-components";
</script>
 
<clover-viewer
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json"
  template=
  sidebar-open=""
  panel-open=""
  panel-layout=>
</clover-viewer>

API reference

The toolbar holds the title, Download’s links where there is a rendering, and the provider’s logo. The pages run down one column, a spread to a sheet, the top of the next always showing: scrolling moves through them as a PDF reader’s continuous view does, and PageUp and PageDown go a sheet at a time. A resource of one page has no thumbnails unless singleItemsingle-item asks for them.

The thumbnails’ toggle sits on the bar between them and the pages; drag the bar, or use the arrow keys on it, to widen or narrow them. The information panel sits to the right of the pages, with its own bar, where there is room for both, and slides out over them where there is not. On a phone the thumbnails float over the page too, and choosing one puts them away. Size it with --clover-template-document-height.

PropTypeDefaultDescription
defaultSidebarOpenbooleantrueWhether the page thumbnails start shown; over the page, not.
singleItembooleanfalseThe page thumbnails and their toggle even where the resource has one page.
defaultPanelOpenbooleanfalseWhether the panel starts open beside the page; over it, closed.
panelLayout"accordion" | "tabs""accordion"The panel’s sections as stacked boxes, or as tabs.
panelSectionsPanelSection[]AllWhich of the panel’s sections it may have; each still shows only where the resource has data for it, and no panel at all where it has none of them.
panelLabelsPanelSectionLabels—What a panel section says, in place of Clover’s own word for it: text, or text by language tag.
downloadbooleantrueDownload’s links in the toolbar, where there is a rendering.
languagesbooleantrueThe languages to read the resource in, beside the panel’s About heading, where it comes in several; false leaves the choice out.
headingLevelnumber2The title’s level; the panel’s sections are a level below.
storageKeystring | false"clover-template-document"Where the thumbnails’ width is remembered; false forgets it.
collapseControls"auto" | "always""auto"When the Body’s view controls (zoom, rotation, reset, full screen) collapse behind one button: only where its row cannot hold them all, or always, leaving the media more room.

<clover-viewer>

Clover's Viewer, in one of its templates: Default (the title over the Body, the thumbnails under it, the information panel beside them), Document (a PDF reader's pages, thumbnails beside them) or Gallery (a grid, each item opening in a lightbox). Each template loads when used, its styles with it.

NameTypeDefaultDescription
template"default" | "document" | "gallery"defaultThe layout: default, document or gallery. Default's comes with the element; another loads the first time one is shown.
iiif-contentstring—What to show: a URL, or a content state.
canvas-idstring—The Canvas to open on.
manifest-idstring—In a Collection, the Manifest to open first. The others stay reachable from it.
languagestring—The language to read IIIF text in.
high-contrastbooleanfalseClover's higher-contrast mode, for what is inside: the accent kept to rings, outlines and marks, never under words or a glyph, where the controls' dark fill takes its place, edged in the accent. On wherever the system asks for more contrast, too.
search-querystring—A Content Search to run as the Manifest opens.
annotationsstring (a URL or JSON)—Annotations to show beside the Manifest's own: a URL, or JSON (a list of URLs, or an AnnotationPage).
heading-levelnumber2The title's level, 2 or more, to fit the page's outline. The panel's sections are a level below.
items"slider" | "list" | "grid" | "masonry" | "false"sliderDefault and Gallery: Default's thumbnails, as a slider, list or grid, or "false" for none; Gallery's grid, as grid (its default) or masonry.
single-itembooleanfalseDefault and Document: the thumbnails even where the resource has one view, which has nothing to choose between. Gallery's grid always shows them.
headerbooleantrueDefault: "false" leaves out the title and provider over the Body.
panelbooleantrueDefault and Gallery: "false" leaves out the information panel, Default's beside its Body, the Gallery's beside its lightbox's view.
downloadbooleantrueDefault, Document and Gallery: "false" leaves out the downloads: Default's and the Gallery's from a Download button beside its panel's About heading, Document's in its toolbar (its panel's About offers none).
languagesbooleantrueDefault, Document and Gallery: where what the resource says of itself comes in several languages, the panel's About heading offers them, and the whole Viewer reads in the one chosen. "false" leaves the choice out.
panel-openboolean—Default, Document and Gallery: whether the information panel starts open beside the page (the Gallery's, beside its lightbox's view). Default's and the Gallery's do, by default; Document's starts shut. Where it would slide over the page (a phone), it starts shut.
panel-layout"accordion" | "tabs"accordionDefault, Document and Gallery: the panel's sections as stacked boxes, each opened by its heading, or as tabs.
panel-sectionsstring (a URL or JSON)every sectionDefault, Document and Gallery: which of the panel's sections it may have, as a JSON array: ["contents","search","transcript","annotations"] leaves out About and the rest. Each still shows only where the resource has data for it, and there is no panel where none of them does.
panel-labelsstring (a URL or JSON)—Default, Document and Gallery: what a panel section's tab or heading says, in place of Clover's own word for it, as JSON by the section's value: {"annotations": "Chapters"}, or a word by language tag to say it in several (clover-panel's labels).
sidebar-openboolean—Document: whether the page thumbnails start shown beside the page, as they do by default. Where they would float over the page (a phone), they start put away.
storage-keystring—Default, Document and Gallery: where the width chosen for a pane is remembered (localStorage); "false" forgets it.
fillbooleanfalseDefault: as tall as the box it is in, the Body taking what the header and the thumbnails leave.
collapse-controls"auto" | "always"autoDefault, Document and Gallery: when the Body's view controls (zoom, the turns, reset, full screen) collapse behind one button, the Gallery's in its lightbox: auto, only where the row cannot hold them all; always, wherever there are any, leaving the media more room.
sizestring10remGallery: the size of a cell in the grid.
heightstringautoGallery: its height, auto (growing with its grid) or a CSS length, the grid scrolling under the header.
gapstring—Gallery: the space between the grid's cells, a CSS length. Its inset unless set.
secondary"summary" | "navDate" | "none"summaryGallery: the line under each cell's label, where it has one: summary, navDate or none.
summarybooleantrueGallery: the resource's summary under the title, cut to two lines with Read more under it where it runs longer; "false" leaves it out.
lightbox-items"slider" | "pager"sliderGallery: how its lightbox moves on from the view it shows: a short strip of thumbnails (slider), or a pager, Previous, the position and Next.
.iiifContentstring | Record<string, unknown> | null—As a property: What to show, as the attribute takes it, or a IIIF resource as an object.
.annotationsstring | Record<string, unknown> | Array<string | Record<string, unknown>> | null—As a property: Annotations to show beside the Manifest's own, as URLs or objects.
.request{ credentials?: RequestCredentials; headers?: Record<string, string>; fetch?: typeof fetch } | null—Credentials, headers and a fetch of your own, for every request.
.renderersCloverRenderer[] | null—Renderers of yours, for its Body: each claims views (canvasId, format or match) and draws one into a box of its own (render), returning what undoes it.
clover-canvas-change{ canvasId: string }—An event. The current Canvas changed.
clover-manifest-change{ manifestId: string }—An event. In a Collection, another Manifest opened.
clover-status-change{ status: "loading" | "ready" | "error"; error: Error | null }—An event. What it was given is loading, has loaded, or failed to.
clover-content-state-change{ json: Record<string, unknown>; encoded: string }—An event. The current view, as a IIIF content state, as it changes: at most every 100ms while it moves, and always its last place.

Examples

Thumbnails put away

Use defaultSidebarOpen={false}sidebar-open="false" to start with the page thumbnails put away, their toggle over the page’s top left.

<Viewer iiifContent={url} template={Document} defaultSidebarOpen={false} />
<clover-viewer
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json"
  template="document"
  sidebar-open="false"></clover-viewer>

Panel open

Use defaultPanelOpenpanel-open to start with the information panel open beside the pages. On a phone, where it would cover them, it starts closed whatever you pass.

<Viewer iiifContent={url} template={Document} defaultPanelOpen />
<clover-viewer
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json"
  template="document"
  panel-open></clover-viewer>

One page

Use singleItemsingle-item to show the page thumbnails, and their toggle, even where the resource has one page.

<Viewer iiifContent={url} template={Document} singleItem />
<clover-viewer
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/navplace/manifest.json"
  template="document"
  single-item></clover-viewer>