Sidebar Module Name: SidebarModule

Module Name: SidebarModule

A sidebar hides additional content beside a page.

Showcase
Push Usage
<tl-sidebar-container>
    <tl-sidebar [position]="'start'" [mode]="'push'">
      <!-- Sidebar Start Content -->
    </tl-sidebar>
    <tl-sidebar-content [height]="'300px'">
      <!-- Content -->
    </tl-sidebar-content>
    <tl-sidebar [position]="'end'" [mode]="'push'">
      <!-- Sidebar End Content -->
    </tl-sidebar>
</tl-sidebar-container>
Slide Usage
Toggle Left
Toggle Right

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

<tl-sidebar-container>
  <tl-sidebar [position]="'start'" [mode]="'slide'">
    <!-- Sidebar Start Content -->
  </tl-sidebar>
  <tl-sidebar-content [height]="'300px'">
    <!-- Content -->
  </tl-sidebar-content>
  <tl-sidebar [position]="'end'" [mode]="'slide'">
    <!-- Sidebar End Content -->
  </tl-sidebar>
</tl-sidebar-container>
Dock Usage
Toggle Left
Toggle Right

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

<div class="trigger left-right" (click)="sidebar.toggle()"></div>
<tl-sidebar-container #sidebar>
  <tl-sidebar [position]="'start'" [mode]="'slide'" [dock]="true">
    <!-- Sidebar Start Content -->
  </tl-sidebar>
  <tl-sidebar-content [height]="'300px'">
    <!-- Content -->
  </tl-sidebar-content>
  <tl-sidebar [position]="'end'" [mode]="'slide'">
    <!-- Sidebar End Content -->
  </tl-sidebar>
</tl-sidebar-container>
Over Usage
Toggle Left
Toggle Right

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

<tl-sidebar-container>
  <tl-sidebar [position]="'start'" [mode]="'over'" [dock]="true">
    <!--Sidebar Start Content-->
  </tl-sidebar>
  <tl-sidebar-content [height]="'300px'">
    <!-- Content-->
  </tl-sidebar-content>
  <tl-sidebar [position]="'end'" [mode]="'slide'">
   <!-- Sidebar End Content-->
  </tl-sidebar>
</tl-sidebar-container>
Methods
NameDescription
toggleToggle the visibility of the sidebar.
Properties Sidebar
NameTypeDefaultDescriptionOptions
dockbooleanfalseProperty to set if sidebar will be "docked" or not; true | false
dockWidthnumber80Width of docked sidebar. any number
modestringslideThe mode of sidebar animation. push | over | slide
openedbooleanfalseProperty that sets opened sidebar. true | false
positionstringstartHorizontal Position of sidebar. start | end
widthnumber300Width of sidebar box. any number
Properties Sidebar Content
NameTypeDefaultDescriptionOptions
heightstring100%Height of sidebar content. px | %
Events
NameParametersDescription
closeReturned when sidebar is closed.
openReturned when sidebar is opened.
openedChange
event.opened : Opened property, true | false
Returns the value of property [opened] changed by two-way data binding.