Light Dark System

Cols

<zn-cols> | ZnCols
Since 1.0 experimental

Short summary of the component’s intended use.

1 2 3 4 5 

<zn-cols layout="2,1" border>
  <zn-panel>1</zn-panel>
  <zn-panel>2</zn-panel>
  <zn-panel>3</zn-panel>
  <zn-panel>4</zn-panel>
  <zn-panel>5</zn-panel>
</zn-cols>

Examples

Equal Column Layout

Create equal-width columns by using a layout pattern like “1,1” or “1,1,1″.

Column 1 Column 2 
<zn-cols layout="1,1">
  <zn-panel>Column 1</zn-panel>
  <zn-panel>Column 2</zn-panel>
</zn-cols>

Three Equal Columns

Column 1 Column 2 Column 3 
<zn-cols layout="1,1,1">
  <zn-panel>Column 1</zn-panel>
  <zn-panel>Column 2</zn-panel>
  <zn-panel>Column 3</zn-panel>
</zn-cols>

Asymmetric Layout

Use different numbers in the layout to create columns of different widths. The pattern “2,1” creates a layout where the first column is twice as wide as the second.

Wide Column (2 units) Narrow Column (1 unit) 
<zn-cols layout="2,1">
  <zn-panel>Wide Column (2 units)</zn-panel>
  <zn-panel>Narrow Column (1 unit)</zn-panel>
</zn-cols>

Three Column Asymmetric

Widest Column (3 units) Medium Column (2 units) Narrowest Column (1 unit) 
<zn-cols layout="3,2,1">
  <zn-panel>Widest Column (3 units)</zn-panel>
  <zn-panel>Medium Column (2 units)</zn-panel>
  <zn-panel>Narrowest Column (1 unit)</zn-panel>
</zn-cols>

Repeating Pattern

The layout pattern repeats for additional children. With “2,1”, items cycle through the pattern.

1 (2 units) 2 (1 unit) 3 (2 units) 4 (1 unit) 5 (2 units) 
<zn-cols layout="2,1">
  <zn-panel>1 (2 units)</zn-panel>
  <zn-panel>2 (1 unit)</zn-panel>
  <zn-panel>3 (2 units)</zn-panel>
  <zn-panel>4 (1 unit)</zn-panel>
  <zn-panel>5 (2 units)</zn-panel>
</zn-cols>

With Borders

Use the border attribute to add borders around columns.

Column 1 Column 2 Column 3 
<zn-cols layout="1,1,1" border>
  <zn-panel>Column 1</zn-panel>
  <zn-panel>Column 2</zn-panel>
  <zn-panel>Column 3</zn-panel>
</zn-cols>

Without Gap

Use the no-gap attribute to remove spacing between columns.

No Gap Between Columns 
<zn-cols layout="1,1,1" no-gap border>
  <zn-panel>No Gap</zn-panel>
  <zn-panel>Between</zn-panel>
  <zn-panel>Columns</zn-panel>
</zn-cols>

With Padding

Use the pad attribute to add padding inside each column.

Padded Column 1 Padded Column 2 
<zn-cols layout="1,1" pad border>
  <zn-panel>Padded Column 1</zn-panel>
  <zn-panel>Padded Column 2</zn-panel>
</zn-cols>

Horizontal Padding Only

Use the pad-x attribute to add only horizontal padding.

Horizontal Padding Horizontal Padding 
<zn-cols layout="1,1" pad-x border>
  <zn-panel>Horizontal Padding</zn-panel>
  <zn-panel>Horizontal Padding</zn-panel>
</zn-cols>

Vertical Padding Only

Use the pad-y attribute to add only vertical padding.

Vertical Padding Vertical Padding 
<zn-cols layout="1,1" pad-y border>
  <zn-panel>Vertical Padding</zn-panel>
  <zn-panel>Vertical Padding</zn-panel>
</zn-cols>

With Dividers

Use the divide attribute to add dividers between columns.

Column 1 Column 2 Column 3 
<zn-cols layout="1,1,1" divide>
  <zn-panel>Column 1</zn-panel>
  <zn-panel>Column 2</zn-panel>
  <zn-panel>Column 3</zn-panel>
</zn-cols>

Create a sticky sidebar layout for scrollable content.

Sticky Sidebar
Navigation
Scrollable Content
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
 
<zn-cols layout="1,1">
  <div>
    <zn-panel style="position: -webkit-sticky; position: sticky; top:10px;">
      <div class="box" style="height: 100px; margin: 10px 0; background: purple">Sticky Sidebar</div>
      <div class="box" style="height: 100px;">Navigation</div>
    </zn-panel>
  </div>

  <zn-panel>
    <div class="box" style="height: 100px; margin: 10px 0; background: orange">Scrollable Content</div>
    <div class="box" style="height: 100px; background: orange">Item 1</div>
    <div class="box" style="height: 100px; background: orange">Item 2</div>
    <div class="box" style="height: 100px; background: orange">Item 3</div>
    <div class="box" style="height: 100px; background: orange">Item 4</div>
    <div class="box" style="height: 100px; background: orange">Item 5</div>
    <div class="box" style="height: 100px; background: orange">Item 6</div>
  </zn-panel>
</zn-cols>

Dashboard Layout

Combine multiple features for a complete dashboard layout.

Main Content

This is the main content area with a 2:1 ratio.

Sidebar

This is a narrower sidebar.

 
<zn-cols layout="2,1" border pad>
  <zn-panel>
    <h3>Main Content</h3>
    <p>This is the main content area with a 2:1 ratio.</p>
  </zn-panel>
  <zn-panel>
    <h3>Sidebar</h3>
    <p>This is a narrower sidebar.</p>
  </zn-panel>
</zn-cols>

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.86/dist/components/cols/cols.js"></script>

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

import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.86/dist/components/cols/cols.js';

To import this component using a bundler:

import '@kubex/zinc/dist/components/cols/cols.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>