Light Dark System

Panel

<zn-panel> | ZnPanel
Since 1.0 experimental

Short summary of the component’s intended use.

Awesome example
  • Customer
  • Something Else
    •      Some awesome footer information 
    
<zn-panel caption="Example Panel" description="Full Example of a panel" flush tabbed>

  <!-- All the panel actions -->
  <zn-chip slot="actions" icon="home">Awesome</zn-chip>
  <zn-chip slot="actions" icon="phone" type="info">example</zn-chip>

  <!-- Example panel content -->
  <zn-tabs flush>
    <zn-navbar slot="top">
      <li tab>Customer</li>
      <li tab="something-else">Something Else</li>
    </zn-navbar>

    <zn-sp id="" no-gap divide>
      <zn-inline-edit padded inline caption="Label 1" value="This is Awesome"></zn-inline-edit>
      <zn-inline-edit padded inline caption="Label 2" value="This is Awesome"></zn-inline-edit>
    </zn-sp>

    <zn-sp id="something-else" no-gap divide>
      <zn-inline-edit padded inline caption="Label 3" value="This is not Awesome"></zn-inline-edit>
      <zn-inline-edit padded inline caption="Label 4" value="This is not Awesome"></zn-inline-edit>
    </zn-sp>
  </zn-tabs>

  <!-- Panel Footer -->
  <span slot="footer">
    Some awesome footer information
  </span>
</zn-panel>

    Examples

    Basic Panel

    Basic panels are just that, basic. However, they are a key component in the zn framework as most content is designed around been displayed in a panel.

    Panel Content
     
    <zn-panel caption="Example Panel" description="Simple Panels are the best">
  <div>Panel Content</div>
</zn-panel>

    Flush with Tabs

    flush panels are designed to be used in a layout where the content of the panel needs to take up the entire width of the panel. This can be useful when using other components such as zn-tabs.

    Awesome example
  • Customer
  • Something Else
    •      Some awesome footer information 
    
<zn-panel caption="Example Panel" flush tabbed>

  <!-- All the panel actions -->
  <zn-chip slot="actions" icon="home">Awesome</zn-chip>
  <zn-chip slot="actions" icon="phone" type="info">example</zn-chip>

  <!-- Example panel content -->
  <zn-tabs flush>
    <zn-navbar slot="top">
      <li tab>Customer</li>
      <li tab="something-else">Something Else</li>
    </zn-navbar>

    <zn-sp id="" no-gap divide>
      <zn-inline-edit padded inline caption="Label 1" value="This is Awesome"></zn-inline-edit>
      <zn-inline-edit padded inline caption="Label 2" value="This is Awesome"></zn-inline-edit>
    </zn-sp>

    <zn-sp id="something-else" no-gap divide>
      <zn-inline-edit padded inline caption="Label 3" value="This is not Awesome"></zn-inline-edit>
      <zn-inline-edit padded inline caption="Label 4" value="This is not Awesome"></zn-inline-edit>
    </zn-sp>
  </zn-tabs>

  <!-- Panel Footer -->
  <span slot="footer">
    Some awesome footer information
  </span>
</zn-panel>

    Moving the caption

  • Customer
  • Something Else
    •      Some awesome footer information 
    
<zn-panel flush>

  <!-- Example panel content -->
  <zn-tabs caption="Example Panel">
    <zn-navbar slot="top">
      <li tab>Customer</li>
      <li tab="something-else">Something Else</li>
    </zn-navbar>

    <zn-sp id="" no-gap divide>
      <zn-inline-edit padded inline caption="Label 1" value="This is Awesome"></zn-inline-edit>
      <zn-inline-edit padded inline caption="Label 2" value="This is Awesome"></zn-inline-edit>
    </zn-sp>

    <zn-sp id="something-else" no-gap divide>
      <zn-inline-edit padded inline caption="Label 3" value="This is not Awesome"></zn-inline-edit>
      <zn-inline-edit padded inline caption="Label 4" value="This is not Awesome"></zn-inline-edit>
    </zn-sp>
  </zn-tabs>

  <!-- Panel Footer -->
  <span slot="footer">
    Some awesome footer information
  </span>
</zn-panel>

    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.0/dist/components/panel/panel.js"></script>

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

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

    To import this component using a bundler:

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

    Slots

    Name Description
    (default) The default slot.
    actions The actions slot.
    footer The footer slot.

    Learn more about using slots.

    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.