CSS Filter

Last updated: 16 days ago

Category: Navigation

Multi-criteria filtering allows intuitive condition combination through point-and-click selection. Purely CSS-implemented, users can extend functionality as needed. Suitable for listing pages on class...

Introduction

When dealing with lists containing multiple filter criteria, using form elements like radio groups, checkbox groups, or select components can be cumbersome. For multi-criteria filtering pages (like classified listings), it's common to display all filters and allow condition combinations through click selection.

Since the specific filter content is unknown, users should define their own criteria. This component isn't registered using window.customElements.define but implemented purely with CSS for easier extension.

Basic Usage

The component is named oc-filter with this basic HTML structure: oc-filter -> _filter-wrap -> section -> rep=head/body -> rep=level1/level2 -> a

Selected items add the selected attribute, disabled items add disabled.

Secondary Categories

Supports secondary categories using rep=level2 tags. Child nodes also support selected and disabled attributes.

Using Ads

A full-width banner ad can be placed at the top using _filter-banner.

Since banner ads don't display well on mobile, consider using the picture tag with different images for different screen sizes.

Using Search

Add _filter-search class to a section for search functionality. Can contain oc-search component and rep=hot node (header node can be omitted).

Users can extend the oc-search component. For details, click here.

Using Form Fields

Traditional form fields can also be used for filtering, including:

• Radio groups
• Checkbox groups
• Select components
• Range components

Since form fields have default widths, users can override them.

For form component usage:

• oc-radios
• oc-checkboxes
• oc-select
• oc-range
• oc-rate

For more inline components, please search as needed. For details, click here.

Previewing Conditions

Selected filters can be displayed using oc-tags or individual oc-tag components.

For tags module details, click here.

For _tags/_tag CSS tags, click here.

Collapsible Sections

For many filters, secondary conditions can be collapsed. Steps:

1. Wrap secondary sections with _filter-other
2. Add _filter-toggle element outside with JS toggle logic

slideToggle is a built-in method for toggling element visibility.

To show sections initially:

1. Set --_filter-d:block on oc-filter
2. Add _opened class to _filter-toggle

Using Borders

Add bordered attribute to oc-filter for borders.

Users can also add custom rounded corners, shadows, etc.

Using Padding

Add padded attribute to oc-filter for inner spacing, useful when integrating with other components.