Skip to Content

PartOf

<Clover.PartOf /><clover-part-of>0.6 kB added to a page with a Root, gzipped7 kB added to a page with a <clover-root>, styles included, gzipped

The Collections the resource belongs to, as a list of links.

<Clover.Root iiifContent={url}>
  <Clover.PartOf />
</Clover.Root>
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json">
  <clover-part-of></clover-part-of>
</clover-root>

API reference

Reads partOf from the Root’s resource and renders a ul: a link to each Collection, named by its label or else its address. It renders nothing while there is none, and its other props go to the ul. A link opens the Collection’s IIIF JSON: to show the Collection itself, use Collection<clover-collection>.

PropTypeDefaultDescription
of"manifest" | "canvas""manifest"Whose partOf: the resource’s, or the Canvas the reader is on.
value{ id, label, format }[]—Collections to show instead of the Root’s, as IIIF gives them.
classNamestring—Added to clover-part-of.

<clover-part-of>

Part of: the Collections the resource belongs to, as a list of links.

NameTypeDefaultDescription
of"manifest" | "canvas"manifestWhose property: the Manifest's, or the Canvas in view's.
valuestring (a URL or JSON)—Collections, instead of the root's: as text, a URL or JSON. Outside a root, the one to show.
.valuestring | Array<{ id: string; label?: Record<string, string[]>; format?: string }> | null—As a property: Collections, instead of the root's.

Examples

Outside a Root

Give it value, the Collections as IIIF gives them, and it needs no Root<clover-root>.

<Clover.PartOf
  value={[
    {
      id: "https://api.dc.library.northwestern.edu/api/v2/collections/c373ecd2-2c45-45f2-9f9e-52dc244870bd?as=iiif",
      type: "Collection",
      label: { none: ["Commedia dell'Arte: The Masks of Antonio Fava"] },
    },
  ]}
/>
<clover-part-of
  value='[{"id":"https://api.dc.library.northwestern.edu/api/v2/collections/c373ecd2-2c45-45f2-9f9e-52dc244870bd?as=iiif","type":"Collection","label":{"none":["Commedia dell&apos;Arte: The Masks of Antonio Fava"]}}]'></clover-part-of>

Without a label

A Collection without a label is named by its address. Its address wraps, with nowhere else to break, rather than pushing the page sideways.

<Clover.PartOf
  value={[
    {
      id: "https://api.dc.library.northwestern.edu/api/v2/collections/0ba3a256-4952-44ea-b0d9-0772835ff137?as=iiif",
      type: "Collection",
    },
  ]}
/>
<clover-part-of
  value='[{"id":"https://api.dc.library.northwestern.edu/api/v2/collections/0ba3a256-4952-44ea-b0d9-0772835ff137?as=iiif","type":"Collection"}]'></clover-part-of>

Previous versions

Clover 3.x › PartOf

  • partOf is value: inside a Root<clover-root>, leave it out.
  • Always a ul: no as.
  • 3.x’s lang is the Root’s language.