The Filter Component

Description

Filter

The filter component provides an UI that allows you to exchange filter state with other components, communicating via Cotton Ball events. At the moment filter business logic occurs at the component level that needs filter implementation. You can find developer documentation in gitlab repository.

Screenshots

Filter view example.

Meta

Maintainer	berlin-team-aventoms@tui.info
Locales	de-DE

Usage

Add the following script tag (or something similar) to your web page to have the component load. Note: This is required only once per webpage, even when you embed multiple instances of the component.

<script src="https://api.tui.com/ml/filter/ui/" async defer></script>

Add the following HTML code anywhere in your webpage at the position where you want the component to show. You can create multiple instances of the component.

<div class="tui-component tui-component-tui-component-filter"></div>

Examples

• Render filter component

  <div class="tui-component tui-component-tui-component-filter"
  	data-scope="filter"
  	data-counter="false">
  </div>
  

ATTENTION: This is a legacy component. The tag name must be set as class name (as in the example above), and attributes must be prefixed with data-.

Read more about using components ›

Attributes

This component can be configured with the following attributes:

Name	Description	Allowed Values	Default	Required
scope	Sets the scope to identify the components.	filter	filter	no
counter	shows / hides counter bubbles of radio and checkbox lists	true, false	false	no

Events