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
<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
<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
<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
Name | Description |
---|---|
toggle | Toggle the visibility of the sidebar. |
Properties Sidebar
Name | Type | Default | Description | Options |
---|---|---|---|---|
dock | boolean | false | Property to set if sidebar will be "docked" or not; | true | false |
dockWidth | number | 80 | Width of docked sidebar. | any number |
mode | string | slide | The mode of sidebar animation. | push | over | slide |
opened | boolean | false | Property that sets opened sidebar. | true | false |
position | string | start | Horizontal Position of sidebar. | start | end |
width | number | 300 | Width of sidebar box. | any number |
Properties Sidebar Content
Name | Type | Default | Description | Options |
---|---|---|---|---|
height | string | 100% | Height of sidebar content. | px | % |
Events
Name | Parameters | Description |
---|---|---|
close | Returned when sidebar is closed. | |
open | Returned when sidebar is opened. | |
openedChange | event.opened : Opened property, true | false | Returns the value of property [opened] changed by two-way data binding. |