Introduction

You can change the layout of the tab panes by modifying the markup located in the viewerTemplate.html file by:

• Adding the pcc-tab-vertical class to make the tab pane vertical.

• Adding either a pcc-left or pcc-right class to specify the side on which the vertical tab pane will appear.

  NOTE: Refer to the Customizing the Viewer section for details on using the viewerTemplate.html.

Example

<div class\="tabset pcc-nav-tabset" data-pcc-nav>
   <!-- Tab -->
   <div class\="pcc-tab" data-pcc-nav-tab="demo"\>
       <div class\="pcc-tab-item"\>Demo</div>
       <!-- This tab pane is vertical and left aligned -->
       <div class\="pcc-tab-pane pcc-tab-vertical pcc-left"\>
           <!-- Tab content -->
       </div>
   </div>
   <!-- End tab -->
</div>