Sidebar api
NbSidebarComponent
Inputs
| Name | Type | Description |
| collapsedBreakpoints | string[] | Controls on which screen sizes sidebar should be switched to collapsed state.
Works only when responsive mode is on.
Default values are |
| compactedBreakpoints | string[] | Controls on which screen sizes sidebar should be switched to compacted state.
Works only when responsive mode is on.
Default values are |
| tag | string | Tags a sidebar with some ID, can be later used in the sidebar service to determine which sidebar triggered the action, if multiple sidebars exist on the page. |
| containerFixed | boolean | Makes sidebar container fixed |
| end | boolean | Places sidebar on the end edge of layout |
| fixed | boolean | Makes sidebar fixed (shown above the layout content) |
| left | boolean | Places sidebar on the left side |
| responsive | boolean | Makes sidebar listen to media query events and change its behaviour |
| right | boolean | Places sidebar on the right side |
| start | boolean | Places sidebar on the start edge of layout |
| state | string | Initial sidebar state, |
Outputs
| Name | Type | Description |
| responsiveStateChange | EventEmitter<undefined> | Emits whenever sidebar responsive state change. |
| stateChange | EventEmitter<undefined> | Emits whenever sidebar state change. |
Properties
| Name | Type | Description |
| RESPONSIVE_STATE_MOBILE | string | |
| RESPONSIVE_STATE_PC | string | |
| RESPONSIVE_STATE_TABLET | string | |
| STATE_COLLAPSED | string | |
| STATE_COMPACTED | string | |
| STATE_EXPANDED | string |
Methods
| Name | Description |
| collapse() | returns: voidCollapses the sidebar |
| compact() | returns: voidCompacts the sidebar (minimizes) |
| expand() | returns: voidExpands the sidebar |
| toggle() | parameters: compact: returns:booleanvoidToggles sidebar state (expanded|collapsed|compacted) |
NbSidebarService
Methods
| Name | Description |
| collapse() | parameters: tag: returns:stringvoidCollapses a sidebar |
| compact() | parameters: tag: returns:stringvoidMakes sidebar compact |
| expand() | parameters: tag: returns:stringvoidExpands a sidebar |
| getSidebarResponsiveState() | parameters: tag: returns:stringObservable<NbSidebarResponsiveState>Returns sidebar state observable which emits once |
| getSidebarState() | parameters: tag: returns:stringObservable<NbSidebarState>Returns sidebar state observable which emits once |
| onCollapse() | returns: Observable<{ tag: string }>
Subscribe to collapse evens |
| onCompact() | returns: Observable<{ tag: string }>
Subscribe to compact evens |
| onExpand() | returns: Observable<{ tag: string }>
Subscribe to expand events |
| onToggle() | returns: Observable<{ compact: boolean, tag: string }>
Subscribe to toggle events |
| toggle() | parameters: compact: returns:boolean, tag: stringvoidToggle a sidebar |
Need some help or found an issue?
Ask on Stack Overflow with tag `nebular` or post an issue on GitHub.