Light Dark System

Page

<zn-page> | ZnPage
Since 1.0 experimental

Combines a page header with tab navigation and tab panels.

UI Examples Overview Content Tab One Content Tab Two Content 
<zn-page caption="Page Title" summary="Page Summary">
  <zn-button slot="actions" type="primary" size="small" href="/ui">UI Examples</zn-button>

  <zn-tab caption="Overview">
    Overview Content
  </zn-tab>

  <zn-tab caption="Tab One">
    Tab One Content
  </zn-tab>

  <zn-tab caption="Tab Two" id="tab-2">
    Tab Two Content
  </zn-tab>

  <zn-tab caption="Dynamic Tab" uri="/tab-three"></zn-tab>
</zn-page>

Examples

Header Actions

Use slot="actions" to place controls in the page header action area.

Export New Customer Customer overview content Active customer content Archived customer content 
<zn-page caption="Customers" summary="Manage active customers">
  <zn-button slot="actions" color="secondary" size="small">Export</zn-button>
  <zn-button slot="actions" color="primary" size="small">New Customer</zn-button>

  <zn-tab caption="Overview">
    Customer overview content
  </zn-tab>

  <zn-tab caption="Active">
    Active customer content
  </zn-tab>

  <zn-tab caption="Archived">
    Archived customer content
  </zn-tab>
</zn-page>

Header Metadata

zn-page supports the same header metadata attributes as zn-header: full-location, entity-id, entity-id-show, previous-path, and previous-target.

Overview content 
<zn-page
  caption="Customer Comms"
  summary="This is a description about the purpose of this page."
  full-location="/customers/comms"
  entity-id="customer-comms"
  previous-path="/customers">
  <zn-tab caption="Overview">
    Overview content
  </zn-tab>
</zn-page>

Breadcrumb links can be passed with slot="breadcrumb" and will be forwarded to the underlying header.

Accounts Acme Inc Profile content Security content 
<zn-page caption="Account Settings" summary="Configure account preferences">
  <a href="#" slot="breadcrumb">Accounts</a>
  <a href="#" slot="breadcrumb">Acme Inc</a>

  <zn-tab caption="Profile">
    Profile content
  </zn-tab>

  <zn-tab caption="Security">
    Security content
  </zn-tab>
</zn-page>

Overview Content

Use a normal zn-tab for overview content. An Overview tab without an explicit id uses the default empty tab id. zn-page leaves tab elements in the page light DOM and projects them into internal tab panels, so scoped styles from the original DOM context continue to apply. Tabs render in the order they appear in the page by default. Tabs with an empty id are shown first. Set priority on zn-tab to order the remaining tabs without changing their DOM position.

This summary appears in the Overview tab. Activity content Files content 
<zn-page caption="Project" summary="Current project status">
  <zn-tab caption="Overview">
    <zn-note open>
      This summary appears in the Overview tab.
    </zn-note>
  </zn-tab>

  <zn-tab caption="Activity">
    Activity content
  </zn-tab>

  <zn-tab caption="Files">
    Files content
  </zn-tab>
</zn-page>

Tab Priority

Use priority to control tab order. Lower numbers appear first after the empty-id overview tab.

Later content Second content Overview content First content 
<zn-page caption="Ordered Page" summary="Priority controls the navigation order">
  <zn-tab caption="Later">
    Later content
  </zn-tab>

  <zn-tab caption="Second" priority="20">
    Second content
  </zn-tab>

  <zn-tab caption="Overview">
    Overview content
  </zn-tab>

  <zn-tab caption="First" priority="10">
    First content
  </zn-tab>
</zn-page>

Dynamic Tabs

Set uri on zn-tab to create a dynamic tab. The generated navigation item receives tab-uri.

Report overview content 
<zn-page caption="Reports" summary="Load reports on demand">
  <zn-tab caption="Overview">
    Report overview content
  </zn-tab>

  <zn-tab caption="Revenue" uri="/reports/revenue"></zn-tab>
  <zn-tab caption="Usage" uri="/reports/usage"></zn-tab>
</zn-page>

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.114/dist/components/page/page.js"></script>

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

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

To import this component using a bundler:

import '@kubex/zinc/dist/components/page/page.js';

Slots

Name Description
(default) Page content. Use zn-tab for named tabs and header-action/header-actions for header actions.
bottom Content rendered below the navbar row (e.g. chips, filters). Forwarded to the navbar’s bottom 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.