@swivel/ui/elements/panel-container

PanelContainer

The ui-panel-container element creates a generic customizable template element that allows users to switch between different content panels using a set of predefined triggers.

In most cases you will probably want to use the Tabs or Wizard elements instead of the generic PanelContainer. However, the PanelContainer element is the base class used by both, the Tabs and Wizard elements.


    <ui-panel-container>
      <div data-part="triggers">
        <span data-part="trigger">Panel 1</span>
        <span data-part="trigger">Panel 2</span>
        <span data-part="trigger">Panel 3</span>
        <span data-part="trigger" aria-disabled="true">Panel 4</span>
      </div>
      <div data-part="panels">
        <div data-part="panel">Content 1</div>
        <div data-part="panel">Content 2</div>
        <div data-part="panel">Content 3</div>
        <div data-part="panel">Content 4</div>
      </div>
    </ui-panel-container>

The ui-panel-container element:

has a current property, which sets the currently displayed panel by its index,
has a animated property, which will turn animations on or off,
and dispatches a ui-panel-changed event when its current panel is changed through user interaction

Plain HTML Example

This example shows a panel container using plain HTML and no data-binding or templating. The trigger elements can be an arbitrary element and appropriate click and keydown handlers will be added automatically. The order of the triggers correlates with the order of the panels which are controlled by each trigger.

Panel 1 Panel 2 Panel 3 Panel 4

Content 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio dolore consectetur nihil nam dolorem eius eligendi, amet ipsa veniam provident temporibus quam laborum impedit nemo at suscipit et iure quia.

Content 2

Content 3

Content 4

PanelChangeEvent

Wizard

The ui-wizard element extends the ui-panel-container element and therefore provides the same inputs and events.

The main difference of the ui-wizard is, that it will add additional aria attributes to the panel and trigger elements inside of the wizard to mark them as navigation links which are tied to a step in a process.

When using the ui-wizard in an app, make sure to include both the:

@swivel-fnace/ui/elements/panel-container/panel-container.css and
@swivel-fnace/ui/elements/wizard/wizard.css

styles, as the ui-panel-container base styles setup the basic panel layout as well as animations.

Usage


    <ui-wizard>

      <nav class="step-navigation" aria-label="Transaction Steps">
        <ul class="step-list" data-part="triggers">
          <li class="step-link"><a data-part="trigger" href="#">Select a Position</a></li>
          <li class="step-link"><a data-part="trigger" href="#" aria-disabled="true">Transaction Preview</a></li>
          <li class="step-link"><a data-part="trigger" href="#" aria-disabled="true">Transaction Result</a></li>
        </ul>
      </nav>

      <div class="step-container" data-part="panels">

        <div class="step-panel" data-part="panel">
          <h3>Select a position</h3>
        </div>

        <div class="step-panel" data-part="panel">
          <h3>Transaction Preview</h3>
        </div>

        <div class="step-panel" data-part="panel">
          <h3>Transaction Result</h3>
        </div>

      </div>

    </ui-wizard>

Example

Tabs

The ui-tabs element extends the ui-panel-container element and therefore provides the same inputs and events. In addition, the ui-tabs element:

has a orientation property, which sets the navigation direction and layout for the tablist;
allowed values are horizontal (default) and vertical

The ui-tabs element adds additional keyboard navigation behavior to the tablist, to allow users to navigate between tabs by using the arrow keys on their keyboard.

When using the ui-tabs in an app, make sure to include both the:

@swivel-fnace/ui/elements/panel-container/panel-container.css and
@swivel-fnace/ui/elements/tabs/tabs.css

styles, as the ui-panel-container base styles setup the basic panel layout as well as animations.

Usage


    <ui-tabs>

      <div class="tab-list" data-part="triggers">
        <button class="tab" data-part="trigger">Tab One</button>
        <button class="tab" data-part="trigger">Tab Two</button>
      </div>

      <div class="tab-container" data-part="panels">

        <div class="tab-panel" data-part="panel">
          <h3>Tab One</h3>
        </div>

        <div class="tab-panel" data-part="panel">
          <h3>Tab Two</h3>
        </div>

      </div>

    </ui-tabs>