Skip to Content

Root

Loads a IIIF resource and holds its current view. Every other part goes inside a Root and reads from it.

<Clover.Root iiifContent={url}>
  <Clover.Label as="h3" />
  <Clover.Body />
  <Clover.Items />
</Clover.Root>
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json">
  <clover-label as="h3"></clover-label>
  <clover-body></clover-body>
  <clover-items></clover-items>
</clover-root>

API reference

Give it iiifContentiiif-content: a Manifest, a Collection, a Canvas or a content state, as a URL or an object, in Presentation 2, 3 or 4. The parts inside it show that resource and move through it together: choose a thumbnail in Items<clover-items>, and the Body<clover-body>, the Label<clover-label> of the Canvas and the Panel<clover-panel> follow. It renders a div of your own layout, and announces each move to assistive technology.

Its most used props are iiifContentiiif-content, canvasIdcanvas-id with onCanvasChangeclover-canvas-change (the current Canvas, controlled), language, request.request and highContrasthigh-contrast. Every prop is in Composing layouts, with how to lay its parts out. The Viewer and its templates are each a Root and its parts, and take the same props.

A Root inside a Root

A Root can hold another, as a context of its own. Each part reads its nearest parent Root, as a web component’s element reads its nearest parent clover-root: the inner Root loads its own resource and keeps its own place in it, and announces its own moves. Nothing passes between them. Choosing a thumbnail in the inner Root’s Items<clover-items> moves the inner Root alone, and its request.request and language are its own. Use it to show a second resource in the same layout: a related Manifest, say, beside the one the page is about.

Two things are the page’s, not either Root’s. The page’s language is read once, at the outer Root. And the higher-contrast mode of the outer Root holds for everything inside it, the inner Root too. Full screen takes the Root its control is in, the inner one for the inner Root’s parts.

<Clover.Root iiifContent={url}>
  <Clover.Label as="h3" />
  <Clover.Body />
  <aside>
    <Clover.Root iiifContent={related}>
      <Clover.Label as="h4" />
      <Clover.Items />
    </Clover.Root>
  </aside>
</Clover.Root>
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json"
>
  <clover-label as="h3"></clover-label>
  <clover-body></clover-body>
  <aside>
    <clover-root iiif-content="https://example.org/related/manifest.json">
      <clover-label as="h4"></clover-label>
      <clover-items></clover-items>
    </clover-root>
  </aside>
</clover-root>

Next