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

First Example

TODO

Second Example

TODO

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.12/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.12/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>