Light Dark System

Example Page

An example of a full page in zinc with use of multiple nested tabs, in case you need to show multiple views of data.

We have a primary set of tabs which uses just the zn-navbar component to show the navigation, and then a secondary set of tabs which uses the zn-header component to show the navigation in a more detailed way.

Data Points Other Points
this is an example of the details tab
Something Something Darkside 

<style>
  .code-preview__preview {
    background-color: rgb(var(--zn-body)) !important;
    padding: 0 25px 0 0;
  }
</style>

<zn-tabs flush primary-caption="Navigation" secondary-caption="content">

  <!-- This is the navigation for the first set of tabs -->
  <zn-navbar slot="top"
             highlight
             navigation="[{&quot;title&quot;:&quot;John Doe&quot;,&quot;active&quot;:false,&quot;hintText&quot;:&quot;Overview&quot;,&quot;launchMode&quot;:&quot;page&quot;}]"
             dropdown="[{&quot;tab&quot;:&quot;2&quot;,&quot;title&quot;:&quot;Some Actions&quot;,&quot;type&quot;:&quot;dropdown&quot;}]">
  </zn-navbar>

  <!-- This is the content of the first tab / default -->
  <zn-tabs flush primary-caption="Navigation" secondary-caption="Content">

    <!-- This is the Navigation/Header for the Inner set of tabs -->
    <zn-header slot="top"
               caption="Customer"
               description="My Awesome Customer"
               navigation="[{&quot;title&quot;:&quot;Overview&quot;}, {&quot;title&quot;:&quot;Details&quot;, &quot;tab&quot;:&quot;details&quot;}]">
    </zn-header>

    <!--This is the content of the first tab / default inside the first tab -->
    <div>
      <!-- This is where your page content would be defined -->
      <zn-sp>
        <zn-panel caption="Something">Data Points</zn-panel>
        <zn-panel caption="Another Thing">Other Points</zn-panel>
      </zn-sp>
    </div>

    <!--This is the content of the second tab inside the first tab -->
    <div id="details">
      <!-- This is where your page content would be defined -->
      <zn-sp>
        <zn-panel caption="Awesome">this is an example of the details tab</zn-panel>
      </zn-sp>
    </div>
  </zn-tabs>

  <!-- This is the content of the second tab -->
  <div id="2">
    <zn-pane>
      <zn-header slot="top"
                 caption="Customer"
                 description="My Awesome Customer"
                 navigation="[{&quot;title&quot;:&quot;Overview&quot;}, {&quot;title&quot;:&quot;Details&quot;, &quot;tab&quot;:&quot;details&quot;}]">
      </zn-header>
      <!-- This is where your page content would be defined -->
      <zn-sp> <!-- Maybe zn-sp should be defaulted into the content? -->
        <zn-panel caption="Number 2">Something Something Darkside</zn-panel>
      </zn-sp>
    </zn-pane>
  </div>

</zn-tabs>