--- title: Components url: 'https://docs.brix.ch/dam/anura-webcomponents/components' markdown: 'https://docs.brix.ch/dam/anura-webcomponents/components.md' lang: en date: '2026-10-26' description: 'Technical documentation for brix:anura webcomponents – Software developed by brix' taxonomy: category: - docs --- [](#) [ Welcome ](https://docs.brix.ch/) [ DAM ](https://docs.brix.ch/dam) [ Anura Webcomponents ](https://docs.brix.ch/dam/anura-webcomponents) Components # Components #### Table of Contents - [Foreword](#foreword) - [Main Views](#main-views) - [anura-gallery](#anura-gallery) - [anura-table](#anura-table) - [anura-col](#anura-col) - [anura-map](#anura-map) - [anura-slider](#anura-slider) - [Supporting elements](#supporting-elements) - [anura-asset](#anura-asset) - [anura-lightbox](#anura-lightbox) - [anura-details](#anura-details) - [anura-basket](#anura-basket) - [anura-paginator](#anura-paginator) - [Navigation](#navigation) - [anura-searchbar](#anura-searchbar) - [anura-select](#anura-select) - [anura-date](#anura-date) - [anura-number](#anura-number) - [anura-text](#anura-text) - [anura-tree](#anura-tree) - [anura-filters](#anura-filters) - [Ancillary Components](#ancillary-components) - [anura-icon](#anura-icon) - [Attributes](#attributes) - [Methods](#methods) - [anura-counter](#anura-counter) - [Attributes](#attributes-1) - [Slots](#slots) - [Parts](#parts) - [anura-reset](#anura-reset) - [Attributes](#attributes-2) - [Parts](#parts-1) - [anura-injector](#anura-injector) - [Attributes](#attributes-3) - [Slots](#slots-1) - [Example](#example) - [anura-loader](#anura-loader) - [Attributes](#attributes-4) - [Slots](#slots-2) - [Example](#example-1) - [anura-modal](#anura-modal) - [Attributes](#attributes-5) - [Slots](#slots-3) - [Examples](#examples) - [anura-compare](#anura-compare) - [Attributes](#attributes-6) - [Example](#example-2) ## 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) - `--border-radius`- Radius of borders (e.g. in anura-select, anura-searchbar) - `--counter-color` - Color for counters (anura-tree, anura-select) - `--sidebar-width` - Width of sidebars (and `--sidebar-height` respectively when in portrait mode) ## Main Views Main views display the assets, given scope defined by 1-n navigation components. ### [anura-gallery](https://docs.brix.ch/dam/anura-webcomponents/components/gallery) View assets as a grid of thumbnails. ![screenshot of anura-gallery](https://docs.brix.ch/user/pages/07.dam/02.anura-webcomponents/02.components/gallery-small.png) ### [anura-table](https://docs.brix.ch/dam/anura-webcomponents/components/table) View assets in tabular form. ![screenshot of anura-table](https://docs.brix.ch/user/pages/07.dam/02.anura-webcomponents/02.components/table-small.png) #### [anura-col](https://docs.brix.ch/dam/anura-webcomponents/components/table#anura-col) Dummy-component to configure table columns. ### [anura-map](https://docs.brix.ch/dam/anura-webcomponents/components/map) View assets as pins on a map. Note that this component loads external dependencies (the map). ![screenshot of anura-map](https://docs.brix.ch/user/pages/07.dam/02.anura-webcomponents/02.components/map-small.png) ### [anura-slider](https://docs.brix.ch/dam/anura-webcomponents/components/slider) View assets as an image slider. Barely qualifies as a main view (purely visual, no downloads etc.). ![screenshot of anura-slider](https://docs.brix.ch/user/pages/07.dam/02.anura-webcomponents/02.components/slider-small.png) ### Supporting elements #### [anura-asset](https://docs.brix.ch/dam/anura-webcomponents/components/asset) #### [anura-lightbox](https://docs.brix.ch/dam/anura-webcomponents/components/lightbox) #### [anura-details](https://docs.brix.ch/dam/anura-webcomponents/components/details) #### [anura-basket](https://docs.brix.ch/dam/anura-webcomponents/components/basket) #### [anura-paginator](https://docs.brix.ch/dam/anura-webcomponents/components/paginator) ## Navigation Navigation components provide various methods to restrict the scope of displayed assets. In the end they all behave like an input element (e.g. they have a *value* and emit *change* events). ### [anura-searchbar](https://docs.brix.ch/dam/anura-webcomponents/components/searchbar) ![screenshot of anura-searchbar](https://docs.brix.ch/user/pages/07.dam/02.anura-webcomponents/02.components/searchbar/anura-searchbar.png) ### [anura-select](https://docs.brix.ch/dam/anura-webcomponents/components/select) ![screenshot of anura-select](https://docs.brix.ch/user/pages/07.dam/02.anura-webcomponents/02.components/select/anura-select-closed.png) ### [anura-date](https://docs.brix.ch/dam/anura-webcomponents/components/date) ![screenshot of anura-date](https://docs.brix.ch/user/pages/07.dam/02.anura-webcomponents/02.components/date/anura-date-compact.png) ### [anura-number](https://docs.brix.ch/dam/anura-webcomponents/components/number) ![screenshot of anura-number](https://docs.brix.ch/user/pages/07.dam/02.anura-webcomponents/02.components/number/anura-number.png) ### [anura-text](https://docs.brix.ch/dam/anura-webcomponents/components/text) ![screenshot of anura-text](https://docs.brix.ch/user/pages/07.dam/02.anura-webcomponents/02.components/text/anura-text.png) ### [anura-tree](https://docs.brix.ch/dam/anura-webcomponents/components/tree) ![screenshot of anura-tree](https://docs.brix.ch/user/pages/07.dam/02.anura-webcomponents/02.components/tree/anura-tree.png) ### [anura-filters](https://docs.brix.ch/dam/anura-webcomponents/components/filters) ![screenshot of anura-filters](https://docs.brix.ch/user/pages/07.dam/02.anura-webcomponents/02.components/filters/anura-filters.png) ## Ancillary Components Small components that don't merit their own page. ### anura-icon A wrapper around the wonderful [feathericons.com](https://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` attribute ##### toggled > required: no, live: yes, default: not Whether to switch to the toggled state, e.g. `` ##### loading > required: no, live: yes, default: not Whether to switch to a loading animation, e.g. `` #### Methods ##### getSvg(name) Returns a particular SVG from the internal library. ##### setSvg(name, svg) Override an existing (or register a new) SVG. Note that it must follow the feathericons.com layout, otherwise it might look weird. This is probably best done via the `whenDefined` hook from `customElements`: ```js customElements.whenDefined('anura-icon').then(AnuraIcon => { AnuraIcon.setSvg('download', ''); }); ``` ### 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](https://docs.brix.ch/user/pages/07.dam/02.anura-webcomponents/02.components/anura-counter.png) 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](https://docs.brix.ch/dam/anura-webcomponents/components/asset/#buttons) feature on assets, also show how many assets are currently selected. E.g.: "Found 1337 assets, 3 selected" ##### multi-select > required: no, live: on-change, default: none When using `count-selected`, offer buttons to select all or none ##### basket > required: no, live: yes, default: - When using `count-selected`, set the basket and offer a button to add all them - needs to be querySelect-able. #### Slots - **prefix** - content that should appear before the count - **suffix** - content that should appear after the count #### Parts ```html ``` ### anura-reset A simple reset button, designed to reset all known `anura-` navigational components. ```html ``` ![Screenshot of anura-reset](https://docs.brix.ch/user/pages/07.dam/02.anura-webcomponents/02.components/anura-reset.png) Hold down `Shift + Ctrl` to also clear the local storage and state attributes, and then reload the page. #### Attributes ##### adapter > **required: yes**, live: no, default: - With which adapter to talk to (to load the values from) ##### target > **required: yes**, live: on-load, default: - Whom to reset when clicked. Must be a querySelector-able expression, auch as `#my-filter-1, #my-filter-2` or simply all from a parent like `aside > *` #### Parts ```html ``` ### 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 ```html ``` ### anura-loader Fullscreen blocker until the configured main view receives its first `anura-loaded` event. Should be added as early as possible on the page. #### Attributes ##### main-view > **required: yes**, live: yes, default: - Selector for the main view(s), e.g. `#my-gallery`. #### Slots The unnamed default slot, e.g. to add a logo. #### Example ```html logo ``` ### anura-modal A simple modal dialog for you to put stuff into (such as a greeting). #### Attributes ##### open > required: no, live: on-load, default: - Whether the modal should be open initially. `` ##### once > required: no, live: on-load, default: - When `open` is active, only open the modal once. You **must** set an `id` for that to work. `` ##### trigger > required: no, live: yes, default: - Convenience feature to set what triggers this modal to open (on-click). `` #### Slots - default (unnamed) slot for your content - `title` - to give the modal a title - `footer` - adds a footer for custom content, e.g. a button #### Examples ```html Hi there! Greetings and welcome to this page! ``` ### anura-compare Compare two assets (visually and metadata). Requires the `checkbox` button to be active in your main view. ![Screenshot of anura-compare button](https://docs.brix.ch/user/pages/07.dam/02.anura-webcomponents/02.components/anura-compare-button.png) ![Screenshot of anura-compare dialog](https://docs.brix.ch/user/pages/07.dam/02.anura-webcomponents/02.components/anura-compare.png) #### Attributes ##### adapter > **required: yes**, live: no, default: - With which adapter to talk to (to load the values from) ##### parents > **required: yes**, live: yes, default: - Which parent views to listen to, e.g. `anura-gallery,anura-table`. ##### reset-selection > required: no, live: yes, default: - When the compare-UI opens, automatically reset the selected assets in the `parents` (for convenience). #### Example ```html ``` [ ](https://docs.brix.ch/dam/anura-webcomponents/adapters) [](https://docs.brix.ch/dam/anura-webcomponents/components/asset) --- ## Navigation - Parent: [Anura Webcomponents](https://docs.brix.ch/dam/anura-webcomponents.md) - Previous: [Adapters](https://docs.brix.ch/dam/anura-webcomponents/adapters.md) - Next: [Examples](https://docs.brix.ch/dam/anura-webcomponents/examples.md) - Children: - [anura-asset](https://docs.brix.ch/dam/anura-webcomponents/components/asset.md) - [anura-basket](https://docs.brix.ch/dam/anura-webcomponents/components/basket.md) - [anura-date](https://docs.brix.ch/dam/anura-webcomponents/components/date.md) - [anura-details](https://docs.brix.ch/dam/anura-webcomponents/components/details.md) - [anura-filters](https://docs.brix.ch/dam/anura-webcomponents/components/filters.md) - [anura-gallery](https://docs.brix.ch/dam/anura-webcomponents/components/gallery.md) - [anura-lightbox](https://docs.brix.ch/dam/anura-webcomponents/components/lightbox.md) - [anura-map](https://docs.brix.ch/dam/anura-webcomponents/components/map.md) - [anura-number](https://docs.brix.ch/dam/anura-webcomponents/components/number.md) - [anura-paginator](https://docs.brix.ch/dam/anura-webcomponents/components/paginator.md) - [anura-searchbar](https://docs.brix.ch/dam/anura-webcomponents/components/searchbar.md) - [anura-select](https://docs.brix.ch/dam/anura-webcomponents/components/select.md) - [anura-slider](https://docs.brix.ch/dam/anura-webcomponents/components/slider.md) - [anura-table](https://docs.brix.ch/dam/anura-webcomponents/components/table.md) - [anura-text](https://docs.brix.ch/dam/anura-webcomponents/components/text.md) - [anura-tree](https://docs.brix.ch/dam/anura-webcomponents/components/tree.md)