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.

paginator

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

How many assets should be displayed at once on a page. Multiple values are possible:

  • 0: disables pagination completely, removes the built-in <anura-paginator>.
  • none : removes the built-in <anura-paginator>. Expects you to provide your own paginator (see <anura-paginator>).
  • auto: paginates implicitly, so when the user reaches the end of the list, it will automatically load the next page.
  • any number: use the built-in paginator and sets the page size to the number you provided.

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.

Parts

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

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)

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

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.

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"><anura-icon part="paginator-icon"></anura-icon></button>
    <!-- snip, repeats button -->
    <span part="paginator-pages">
        <button part="pages-button">1</button>
        <!-- snip, repeats buttons -->
    </span>
    <span part="paginator-counter">
        <span part="paginator-current">1 - 16</span>
        <span part="paginator-total">42</span>
    </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