mds-filter

This is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

Properties

| Property | Attribute | Description | Type | Default | | ----------- | ------------ | ---------------------------------------------------------------------- | ---------------------- | ----------- | | autoReset | auto-reset | Sets an automatic reset of active filters if all filters are triggered | boolean \| undefined | undefined | | label | label | Sets the label of the filter group | string \| undefined | undefined | | multiple | multiple | Sets if the filter group can filter multiple filters simultaneously | boolean \| undefined | undefined | | reset | reset | Shows a reset button if one or more filters are active | boolean \| undefined | undefined |

Events

| Event | Description | Type | | ----------------- | --------------------------------------------- | ----------------------------------- | | mdsFilterChange | Emits when the one of the children is changed | CustomEvent<MdsFilterEventDetail> |

Slots

| Slot | Description | | ----------- | -------------------------------- | | "default" | Add mds-filter-item element/s. |

CSS Custom Properties

| Name | Description | | -------------------------------------- | ----------------------------------------------------------------------- | | --mds-filter-items-background | Sets the background-color of the items row area | | --mds-filter-items-background-active | Sets the background-color of the items row area when a filter is active | | --mds-filter-items-gap | Sets the gap between items | | --mds-filter-items-padding | Sets the padding of the items row area | | --mds-filter-items-radius | Sets the border-radius of the items row area | | --mds-filter-items-scroll-behavior | Sets the scroll-behavior animation; | | --mds-filter-label-padding | Sets the padding of the label | | --mds-filter-wrapper-shadow | Sets the shadow used as outline border | | --mds-filter-wrapper-shadow-color | Sets the effect of the outline border | | --mds-filter-wrapper-shodow-opacity | Sets the opacity of the outline border |

Dependencies

Depends on

• mds-text
• mds-filter-item

Graph

graph TD;
  mds-filter --> mds-text
  mds-filter --> mds-filter-item
  mds-filter-item --> mds-icon
  mds-filter-item --> mds-text
  style mds-filter fill:#f9f,stroke:#333,stroke-width:4px

Built with love @ Gruppo Maggioli from R&D Department