Components

For the most up-to-date documentation, please visit docs.brix.ch

anura-tree

<anura-tree adapter="some-adapter" root="1337" icon="tag" aria-live="polite"></anura-tree>

Basic navigation tree, featuring automatic (based on selection) and manual folding of sub-trees.

Screenshot of <anura-tree>

Attributes

root

required: yes, live: yes, default: -

The root node of your navigation (ID or String).

icon

required: no, live: yes, default: folder

The icon that each node in the tree should display (see anura-icon)

selected

required: no, live: read-only, default: -

Which node in the tree should be selected initially. Subsequent selections by the user are reflected in this attribute, but are read-only after the initial load. Note that the state parameter (tree)node will override the initial selection.

depth

required: no, live: no, default: -

To what depth the tree should load subnodes.

deselectable

required: no, live: no, default: -

Whether to allow a user to deselect a previously selected node. Otherwise the user can only change the selection.

show-count

required: no, live: no, default: -

Whether to show a count of how many items are in this node (provided your adapter supports this)

Events

node-clicked

{detail: {id: node.id, name: node.name}}

Fired whenever the user has clicked on a node, regardless whether a selection or a deselection has occurred.

node-selected

{detail: {id: node.id, name: node.name}}

Fired whenever the user has selected a node. This will also update the selected attribute of the component.

node-deselected

{detail: {id: node.id, name: node.name}}

Fired whenever the user has deselected a node. This will also remove selected attribute from the component.

Slots

  • header - the header slot will appear before the title and tree content.

  • title - appears before the tree content. When show-root is disabled, this slot will automatically be set to the root nodes name, unless you overwrite this slot yourself.
    <anura-tree adapter="some-adapter" root="1337" icon="tag" aria-live="polite">
    <h3 slot="title">My custom title</h3>
    </anura-tree>
  • footer - he footer slot will appear at the very end, after the tree content.

Parts

<ul part="tree-root">
    <li part="node-li">
        <a part="node-link">
            <anura-icon part="node-icon"></anura-icon>
            <span part="node-name">Wheel</span>
            <span part="node-counter">42</span>
        </a>
        <ul part="node-ul"><!-- snip, repeats inside --></ul>
    </li>
    <li><!-- snip, etc. --></li>
</ul>

E.g. color all the icons in the tree:

anura-tree::part(node-icon) { color: green; }
<anura-gallery adapter="some-adapter" source="anura-tree" aria-live="polite"></anura-gallery>

The gallery component will show assets in a grid (using flex).

Screenshot of <anura-gallery>

By default, the gallery consists of a number of <anura-asset>s and an <anura-paginator> at the bottom.

Attributes

node

required: when no source or search is provided, live: yes, default: -

The content of which node that the gallery should display. This will cause the gallery to ask its adapter for the content of said node.

recursive

required: no, live: yes, default: -

When displaying a node, whether the content should also include everything that is contained in subnodes beneath this node.

required: when no source or node is provided, live: yes, default: -

NEEDS IMPLEMENTATION. The search query that the gallery should perform and display. This will cause the gallery to query its adapter for content.

source

required: when no node or search is provided, live: yes, default: -

Which component the gallery should get its instructions from, e.g.:

  • anura-tree (listens to its node-selected-event).

asset-template

required: no, live: yes, default: anura-asset

Which component to use for displaying a single asset. This allows you to create custom asset display variants (if you do so, you need to align with the standard anura-asset as far as attributes are concerned).

sort

required: no, live: yes, default: -

How the displayed assets should be sorted. The exact wording will depend on your adapter, e.g. name_asc.

page-size

required: no, live: yes (ish), default: 50

How many assets should be displayed at once on a page.

Events

assets-loaded

{details: {total: totalCount, assets: AnuraAsset[], pageRequest: pageRequest}}

When assets have been loaded (through whatever mechanism), informs other components (such as anura-paginator) about the total number of assets, the new assets themselves, as well as the pageRequest (contains current paging information).

paginate (inbound)

pageNumber

Instruct anura-gallery to display the provided page number - used by anura-paginator to tell the gallery to advance to an arbitrary page. Note that the page number is currently not validated, so sending a non-existent page number may lead to undefined behaviour.

Slots

  • header - the header slot will appear before the title and tree content.
  • footer - the footer slot will appear at the very end, after the tree content.
  • asset - configure your own asset. Default is <anura-asset>

    <anura-gallery adapter="some-adapter" aria-live="polite">
      <anura-asset slot="asset"></anura-asset>
    </anura-gallery>
  • paginator - configure your own paginator. Default is <anura-paginator>

    <anura-gallery adapter="some-adapter" aria-live="polite">
      <anura-paginator slot="paginator" mode="auto" detect-scroll="false"></anura-paginator>
    </anura-gallery>

When using the built-in components, the part selector might be anura-gallery::part(paginator-button), but when you declare your own it changes to anura-paginator::part(paginator-button), as it is no longer part of the gallery.

Parts

<div part="asset-container">
    <!-- many <anura-asset>s -->
</div>
<slot name="paginator">
    <anura-paginator part="paginator"></anura-paginator>
</slot>

anura-asset

<anura-asset asset-id="42" title="my-asset.jpg" thumbnail="https://..." preview="https://..."></anura-asset>

This is a passive component that is helpless without a surrounding component, such as <anura-gallery>

Screenshot of <anura-asset>

Attributes

adapter

required: yes, live: yes, default: handed down by parent component

The adapter that is currently in use by the parent component, used to request details or download the asset.

asset-id

required: yes, live: yes, default: handed down by parent component

The unique ID of the this asset

title

required: yes, live: yes, default: handed down by parent component

The display name of the this asset

thumbnail

required: yes, live: yes, default: handed down by parent component

The URL that represents a thumbnail picture of this asset (usually around ~256x256px)

preview

required: yes, live: yes, default: handed down by parent component

The URL that represents a preview picture of this asset (usually around ~1024x1024px)

Variables

--asset-width and --asset-height

required: no, default: 12rem

The width and height of the component, usually used from the outside like

anura-gallery::part(anura-asset) {
    --asset-width: 15rem;
    --asset-height: 15rem;
}

Parts

<anura-asset part="anura-asset">
    <figure part="asset-figure">
        <img part="asset-thumbnail">
        <figcaption part="asset-title"></figcaption>
    </figure>
    <div part="asset-content"></div>
    <div part="asset-actions">
        <button part="asset-button"><anura-icon part="action-icon"></anura-icon></button>
        <!-- snip, repeats button -->
    </div>
</anura-asset>

E.g. colorize the asset name (inside an anura-gallery):

anura-gallery::part(asset-title) { color: green; }

anura-paginator

Screenshot of anura-paginator

Attributes

parent

required: yes, live: yes, default: supplied by <anura-gallery> when used inside

Which component this paginator controls. This is done automatically when used inside of <anura-gallery>, but you can also put anura-paginator anywhere else (e.g. a footer), but then you need to tell it what to control.

mode

required: no, live: no, default: -

When set to auto, the pagination buttons will disappear and be replaced by a single "load more" button. When this button scrolls into view, the next page will be fetched and appended automatically.

Screenshot of auto-mode

detect-scroll

required: no, live: no, default: true

For mode="auto", detect when the view has been scrolled in order to load in the next page. Setting this to false will cause no scroll listener to be attached to the window. Users are left to click the "load more" button on their own.

Events

paginate (outbound)

pageNumber

Instruct <anura-gallery> to display the selected page number (by firing the event on the configured parent).

Parts

<nav part="paginator-nav">
    <button part="paginator-button paginator-prev">
        <anura-icon part="paginator-icon"></anura-icon>
    </button>
    <button part="paginator-button paginator-next">
        <anura-icon part="paginator-icon"></anura-icon>
    </button>
    <span part="paginator-pages">
        <button part="paginator-button paginator-page"></button>
        <!-- snip, repeats -->
    </span>
    <span part="paginator-counter"></span>
</nav>

E.g. colorize the prev- and next-buttons (inside an anura-gallery):

anura-gallery::part(paginator-button) { color: green; }

anura-icon

A wrapper around feathericons.com by @colebemis

Attributes

icon

required: yes, live: yes, default: -

Which icon from the feathericon set you with to display, e.g. folder.

toggle-icon

required: no, live: yes, default: -

Alternative icon to switch to when the component receives the toggled class