Packages
noora
0.86.0
0.86.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
docs/components/filter.md
<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->
# Filter
Builds and displays a set of structured filters.
```html
<noora-filter>
<noora-filter-definition name="status" label="Status" type="option">
<noora-filter-option value="active">Active</noora-filter-option>
<noora-filter-option value="paused">Paused</noora-filter-option>
</noora-filter-definition>
<noora-filter-value name="status" operator="==" value="active"></noora-filter-value>
</noora-filter>
```
## Attributes
| Attribute | Type or allowed values | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | `"Filter"` | Sets the add-filter label. |
| `disabled` | `boolean` | `false` | Disables editing. |
## Properties
| Property | Type or allowed values | Default | Description |
| --- | --- | --- | --- |
| `availableFilters` | `Array<Record<string, unknown>>` | `[]` | Defines available filters programmatically when declarative definitions are not used. |
| `filters` | `Array<Record<string, unknown>>` | `[]` | Gets or sets active filters programmatically. |
## Events
| Event | Type | Description |
| --- | --- | --- |
| `noora-filter-change` | `CustomEvent<{ filters: Array<Record<string, unknown>> }>` | Emitted when a filter is added, changed, or removed. |
## Slots
| Slot | Description |
| --- | --- |
| `default` | Declarative noora-filter-definition and noora-filter-value children. |
## Styling parts
| Part | Description |
| --- | --- |
| `filter` | The filter container. |
| `active-filters` | The active-filter list. |
| `add` | The add-filter control. |
| `active-filter` | An active filter control. |
Changes emit a `noora-filter-change` event.
## Status filter
Offer a predefined status filter.
```html
<noora-filter>
<noora-filter-definition name="status" label="Status" type="option">
<noora-filter-option value="active">Active</noora-filter-option>
<noora-filter-option value="paused">Paused</noora-filter-option>
</noora-filter-definition>
<noora-filter-definition name="name" label="Name" type="text"></noora-filter-definition>
<noora-filter-definition name="amount" label="Amount" type="number"></noora-filter-definition>
<noora-filter-value name="status" operator="==" value="active"></noora-filter-value>
</noora-filter>
```