Examples

Assembly

A fully assembled demo page, featuring a tree and a gallery (with something configured in every slot)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Anura Webcomponents Example</title>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="module" src="adapters/some-adapter.js"></script>
    <script type="module" src="components/anura-tree.js"></script>
    <script type="module" src="components/anura-gallery.js"></script>
    <script type="module" src="components/anura-lightbox.js"></script>
    <script type="module" src="components/anura-counter.js"></script>
</head>
<body>

<some-adapter url="https://my.server.io/api" locale="de"></some-adapter>

<div style="display: flex">
    <aside aria-label="Navigation">
        <anura-tree adapter="some-adapter" show-root="true" depth="1" root="1737" selected="1738" icon="archive" aria-live="polite"></anura-tree>
    </aside>
    <main aria-label="Gallery">
        <anura-counter parent="anura-gallery"></anura-counter>
        <anura-gallery adapter="some-adapter" source="anura-tree" page-size="32" aria-live="polite">
            <anura-asset slot="asset" buttons="download,checkbox,info" quick-download="1"></anura-asset>
            <anura-paginator slot="paginator" mode="auto" detect-scroll="false"></anura-paginator>
            <anura-lightbox slot="lightbox" buttons="fullscreen,sidebar,close">
                <anura-details slot="sidebar" allowlist="id,name,info_102,info_103"></anura-details>
            </anura-lightbox>
        </anura-gallery>
    </main>
</div>
</body>
</html>