Skip to Content

Collection

<Clover.Collection /><clover-collection>12 kB added to a page with a Root, gzipped31 kB added to a page with a <clover-root>, styles included, gzipped

The Collection a Manifest is in, with its members, and a menu to move between them.

<Clover.Root iiifContent={url}>
  <Clover.Body />
  <Clover.Collection />
</Clover.Root>
<clover-root
  iiif-content="https://api.dc.library.northwestern.edu/api/v2/collections/c373ecd2-2c45-45f2-9f9e-52dc244870bd?as=iiif">
  <clover-body></clover-body>
  <clover-collection></clover-collection>
</clover-root>

API reference

Collection

Inside a Root, it shows the Collection the Manifest was opened from, or else the first it is partOf, fetched as the part first shows: its label, summary and members, then its homepage and address. Choosing a member shows it. Its other props, and its ref, go to its element.

PropTypeDefaultDescription
headingLevelnumber3Its headings’ level, one below the heading it sits under.
classNamestring—Added to clover-about clover-collection.

CollectionSelect

Inside a Root, it is a menu of the Collection’s members, labeled by the Collection: choosing a Manifest shows it, and choosing a Collection enters it. By keyboard, the arrows move through the members and Enter shows one; Escape, or leaving the menu, takes the step back. It renders nothing without a Collection of two or more. Its other props, and its ref, go to its element.

PropTypeDefaultDescription
onChange(id: string) => void—A member was chosen: its id, before the Root moves.
classNamestring—Added to clover-collection-select.

<clover-collection>

The Collection the Manifest was reached through: its label, summary and members, each to open, its homepage and its address.

NameTypeDefaultDescription
heading-levelnumber3The level of its titles, one under the heading it sits beneath. Past 6, each names what it heads instead.

<clover-collection-select>

A menu of the Collection's members, choosing the Manifest shown. A key steps through it and Enter opens the one stepped to.

NameTypeDefaultDescription
clover-change{ manifestId: string }—An event. A member was chosen, before Clover opens it.

Examples

A Manifest’s Collection

Given a Manifest, it fetches the first Collection the Manifest is partOf: here, Northwestern’s bicycle catalogs, in a box that scrolls.

<Clover.Root iiifContent="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json">
  <Clover.Body />
  <Clover.Collection style={{ maxHeight: "24rem", overflowY: "auto" }} />
</Clover.Root>
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json">
  <clover-body></clover-body>
  <clover-collection
    style="max-height: 24rem; overflow-y: auto"></clover-collection>
</clover-root>

A menu of members

Use CollectionSelect<clover-collection-select> for a menu of the members, to move between them.

<Clover.Root iiifContent="https://api.dc.library.northwestern.edu/api/v2/collections/c373ecd2-2c45-45f2-9f9e-52dc244870bd?as=iiif">
  <Clover.Body />
  <Clover.CollectionSelect />
</Clover.Root>
<clover-root
  iiif-content="https://api.dc.library.northwestern.edu/api/v2/collections/c373ecd2-2c45-45f2-9f9e-52dc244870bd?as=iiif">
  <clover-body></clover-body>
  <clover-collection-select></clover-collection-select>
</clover-root>

In the Viewer

The Viewer’s Panel shows it as its Collection section, for a Manifest opened from a Collection or partOf one.

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

Previous versions

Clover 3.x › Composing

  • Collection<clover-collection> reads the Manifest’s partOf itself, and fetches it.
  • The Slider’s links to members are Items<clover-items> on its own.
  • The 3.x Viewer’s menu of Manifests is CollectionSelect<clover-collection-select>.