anura-details

Shows detailed information about an asset (metadata)

Screenshot of anura-details

While it's made to live inside of anura-lightbox, you could also put it somewhere else as a standalone component.

Attributes

parent

required: yes, live: yes, default: -

The parent component to listen to, e.g. anura-gallery. This is set automatically when used inside of an anura-lightbox.

asset

required: yes, live: yes, default: -

Asset ID of which to display metadata of. This is set automatically when used inside an anura-lightbox that has a sidebar. Changing this will cause the component to reload.

allowlist

required: no, live: on-load, default: -

Only show metadata listed in this (comma-separated) allowlist, in that order. The nature of the keys is specific to the implementation of the adapter. For convenience the key is shown in the data-id attribute of each entry. E.g. name,info_108,info_42

merge-sections

required: no, live: on-load, default: false

Adapters can provide an arbitrary number of metadata sections (e.g. "General Info" and "Information Fields"). Set merge-sections to true in order to show all of them in a single section (called "Metadata", translation-key: metadata).

Slots

  • header - content that should appear before the metadata
  • footer - content that should appear after the metadata

Parts

<div part="details-container">
  <h4 part="details-title"></h4>
  <dl part="details-dl">
    <dt part="details-dt"></dt>
    <dd part="details-dd"></dd>
    <!-- snip, repeating dt & dd-->
  </dl>
</div>