Light Dark System

Filter Container

<zn-filter-container> | ZnFilterContainer
Since 1.0 experimental

Short summary of the component’s intended use.

John Doe john.doe@zinc.style
Gary Smith gary.smith@zinc.style
Lisa Wong lisa.wong@zinc.style
Emma Johnson emma.johnson@zinc.style
Michael Brown michael.brown@zinc.style
Sophia Davis sophia.davis@zinc.style
Lisa Wong lisa.wong@zinc.style 

<zn-filter-container>
  <zn-sp flush>
    <zn-panel caption="Section One">
      <div style="display: flex; flex-direction: column;">
        <div data-filter="John Doe"
             style="padding: 10px 0; display: flex; flex-direction: column; border-bottom: 1px solid grey;">
          <strong>John Doe</strong>
          <span>john.doe@zinc.style</span>
        </div>

        <div data-filter="Gary Smith"
             style="padding: 10px 0; display: flex; flex-direction: column; border-bottom: 1px solid grey;">
          <strong>Gary Smith</strong>
          <span>gary.smith@zinc.style</span>
        </div>

        <div data-filter="Lisa Wong"
             style="padding: 10px 0; display: flex; flex-direction: column; border-bottom: 1px solid grey;">
          <strong>Lisa Wong</strong>
          <span>lisa.wong@zinc.style</span>
        </div>

        <div data-filter="Emma Johnson"
             style="padding: 10px 0; display: flex; flex-direction: column; border-bottom: 1px solid grey;">
          <strong>Emma Johnson</strong>
          <span>emma.johnson@zinc.style</span>
        </div>
      </div>

    </zn-panel>

    <zn-panel caption="Section Two">
      <div style="display: flex; flex-direction: column;">
        <div data-filter="Michael Brown"
             style="padding: 10px 0; display: flex; flex-direction: column; border-bottom: 1px solid grey;">
          <strong>Michael Brown</strong>
          <span>michael.brown@zinc.style</span>
        </div>
        <div data-filter="Sophia Davis"
             style="padding: 10px 0; display: flex; flex-direction: column; border-bottom: 1px solid grey;">
          <strong>Sophia Davis</strong>
          <span>sophia.davis@zinc.style</span>
        </div>
        <div data-filter="Lisa Wong"
             style="padding: 10px 0; display: flex; flex-direction: column; border-bottom: 1px solid grey;">
          <strong>Lisa Wong</strong>
          <span>lisa.wong@zinc.style</span>
        </div>
      </div>
    </zn-panel>
  </zn-sp>
</zn-filter-container>

Examples

Basic List Filtering

Filter a simple list of items by adding the data-filter attribute.

Apple
Banana
Cherry
Date
Elderberry
 
<zn-filter-container>
  <div data-filter="Apple">Apple</div>
  <div data-filter="Banana">Banana</div>
  <div data-filter="Cherry">Cherry</div>
  <div data-filter="Date">Date</div>
  <div data-filter="Elderberry">Elderberry</div>
</zn-filter-container>

Card List

Filter a list of card components.

Product Alpha
Description of Product Alpha
Product Beta
Description of Product Beta
Product Gamma
Description of Product Gamma
 
<zn-filter-container>
  <div style="display: grid; gap: 10px;">
    <zn-card data-filter="Product Alpha">
      <div slot="header">Product Alpha</div>
      <div>Description of Product Alpha</div>
    </zn-card>
    <zn-card data-filter="Product Beta">
      <div slot="header">Product Beta</div>
      <div>Description of Product Beta</div>
    </zn-card>
    <zn-card data-filter="Product Gamma">
      <div slot="header">Product Gamma</div>
      <div>Description of Product Gamma</div>
    </zn-card>
  </div>
</zn-filter-container>

Grouped Sections

Filter items within multiple panel sections. Empty sections are automatically hidden.

Apple
Banana
Cherry
Carrot
Broccoli
Spinach
Rice
Wheat
Oats
 
<zn-filter-container>
  <zn-sp flush>
    <zn-panel caption="Fruits">
      <div data-filter="Apple" style="padding: 5px;">Apple</div>
      <div data-filter="Banana" style="padding: 5px;">Banana</div>
      <div data-filter="Cherry" style="padding: 5px;">Cherry</div>
    </zn-panel>

    <zn-panel caption="Vegetables">
      <div data-filter="Carrot" style="padding: 5px;">Carrot</div>
      <div data-filter="Broccoli" style="padding: 5px;">Broccoli</div>
      <div data-filter="Spinach" style="padding: 5px;">Spinach</div>
    </zn-panel>

    <zn-panel caption="Grains">
      <div data-filter="Rice" style="padding: 5px;">Rice</div>
      <div data-filter="Wheat" style="padding: 5px;">Wheat</div>
      <div data-filter="Oats" style="padding: 5px;">Oats</div>
    </zn-panel>
  </zn-sp>
</zn-filter-container>

Contact List

Filter a contact list with names and emails.

Alice Johnson
alice.johnson@company.com
Bob Smith
bob.smith@company.com
Carol White
carol.white@company.com
 
<zn-filter-container>
  <zn-sp flush>
    <zn-panel caption="Team Members">
      <div style="display: flex; flex-direction: column;">
        <div data-filter="Alice Johnson alice.johnson@company.com"
             style="padding: 10px; border-bottom: 1px solid var(--zn-color-neutral-200);">
          <strong>Alice Johnson</strong>
          <div style="color: var(--zn-color-neutral-500); font-size: 0.9em;">alice.johnson@company.com</div>
        </div>
        <div data-filter="Bob Smith bob.smith@company.com"
             style="padding: 10px; border-bottom: 1px solid var(--zn-color-neutral-200);">
          <strong>Bob Smith</strong>
          <div style="color: var(--zn-color-neutral-500); font-size: 0.9em;">bob.smith@company.com</div>
        </div>
        <div data-filter="Carol White carol.white@company.com"
             style="padding: 10px; border-bottom: 1px solid var(--zn-color-neutral-200);">
          <strong>Carol White</strong>
          <div style="color: var(--zn-color-neutral-500); font-size: 0.9em;">carol.white@company.com</div>
        </div>
      </div>
    </zn-panel>
  </zn-sp>
</zn-filter-container>

Custom Filter Attribute

Use a custom attribute name for filtering by setting the attr property.

Red Item
Blue Item
Green Item
 
<zn-filter-container attr="search">
  <div data-search="Red Item">Red Item</div>
  <div data-search="Blue Item">Blue Item</div>
  <div data-search="Green Item">Green Item</div>
</zn-filter-container>

Product Catalog

Filter products with multiple data points in the filter attribute.

Laptop
Category: Electronics
Type: Computer
Smartphone
Category: Electronics
Type: Mobile
Headphones
Category: Electronics
Type: Audio
 
<zn-filter-container>
  <div style="display: grid; gap: 10px;">
    <zn-card data-filter="Laptop Computer Electronics">
      <div slot="header">Laptop</div>
      <div>Category: Electronics</div>
      <div>Type: Computer</div>
    </zn-card>
    <zn-card data-filter="Smartphone Mobile Electronics">
      <div slot="header">Smartphone</div>
      <div>Category: Electronics</div>
      <div>Type: Mobile</div>
    </zn-card>
    <zn-card data-filter="Headphones Audio Electronics">
      <div slot="header">Headphones</div>
      <div>Category: Electronics</div>
      <div>Type: Audio</div>
    </zn-card>
  </div>
</zn-filter-container>

Settings Menu

Filter configuration options in a settings interface.

Profile Information
Email Preferences
Password Security
Theme Appearance
Language Localization
Notifications Alerts
Data Sharing
Cookie Preferences
Two-Factor Authentication
 
<zn-filter-container>
  <zn-sp flush>
    <zn-panel caption="Account Settings">
      <div data-filter="Profile Information" style="padding: 10px;">Profile Information</div>
      <div data-filter="Email Preferences" style="padding: 10px;">Email Preferences</div>
      <div data-filter="Password Security" style="padding: 10px;">Password Security</div>
    </zn-panel>

    <zn-panel caption="Application Settings">
      <div data-filter="Theme Appearance" style="padding: 10px;">Theme Appearance</div>
      <div data-filter="Language Localization" style="padding: 10px;">Language Localization</div>
      <div data-filter="Notifications Alerts" style="padding: 10px;">Notifications Alerts</div>
    </zn-panel>

    <zn-panel caption="Privacy Settings">
      <div data-filter="Data Sharing" style="padding: 10px;">Data Sharing</div>
      <div data-filter="Cookie Preferences" style="padding: 10px;">Cookie Preferences</div>
      <div data-filter="Two-Factor Authentication" style="padding: 10px;">Two-Factor Authentication</div>
    </zn-panel>
  </zn-sp>
</zn-filter-container>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.66/dist/components/filter-container/filter-container.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.66/dist/components/filter-container/filter-container.js';

To import this component using a bundler:

import '@kubex/zinc/dist/components/filter-container/filter-container.js';

Slots

Name Description
(default) The default slot.
example An example slot.

Learn more about using slots.

Events

Name React Event Description Event Detail
zn-event-name Emitted as an example. -

Learn more about events.

Custom Properties

Name Description Default
--example An example CSS custom property.

Learn more about customizing CSS custom properties.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <zn-example>