anura-details

Shows detailed information about an asset (metadata)

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).

folded

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

A comma-separated list of detail sections that should be folded by default. You can get the ID of the section from its data-id attribute. E.g. technical_information,meta_data.

Note that sections that have been folded manually by the user will also be persisted in this property, but only in the current session.

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">
    <anura-icon part="details-title-icon"></anura-icon>  
  </h4>
  <dl part="details-dl">
    <dt part="details-dt"></dt>
    <dd part="details-dd">
      <a part="details-link"></a>
    </dd>
    <!-- snip, repeating dt & dd-->
  </dl>
  <!-- snip, repeating h4 & dt-->
</div>