Tabs

Tabbable content panels

How To

Step 1: Include LambdaEx Framework in Logi Info Application. Include LambdaEx Framework in Logi Info Application.

Step 2: Include 'Tab.css' in Logi Info Application Include 'Tab.css' in Logi Info Application

Logi Tab Example

Tab 1
Tab 2
Tab 3

Tab 1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

<Tabs ID="tabs">
  <TabPanel Caption="Tab 1" ID="tab1" />
  <TabPanel Caption="Tab 2" ID="tab2" />
</Tabs>

Bootstrap Tab Example

Tab 1

<DataList Class="nav nav-tabs" ID="tabList" Ordered="False">
    <DataLayer ID="sdlUnstyled" Type="Static">
      <StaticDataRow caption="Tab 1" class="active" data-toggle="bsTab1" />
      <StaticDataRow caption="Tab 2" class="" data-toggle="bsTab2" />
      <StaticDataRow caption="Tab 3" class="" data-toggle="bsTab3" />
    </DataLayer>
    <ListItem Class="nav-item">
      <Label Caption="[at]Data.caption[tilde]" Class="nav-link [at]Data.class[tilde]" HtmlTag="a">
        <EventHandler DhtmlEvent="href">
          <Action Javascript="void(0)" Type="Javascript" />
        </EventHandler>
        <EventHandler DhtmlEvent="onclick">
          <Action Javascript="SetTab(this, '[at]Data.data-toggle[tilde]')" Type="Javascript" />
        </EventHandler>
      </Label>
    </ListItem>
  </DataList>
<Division Class="tab-content" HtmlDiv="True">
  <Division Class="tab-pane active" HtmlDiv="True" ID="bsTab1">
    <Label Caption="Tab 1" Class="lead" HtmlTag="P" />
  </Division>
  <Division Class="tab-pane" HtmlDiv="True" ID="bsTab2" ShowModes="None">
    <Label Caption="Tab 2" Class="lead" HtmlTag="P" />
  </Division>
  <Division Class="tab-pane" HtmlDiv="True" ID="bsTab3" ShowModes="None">
    <Label Caption="Tab 3" Class="lead" HtmlTag="P" />
  </Division>
</Division>

/*START INCLUDE SCRIPT ELEMENT...*/
function SetTab(elem, toggleElem) {
   /*remove active from tabs and content*/
   $(elem).closest('ul').find('li>a').removeClass('active').closest('ul').next().find('.tab-pane').hide().removeClass('active');
	
   /*set active on tabs and content*/
   $(elem).addClass('active');
   $('#'+toggleElem).fadeIn('slow').addClass('active');
}
/*...END INCLUDE SCRIPT*/

<Division Class="tabs" HtmlDiv="True" ID="tabs"> <DataList Class="nav nav-tabs" ID="tabList" Ordered="False"> <DataLayer ID="sdlUnstyled" Type="Static"> <StaticDataRow caption="Tab 1" class="active" data-toggle="bsTab1" /> <StaticDataRow caption="Tab 2" class="" data-toggle="bsTab2" /> <StaticDataRow caption="Tab 3" class="" data-toggle="bsTab3" /> </DataLayer> <ListItem Class="nav-item"> <Label Caption="[at]Data.caption[tilde]" Class="nav-link [at]Data.class[tilde]" HtmlTag="a"> <EventHandler DhtmlEvent="href"> <Action Javascript="void(0)" Type="Javascript" /> </EventHandler> <EventHandler DhtmlEvent="onclick"> <Action Javascript="SetTab(this, '[at]Data.data-toggle[tilde]')" Type="Javascript" /> </EventHandler> </Label> </ListItem> </DataList> <Division Class="tab-content" HtmlDiv="True"> <Division Class="tab-pane active" HtmlDiv="True" ID="bsTab1"> <Label Caption="Tab 1" Class="lead" HtmlTag="P" /> </Division> <Division Class="tab-pane" HtmlDiv="True" ID="bsTab2" ShowModes="None"> <Label Caption="Tab 2" Class="lead" HtmlTag="P" /> </Division> <Division Class="tab-pane" HtmlDiv="True" ID="bsTab3" ShowModes="None"> <Label Caption="Tab 3" Class="lead" HtmlTag="P" /> </Division> </Division> <IncludeScript IncludedScript="function SetTab(elem, toggleElem) {
 /*remove active from tabs and content*/
 $(elem).closest('ul').find('li>a').removeClass('active').closest('ul').next().find('.tab-pane').hide().removeClass('active');
 
 /*set active on tabs and content*/
 $(elem).addClass('active');
 $('#'+toggleElem).fadeIn('slow').addClass('active');
}" /> </Division>