Skip to Content

Default

<Viewer template={Default} /><clover-viewer template="default">98 kB loaded by a page with the Viewer in Default to first view, styles included, gzipped126 kB loaded by a page with a <clover-viewer> in Default to first view, styles included, gzipped

The Viewer’s own layout: the title over the Body, the thumbnails under it, and the information panel beside them, as in Clover 3.x.

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

API reference

The Viewer draws Default when it is given no template. Over the Body are the title and the provider’s logo; opened on a Collection, the Collection’s title is under the Manifest’s, with a pager among its members. Under the Body, the thumbnails, headed by the titles of the current view and where it is among them. A Manifest of one view has no thumbnails unless singleItemsingle-item asks for them.

The information panel is beside all three, the layout’s full height, and a bar between shares the width: drag it, or use the arrow keys on it. Where there is no room for both, on a phone, the panel slides over the Body instead, and a press beside it, Escape or its close button puts it away. Size the Body with --clover-body-height.

PropTypeDefaultDescription
headerbooleantrueThe title and provider over the Body; opened on a Collection, the Collection’s title over the Manifest’s and a pager among its members; for a content state’s several targets, a pager among them.
headingLevelnumber2The title’s level; the panel’s sections are a level below.
panelbooleantrueThe information panel and its toggle.
downloadbooleantrueThe downloads in the panel’s About, 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.
defaultPanelOpenbooleantrueWhether the panel starts open beside the Body; 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.
items"slider" | "list" | "grid" | false"slider"The thumbnails under the Body, or none.
singleItembooleanfalseThe thumbnails even where the resource has one view.
storageKeystring | false"clover-template-default"Where the panel’s width is remembered; false forgets it.
fillbooleanfalseFill the box it sits in; the Body takes what the rest leave.
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

Use items to lay the thumbnails under the Body out as a slider, a list or a grid, or false to leave them out.

items
<Viewer iiifContent={url} items="slider" />
<clover-viewer
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json"
  items="slider"></clover-viewer>
<Viewer iiifContent={url} items="list" />
<clover-viewer
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json"
  items="list"></clover-viewer>
<Viewer iiifContent={url} items="grid" />
<clover-viewer
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json"
  items="grid"></clover-viewer>
<Viewer iiifContent={url} items={false} />
<clover-viewer
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json"
  items="false"></clover-viewer>

One view

Use singleItemsingle-item to show the thumbnails even where the resource has one view, which has nothing to choose between.

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

Header and panel

Use header={false}header="false" to leave out the title over the Body, and panel={false}panel="false" to leave out the information panel and its toggle. defaultPanelOpenpanel-open starts the panel open or closed beside the Body. On a phone, where it would cover the Body, it starts closed whatever you pass, and its toggle opens it.

<Viewer
  iiifContent="https://api.dc.library.northwestern.edu/api/v2/works/d8fb6329-f7fb-48bf-8bb7-70a64ded5a15?as=iiif"
  header={false}
  panel={false}
/>
<clover-viewer
  iiif-content="https://api.dc.library.northwestern.edu/api/v2/works/d8fb6329-f7fb-48bf-8bb7-70a64ded5a15?as=iiif"
  header="false"
  panel="false"></clover-viewer>

Fill

Use fill to have the Viewer fill a box of a set height, the window under a page’s own header, say. The Body takes what the title and the thumbnails leave, never less than 16rem; a shorter box scrolls.

<div style={{ height: "34rem" }}>
  <Viewer
    iiifContent="https://api.dc.library.northwestern.edu/api/v2/works/0e66d6d8-5dc5-4686-b056-d18682c79ebf?as=iiif"
    fill
  />
</div>
<div style="height: 34rem">
  <clover-viewer
    iiif-content="https://api.dc.library.northwestern.edu/api/v2/works/0e66d6d8-5dc5-4686-b056-d18682c79ebf?as=iiif"
    fill></clover-viewer>
</div>