Slide In Panel

Quickly show side content, notifications or profile information.

How To

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

Step 2: Include Sidebar in Logi Info Application Include Sidebar in Logi Info Application

Example

Use .from-right to slide in from the right. Use .from-left to slide in (guess what?) from the left.

Filter

<Division Class="cd-main-content" HtmlDiv="True">
  <Button Caption="Left Flyout" Class="cd-btn">
    <Action Javascript="$('.cd-panel.from-left').addClass('is-visible');" Type="Javascript" />
  </Button>
</Division>
<Division Class="cd-panel from-right" HtmlDiv="True">
  <Division Class="cd-panel-header" HtmlDiv="True">
    <Label Caption="Title Goes Here" HtmlTag="H4" />
    <Label Class="cd-panel-close">
      <Action Javascript="void(0)" Type="Javascript" />
    </Label>
  </Division>
  <Division Class="cd-panel-container" HtmlDiv="True">
    <Division Class="cd-panel-content" HtmlDiv="True">
      <Label Caption="Content Goes Here" />
    </Division>
  </Division>
</Division>

/*START INCLUDE SCRIPT ELEMENT...*/
$(document).ready(function($){
  //clode the lateral panel
  $('.cd-panel').on('click', function(event){
    if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) { 
      $('.cd-panel').removeClass('is-visible');
      event.preventDefault();
    }
  });
});
/*...END INCLUDE SCRIPT*/

Title Goes Here

Content Goes Here

Title Goes Here

Content Goes Here