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)

Main Views

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

Screenshot of anura-countert

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>