Components

Foreword

The following CSS variables can be declared globally and are used my multiple components:

• --button-color - The color of buttons
• --button-font-color - The font color of buttons
• --selected-color- Color to indicate selected status (e.g. checkbox)
• --border-color- Color of borders (e.g. in anura-asset, anura-searchbar)
• --counter-color - Color for counters (anura-tree, anura-select)
• --sidebar-width - Width of sidebars (and --sidebar-height respectively when in portrait mode)

Navigation

• anura-tree
• anura-searchbar
• anura-select
• anura-date
• anura-text

Main Views

• anura-gallery
  • anura-asset
  • anura-paginator
• anura-lightbox
  • anura-details
• anura-basket

Ancillary Components

anura-icon

A wrapper around the wonderful 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

anura-counter

Tiny component to show the number of assets that a given main view has to offer (regardless of pagination).

If you want to adjust the wording, the translation keys are resultCount0, resultCount1 and resultCountN (this one takes a {count}).

Attributes

parent

required: yes, live: yes, default: -

The parent component to listen to, e.g. anura-gallery

number-only

required: no, live: yes, default: false

Set this to true to exclusively show the count, without any surrounding text.

count-selected

required: no, live: yes, default: true

When using the checkbox feature on assets, also show how many assets are currently selected.

E.g.: "Found 1337 assets, 3 selected"

Slots

• prefix - content that should appear before the count
• suffix - content that should appear after the count

Parts

<span part="counter-count"></span>
<span part="counter-select"></span>

anura-injector

Extremely basic component that appends the content of its default slot to the specified target. This is useful when you don't have control over the entire layout of the page that you are using Anura in, e.g. some CMS may only allow you to add content in the main part, but you may want to add something to the sidebar.

Attributes

target

required: yes, live: yes, default: -

Selector for the injection target, e.g. #sidebar.

Slots

The unnamed default slot.

Example

<anura-injector target="#sidebar">
  <anura-searchbar adapter="some-adapter"></anura-searchbar>
  <anura-select adapter="some-adapter" source="produktkategorie"></anura-select>
  <anura-select adapter="some-adapter" source="Content-Type"></anura-select>
  <anura-select adapter="some-adapter" source="verwendungszweck"></anura-select>
</anura-injector>