Items

<Clover.Items /><clover-items>10 kB added to a page with a Root, gzipped27 kB added to a page with a <clover-root>, styles included, gzipped

A sequence and where the reader is in it: thumbnails in a slider, a list or a grid, or one item at a time.

<Clover.Root iiifContent={url}>
  <Clover.Body />
  <Clover.Items
    layout=
    style={{ "--clover-items-height": "rem" }}
  />
</Clover.Root>

<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json">
  <clover-body></clover-body>
  <clover-items
    layout=
    style="--clover-items-height: rem">
  </clover-items>
</clover-root>

API reference

Inside a Root<clover-root>, it lists the resource’s views (a spread is one item), and selecting one goes there: a listbox whose selection follows focus and the arrow keys. On its own, it lists a Collection’s members as links.

Prop	Type	Default	Description
`layout`	`"slider" \| "list" \| "grid" \| "pager"`	`"slider"`	Thumbnails in a row, a column or a grid, or one at a time.
`of`	`"views" \| "members"`	`"views"`	In a `Root`: its views, or its Collection’s members.
`iiifContent`	`string \| object`	—	On its own: a Collection (its members) or a Manifest.
`items`	`object[]`	—	On its own: IIIF resources to list as they are.
`navigation`	`"id" \| "homepage"`	`"id"`; `"homepage"` on its own	Select a view, or link to each item’s `homepage`.
`onSelect`	`(item, event) => void`	—	An item was chosen; on a link, `preventDefault()` stays put.
`header`	`boolean`	`true`	On its own: the resource’s label, summary and homepage link.
`headingLevel`	`number`	`2`	On its own: the header’s title level.
`thumbnailSize`	`number`	`200`	Pixels asked for each thumbnail’s longer side.
`renderItem`	`(item, { selected }) => ReactNode`	—	Your own item in place of the figure.
`request`	`{ credentials, headers, fetch }`	The Root’s	On its own: for every request.
`language`	`string`	The reader’s	On its own: the language to read IIIF text in.

`<clover-items>`

Thumbnails, as Items draws them. Inside a clover-root, its views (or its Collection's members), choosing what it shows; alone, the members or views of what it is given, as links.

Name	Type	Default	Description
`layout`	`"slider" \| "list" \| "grid" \| "pager"`	`slider`	A scrolling row, a column, a wrapping grid, or a pager: Previous, the position and Next, with no thumbnails.
`of`	`"views" \| "members"`	`views`	Inside a root: its views, or the members of the Collection it belongs to.
`navigation`	`"id" \| "homepage"`	—	id chooses what the root shows; homepage links to each item's homepage. By default, id for views and homepage for members or a list.
`iiif-content`	`string`	—	Alone: a Collection (its members) or a Manifest (its views), by URL.
`header`	`boolean`	`true`	Alone: the resource's label, summary and homepage over the items. "false" leaves them out.
`heading-level`	`number`	`2`	Alone: the header's title's level, 2 or more, to fit the page's outline.
`thumbnail-size`	`number`	`200`	Pixels to ask for each thumbnail's longer side.
`language`	`string`	—	Alone: the language to read IIIF text in.
`.iiifContent`	`string \| Record<string, unknown> \| null`	—	As a property: Alone: what to list, as a URL or a IIIF resource.
`.items`	`unknown[] \| null`	—	Alone: a list of IIIF resources to show, as they are.
`.request`	`{ credentials?: RequestCredentials; headers?: Record<string, string>; fetch?: typeof fetch } \| null`	—	Alone: credentials, headers and a fetch of your own. In a root, the root's are used.
`.renderItem`	`((item: { id: string; label?: string \| Record<string, string[]>; summary?: string \| Record<string, string[]>; href?: string }, state: { selected: boolean }) => Node \| string \| null \| undefined) \| null`	—	Your own figure for an item, in place of its thumbnail and label: a node or text, which names the item. A new node each time.
`clover-select`	`{ item: { id: string; label?: string \| Record<string, string[]>; summary?: string \| Record<string, string[]>; href?: string } }`	—	An event. An item was chosen. Cancel it (preventDefault) to keep a link from being followed.

Examples

Grid

Use layout="grid" for thumbnails that wrap into rows.


<Clover.Items layout="grid" />


<clover-items layout="grid"></clover-items>

List

Use layout="list" for a column, each item’s title beside its picture.


<Clover.Items layout="list" />


<clover-items layout="list"></clover-items>

One at a time

Use layout="pager" for the count with Previous and Next, and no thumbnails. It steps a spread at a time through a paged book.


<Clover.Items layout="pager" />


<clover-items layout="pager"></clover-items>

Size

Size the thumbnails with CSS: --clover-items-height for a slider’s pictures (default 8rem), --clover-items-size for a grid’s columns (10rem), --clover-items-gap between them (1rem).


<Clover.Items style={{ "--clover-items-height": "5rem" }} />


<clover-items style="--clover-items-height: 5rem"></clover-items>

A Collection

Give it a Collection on its own, and it lists the members as links to each one’s homepage, under the Collection’s label and summary.


<Clover.Items iiifContent="https://api.dc.library.northwestern.edu/api/v2/collections/c373ecd2-2c45-45f2-9f9e-52dc244870bd?as=iiif" />


<clover-items
  iiif-content="https://api.dc.library.northwestern.edu/api/v2/collections/c373ecd2-2c45-45f2-9f9e-52dc244870bd?as=iiif"></clover-items>

Previous versions

Clover 3.x › Slider

Items<clover-items> replaces both the Slider and the Viewer’s thumbnail strip.
Sizes and breakpoints are CSS: --clover-items-height, --clover-items-gap.
onItemInteraction is onSelectclover-select.