Usage
When to use
When not to use
How to use this component
<Hds::FilterBar @filters={{this.filters}} as |F|>
<F.Dropdown as |D|>
<D.FilterGroup
@key="name"
@text="Name"
@type="multi-select"
as |F|
>
<F.Checkbox @value="project-1" @label="Project 1" />
<F.Checkbox @value="project-2" @label="Project 2" />
<F.Checkbox @value="project-3" @label="Project 3" />
</D.FilterGroup>
<D.FilterGroup
@key="version"
@text="Version"
@type="single-select"
as |F|
>
<F.Checkbox @value="1.0" @label="1.0" />
<F.Checkbox @value="2.0" @label="2.0" />
<F.Checkbox @value="3.0" @label="3.0" />
</D.FilterGroup>
</F.Dropdown>
</Hds::FilterBar>
Component API
FilterBar
…attributes
This component supports use of
...attributes.
Contextual components
Anatomy
Filter Bar
| Element | Usage |
|---|---|
| object 1 | Required |
| object 2 | Optional |
States
Conformance Rating
Applicable WCAG Success Criteria
This section is for reference only. This component intends to conform to the following WCAG Success Criteria:
-
1.3.1
Info and Relationships (Level A):
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
Support
If any accessibility issues have been found within this component, let us know by submitting an issue.
