Skip to content

SiFilterBarComponent documentation

selector
si-filter-bar

Input Properties

NameTypeDefaultDescription
allowReset
booleantrueSet false to hide reset filters button
collapsedFiltersDescription
TranslatableString$localize`:@@SI_FILTER_BAR.COLLAPSED_FILTERS_DESCRIPTION:+ {{count}} filters`Custom text for the collapsed filters.
colorVariant
BackgroundColorVariant'base-1'Color to use for component background
disabled
booleanfalseSet to true to disable component
filterDefaultText
TranslatableString$localize`:@@SI_FILTER_BAR.NO_FILTERS:No filters applied`Custom text if no filters are selected.
filters
Filter[][]Array of filter items to show
resetText
TranslatableString$localize`:@@SI_FILTER_BAR.RESET_FILTERS:Reset filters`Text for reset button

Output Properties

NameTypeDescription
filtersChange
Filter[]Array of filter items to show
resetFilters
voidOutput callback to be executed when the reset filter is clicked

Types Documentation

(string & Translatable)
Represents a translatable string. This can either be a translation key, e.g. ACTIONS.EDIT that will be automatically translated when displayed on the UI or a pre-translated string, e.g. Edit . Equivalent to a normal string in usage and functionality.
("base-1" | "base-0")
Use this type with filter components colorVariant to render component variants based on background of container
Properties
Short description of filter pill. Can be left empty if title is used to align the title to middle of pill.
description?: TranslatableString
Identification name of filter pill. Is not shown to the user, please specify either a title or a description .
filterName: string
Deprecated: The status property has been deprecated as it no longer has any visual effect on filter pills. This property will be removed in the next major version. Please remove this property from your Filter objects as it is now ignored by the filter component.
status?: FilterStatusType
Shown title of filter pill. Can be left empty if description is used.
title?: TranslatableString
Translatable
import
("default" | "success" | "info" | "warning" | "danger" | "inactive")
Deprecated: FilterStatusType has been deprecated as it no longer has any visual effect on filter pills. This type will be removed in the next major version. Please remove any usage of the status property from your Filter objects as it is now ignored by the component.

Except where otherwise noted, content on this site is licensed under MIT License.