Light Dark System

Settings Container

<zn-settings-container> | ZnSettingsContainer
Since 1.0 experimental

Short summary of the component’s intended use.

By default, all elements inside a <zn-settings-container> are shown. You can add filters to toggle visibility of specific elements based on their attributes.

Action
Action
Action
Action
Action
Toggle Private Messages
Toggle Original Messages
 

<div style="width: 100%; height: 300px; border: 1px solid #ccc;">
  <zn-settings-container store-key="example-filters">

    <zn-tile private caption="Leslie Alexander" description="Leslie.alexander@example.com" href="https://google.com">
      <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=70" round></zn-icon>
      <div slot="actions">
        <zn-button href="#">Action</zn-button>
      </div>
    </zn-tile>

    <zn-tile private caption="Leslie Alexander" description="Leslie.alexander@example.com" href="https://google.com">
      <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=70" round></zn-icon>
      <div slot="actions">
        <zn-button href="#">Action</zn-button>
      </div>
    </zn-tile>

    <zn-tile private caption="Leslie Alexander" description="Leslie.alexander@example.com" href="https://google.com">
      <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=70" round></zn-icon>
      <div slot="actions">
        <zn-button href="#">Action</zn-button>
      </div>
    </zn-tile>

    <zn-tile original caption="Leslie Alexander" description="Leslie.alexander@example.com" href="https://google.com">
      <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=70" round></zn-icon>
      <div slot="actions">
        <zn-button href="#">Action</zn-button>
      </div>
    </zn-tile>

    <zn-tile original caption="Leslie Alexander" description="Leslie.alexander@example.com" href="https://google.com">
      <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=70" round></zn-icon>
      <div slot="actions">
        <zn-button href="#">Action</zn-button>
      </div>
    </zn-tile>

    <div slot="filter" attribute="private" default="true">Toggle Private Messages</div>
    <div slot="filter" attribute="original" default="true">Toggle Original Messages</div>

  </zn-settings-container>
</div>

Examples

Specific Elements Only

You can pass to the settings container only specific elements you want to be affected by the filters. for example by adding item-selector=“zn-inline-edit” only the inline edit elements will be affected by the filters.

Action
Action
Action
Toggle Inline Edit Private Messages
Toggle Tile Original Messages 

<style>
  zn-tile, zn-inline-edit {
    position: relative;
  }

  [private]:after, [original]:after {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 0 0 0 4px;
    color: #000;
    font-weight: bold;
  }

  [private]:after {
    content: " (private)";
    border: 1px solid #f00;
    background: #fee;
  }

  [original]:after {
    content: " (original)";
    border: 1px solid #00f;
    background: #eef;
  }
</style>

<div style="width: 100%; height: 300px; border: 1px solid #ccc;">
  <zn-settings-container item-selector="zn-inline-edit">

    <zn-inline-edit private caption="Something" value="1" action="#" method="GET"
                    options="{&quot;1&quot;: &quot;Option 1&quot;,&quot;2&quot;: &quot;Option 2&quot;}">
    </zn-inline-edit>

    <zn-tile private caption="Leslie Alexander" description="Leslie.alexander@example.com" href="https://google.com">
      <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=70" round></zn-icon>
      <div slot="actions">
        <zn-button href="#">Action</zn-button>
      </div>
    </zn-tile>

    <zn-tile private caption="Leslie Alexander" description="Leslie.alexander@example.com" href="https://google.com">
      <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=70" round></zn-icon>
      <div slot="actions">
        <zn-button href="#">Action</zn-button>
      </div>
    </zn-tile>

    <zn-inline-edit original caption="Something" value="1" action="#" method="GET"
                    options="{&quot;1&quot;: &quot;Option 1&quot;,&quot;2&quot;: &quot;Option 2&quot;}">
    </zn-inline-edit>

    <zn-tile original caption="Leslie Alexander" description="Leslie.alexander@example.com" href="https://google.com">
      <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=70" round></zn-icon>
      <div slot="actions">
        <zn-button href="#">Action</zn-button>
      </div>
    </zn-tile>

    <div slot="filter" attribute="private" default="true" item-selector="zn-inline-edit">Toggle Inline Edit Private Messages</div>
    <div slot="filter" attribute="original" default="true" item-selector="zn-tile">Toggle Tile Original Messages</div>

  </zn-settings-container>
</div>

Pull Tab

Add the pull-tab attribute to replace the settings dropdown with a pull tab anchored to the top right of the container. Clicking the tab slides down a panel containing the settings options. Optional content can be placed in the tab slot to render alongside the chevron.

Action
Action
Action
Toggle Private Messages
Toggle Original Messages
 

<div style="width: 100%; height: 300px; border: 1px solid #ccc;">
  <zn-settings-container pull-tab store-key="example-pull-tab-filters">

    <zn-tile private caption="Leslie Alexander" description="Leslie.alexander@example.com" href="https://google.com">
      <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=70" round></zn-icon>
      <div slot="actions">
        <zn-button href="#">Action</zn-button>
      </div>
    </zn-tile>

    <zn-tile private caption="Leslie Alexander" description="Leslie.alexander@example.com" href="https://google.com">
      <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=70" round></zn-icon>
      <div slot="actions">
        <zn-button href="#">Action</zn-button>
      </div>
    </zn-tile>

    <zn-tile original caption="Leslie Alexander" description="Leslie.alexander@example.com" href="https://google.com">
      <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=70" round></zn-icon>
      <div slot="actions">
        <zn-button href="#">Action</zn-button>
      </div>
    </zn-tile>

    <div slot="filter" attribute="private" default="true">Toggle Private Messages</div>
    <div slot="filter" attribute="original" default="true">Toggle Original Messages</div>

  </zn-settings-container>
</div>

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.1.51/dist/components/settings-container/settings-container.js"></script>

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

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

To import this component using a bundler:

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

Slots

Name Description
(default) The default slot.
filter Filter definitions used to toggle visibility of content.
dropdown-content Custom content for the settings panel.
tab Extra content rendered inside the pull tab next to the chevron.

Learn more about using slots.

Events

Name React Event Description Event Detail
zn-show Emitted when the pull tab panel opens. -
zn-hide Emitted when the pull tab panel closes. -

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>