--- title: "Default" description: "The Viewer's Default template, drawn when it is given no other: the title over the Body, the thumbnails under it, and the information panel beside them." url: https://clover.iiif.library.northwestern.edu/docs/viewer/default version: "4" --- # Default \ (web components: \)98 kB loaded by a page with the Viewer in Default to first view, styles included, gzipped (web components: 126 kB loaded by a page with a \ 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. > **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows. **React** ```jsx import Viewer from "@nulib/clover"; import { Default } from "@nulib/clover/templates"; import "@nulib/clover/styles.css"; ; ``` **Web components** ```html ``` ## 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 `singleItem` (web components: `single-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`. **React** | Prop | Type | Default | Description | | ------------------ | --------------------------------------- | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `header` | `boolean` | `true` | The 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. | | `headingLevel` | `number` | `2` | The title’s level; the panel’s sections are a level below. | | `panel` | `boolean` | `true` | The information panel and its toggle. | | `download` | `boolean` | `true` | The downloads in the panel’s About, where there is a `rendering`. | | `languages` | `boolean` | `true` | The languages to read the resource in, beside the panel’s About heading, where it comes in several; `false` leaves the choice out. | | `defaultPanelOpen` | `boolean` | `true` | Whether the panel starts open beside the Body; over it, closed. | | `panelLayout` | `"accordion" \| "tabs"` | `"accordion"` | The panel’s sections as stacked boxes, or as tabs. | | `panelSections` | `PanelSection[]` | All | Which 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. | | `panelLabels` | `PanelSectionLabels` | — | 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. | | `singleItem` | `boolean` | `false` | The thumbnails even where the resource has one view. | | `storageKey` | `string \| false` | `"clover-template-default"` | Where the panel’s width is remembered; `false` forgets it. | | `fill` | `boolean` | `false` | Fill 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. | **Web components** ### `` 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. | Name | Type | Default | Description | | ----------------------------- | ------------------------------------------------------------------------------------------------------ | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `template` | `"default"` \| `"document"` \| `"gallery"` | `default` | The layout: default, document or gallery. Default's comes with the element; another loads the first time one is shown. | | `iiif-content` | `string` | — | What to show: a URL, or a content state. | | `canvas-id` | `string` | — | The Canvas to open on. | | `manifest-id` | `string` | — | In a Collection, the Manifest to open first. The others stay reachable from it. | | `language` | `string` | — | The language to read IIIF text in. | | `high-contrast` | `boolean` | `false` | Clover'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-query` | `string` | — | A Content Search to run as the Manifest opens. | | `annotations` | `string (a URL or JSON)` | — | Annotations to show beside the Manifest's own: a URL, or JSON (a list of URLs, or an AnnotationPage). | | `heading-level` | `number` | `2` | The 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"` | `slider` | Default 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-item` | `boolean` | `false` | Default and Document: the thumbnails even where the resource has one view, which has nothing to choose between. Gallery's grid always shows them. | | `header` | `boolean` | `true` | Default: "false" leaves out the title and provider over the Body. | | `panel` | `boolean` | `true` | Default and Gallery: "false" leaves out the information panel, Default's beside its Body, the Gallery's beside its lightbox's view. | | `download` | `boolean` | `true` | Default, 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). | | `languages` | `boolean` | `true` | Default, 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-open` | `boolean` | — | 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"` | `accordion` | Default, Document and Gallery: the panel's sections as stacked boxes, each opened by its heading, or as tabs. | | `panel-sections` | `string (a URL or JSON)` | `every section` | Default, 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-labels` | `string (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-open` | `boolean` | — | 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-key` | `string` | — | Default, Document and Gallery: where the width chosen for a pane is remembered (localStorage); "false" forgets it. | | `fill` | `boolean` | `false` | Default: as tall as the box it is in, the Body taking what the header and the thumbnails leave. | | `collapse-controls` | `"auto"` \| `"always"` | `auto` | Default, 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. | | `size` | `string` | `10rem` | Gallery: the size of a cell in the grid. | | `height` | `string` | `auto` | Gallery: its height, auto (growing with its grid) or a CSS length, the grid scrolling under the header. | | `gap` | `string` | — | Gallery: the space between the grid's cells, a CSS length. Its inset unless set. | | `secondary` | `"summary"` \| `"navDate"` \| `"none"` | `summary` | Gallery: the line under each cell's label, where it has one: summary, navDate or none. | | `summary` | `boolean` | `true` | Gallery: 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"` | `slider` | Gallery: how its lightbox moves on from the view it shows: a short strip of thumbnails (slider), or a pager, Previous, the position and Next. | | `.iiifContent` | `string \| Record \| null` | — | As a property: What to show, as the attribute takes it, or a IIIF resource as an object. | | `.annotations` | `string \| Record \| Array> \| null` | — | As a property: Annotations to show beside the Manifest's own, as URLs or objects. | | `.request` | `{ credentials?: RequestCredentials; headers?: Record; fetch?: typeof fetch } \| null` | — | Credentials, headers and a fetch of your own, for every request. | | `.renderers` | `CloverRenderer[] \| 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; 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 \[x]slider\[ ]list\[ ]grid\[ ]false > **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows. **React** ```jsx ``` **Web components** ```html ``` **React** ```jsx ``` **Web components** ```html ``` **React** ```jsx ``` **Web components** ```html ``` **React** ```jsx ``` **Web components** ```html ``` ### One view Use `singleItem` (web components: `single-item`) to show the thumbnails even where the resource has one view, which has nothing to choose between. > **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows. **React** ```jsx ``` **Web components** ```html ``` ### Header and panel Use `header={false}` (web components: `header="false"`) to leave out the title over the Body, and `panel={false}` (web components: `panel="false"`) to leave out the information panel and its toggle. `defaultPanelOpen` (web components: `panel-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. > **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows. **React** ```jsx ``` **Web components** ```html ``` ### 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. > **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows. **React** ```jsx
``` **Web components** ```html
```