Panel

<Clover.Root iiifContent={url}>
  <Clover.Body />
  <div style={{ height: "24rem", overflowY: "auto" }}>
    <Clover.Panel layout="tabs""accordion" defaultValue="about""contents""annotations" />
  </div>
</Clover.Root>

<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json">
  <clover-body></clover-body>
  <div style="height: 24rem; overflow-y: auto">
    <clover-panel layout="tabs""accordion" value="about""contents""annotations"></clover-panel>
  </div>
</clover-root>

API reference

Inside a Root<clover-root>, it shows About and each section the resource has data for, or Tab<clover-tab>s of your own: one always open, each loaded the first time it opens. Its tabs and accordion follow WAI-ARIA’s patterns. It is as tall as its sections; to scroll it, give the element around it a height and overflow-y: auto, as the templates do. Its other props, and its ref, go to its element.

Examples

Sections

With no Tab<clover-tab>s, it shows About, then each section the resource has data for: Collection, Contents, Search, Map, Transcript and Annotations. This newspaper has a Content Search service, and its OCR as annotations, which a search finds in.

<Clover.Root iiifContent="https://clover.iiif.library.northwestern.edu/mocks/content-search/manifest.json">
  <Clover.Body />
  <div style={{ height: "24rem", overflowY: "auto" }}>
    <Clover.Panel />
  </div>
</Clover.Root>

<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/content-search/manifest.json">
  <clover-body></clover-body>
  <div style="height: 24rem; overflow-y: auto">
    <clover-panel></clover-panel>
  </div>
</clover-root>

Tabs or accordion

Use layout="accordion" to stack the sections, each opened by its heading, as the templates do. In a box that scrolls, the headings stay in sight, at its top and its foot.

<Clover.Panel layout="accordion" />

<clover-panel layout="accordion"></clover-panel>

The open section

Use defaultValue to choose the section open first, or value and onValueChangeclover-value-change to control it. The default sections are about, collection, contents, search, map, transcript and annotations. A search started outside the Search section (the Root’s searchQuerysearch-query, or your own clover.search()) opens it, ahead of defaultValue, so its hits come with their list. Focus stays where it is, and a Panel that is shut stays shut until the reader opens it, on Search. A value you control is left as you set it. This film opens on its chapters.

<Clover.Panel defaultValue="contents" />

<clover-panel value="contents"></clover-panel>

Languages

Where what a resource says of itself comes in several languages, About’s heading offers them, shown whichever section is open, and every part in the Root reads IIIF text in the one chosen, a title over it as About. It starts in the Root’s language, which a page sets to read in its own, here French, else in the reader’s. A reader’s choice lasts until the page gives the Root another language. This painting is described in English and French.

<Clover.Root
  iiifContent="https://iiif.io/api/cookbook/recipe/0006-text-language/manifest.json"
  language="fr"
>
  <Clover.Body />
  <Clover.Panel layout="accordion" />
</Clover.Root>

<clover-root
  iiif-content="https://iiif.io/api/cookbook/recipe/0006-text-language/manifest.json"
  language="fr">
  <clover-body></clover-body>
  <clover-panel layout="accordion"></clover-panel>
</clover-root>

Sections of your own

Give it Tab<clover-tab>s, and they are its sections, in their order. Each holds Clover’s parts or a component of your own that reads the Root through hooks. Give the parts in them the heading level the panel would: its own in tabs, one below it in an accordion.

function PageNotes({ notes }) {
  const canvas = Clover.useActiveCanvas();
  return <p>{notes[canvas?.id] ?? "No notes for this page."}</p>;
}
 
<Clover.Panel>
  <Clover.Tab value="about" label="About">
    <Clover.About />
  </Clover.Tab>
  <Clover.Tab value="notes" label="Notes">
    <PageNotes notes={notes} />
  </Clover.Tab>
</Clover.Panel>;

<clover-panel>
  <clover-tab value="about" label="About">
    <clover-about></clover-about>
  </clover-tab>
  <clover-tab value="notes" label="Notes">
    <p id="page-notes"></p>
  </clover-tab>
</clover-panel>
 
<script type="module">
  const root = document.querySelector("clover-root");
  const shown = document.getElementById("page-notes");
  const show = () => {
    const canvas = root.clover.activeCanvas();
    shown.textContent = notes[canvas?.id] ?? "No notes for this page.";
  };
  const start = () => {
    show();
    root.clover.subscribe(show);
  };
  if (root.clover) start();
  else root.addEventListener("clover-ready", start, { once: true });
</script>

Showing and hiding it

PanelToggle<clover-panel-toggle> shows and hides it: name the panel in its controls, and hide the panel with hidden. A panel floating over the page also takes onCloseclover-close, for a close button, and closeOnEscapeclose-on-escape; move focus into it as it opens.

function Layout({ url }) {
  const [open, setOpen] = React.useState(true);
  return (
    <Clover.Root iiifContent={url}>
      <Clover.Body>
        <Clover.PanelToggle
          open={open}
          onOpenChange={setOpen}
          controls="panel"
        />
      </Clover.Body>
      <Clover.Panel id="panel" hidden={!open} />
    </Clover.Root>
  );
}

<!-- The toggle follows the panel's own hidden: write hidden on it to start it shut. -->
<clover-root
  iiif-content="https://iiif.io/api/cookbook/recipe/0009-book-1/manifest.json"
>
  <clover-body>
    <clover-panel-toggle controls="panel"></clover-panel-toggle>
  </clover-body>
  <clover-panel id="panel"></clover-panel>
</clover-root>

Previous versions

Clover 3.x › Viewer › Information Panel

• options.informationPanel becomes Default’s panel props, and Tab<clover-tab>s.
• A plugin’s panel is a Tab<clover-tab> of your own.
• defaultTab is defaultValue.