Formatting: Tab


About

Formatting Tab is an HTML format for displaying content with a Tab system - (Demo).



Specification




Configuration



Description

box
Value Preview
none View
border View
shadow View

initial-opened
Sets the Tab Item that will be opened in initial state. The value can be the Tab Title or Tab Order.



Usage

  1. Define HTML with the following format: 

            
<div class='w-tab'>
  <div title='TAB TITLE 1'>
    TAB 1 Content...
  </div>
  <div title='TAB TITLE 2'>
    TAB 2 Content...
  </div>
</div>

    TAB 1 Content...
    TAB 2 Content...
    • Tab Item (element with title attribute) must use the DIV tag.
    • The title attribute on the tab item is mandatory.
    • In the HTML above, no configurations have been added. All configurations will take Default Values.


  2. Add the desired configuration by adding the attribute
    data-configuration-name='Value' to the element with the class w-tab.

    Example: 
            
<div class='w-tab' data-box='shadow'>
  <div title='TAB TITLE 1'>
    TAB 1 Content...
  </div>
  <div title='TAB TITLE 2'>
    TAB 2 Content...
  </div>
</div>

    TAB 1 Content...
    TAB 2 Content...


  3. Configuration initial-opened
    This configuration value can be Title or Order of the Tab Item.

    Example based on title: 
            
<div class='w-tab' data-initial-opened='TAB TITLE 2' data-box='border'>
  <div title='TAB TITLE 1'>
    TAB 1 Content...
  </div>
  <div title='TAB TITLE 2'>
    TAB 2 Content...
  </div>
</div>

    TAB 1 Content...
    TAB 2 Content...


    NOTE: The value in the configuration and the tab title must match exactly, including the use of uppercase and lowercase letters.


    Example based on order: 
            
<div class='w-tab' data-initial-opened='2' data-box='border'>
  <div title='TAB TITLE 1'>
    TAB 1 Content...
  </div>
  <div title='TAB TITLE 2'>
    TAB 2 Content...
  </div>
</div>

    TAB 1 Content...
    TAB 2 Content...
Have Question?