Ng-sidebar-accordion NPM

ng-sidebar-accordion

An Angular sidebar accordion component.

Installation

npm install ng-sidebar-accordion

Changelog

See the releases page on GitHub.

Usage

Add SidebarAccordionModule to your app module

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {SidebarAccordionModule} from 'ng-sidebar-accordion';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    SidebarAccordionModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

In your app component, simply use add a <ng-sidebar-accordion> wrapper, then place your <ng-sidebar>(s) and content within it. Your page content should be in container <ng-sidebar-accordion-content>.

@Component({
  selector: 'app',
  template: `
    <!-- Container for sidebar(s) + page content -->
    <ng-sidebar-accordion #accordion>
      <!-- A sidebar -->
      <ng-sidebar position="right" [opened]="true">
        <ng-sidebar-header>
          <div>
            <div>right-pane0-header-row1</div>
            <div>right-pane0-header-row2</div>
          </div>
        </ng-sidebar-header>
        
        <ng-sidebar-content>
          right-pane0-content
        </ng-sidebar-content>
      </ng-sidebar>

      <!-- Page content -->
      <ng-sidebar-accordion-content>
        <button
          (click)="accordion.open('right')">
          open
        </button>
        <button
          (click)="accordion.close('right')">
          close
        </button>
      </ng-sidebar-accordion-content>
    </ng-sidebar-accordion>
  `
})
class AppComponent {  
}

Functions

The SidebarAccordion has a few public functions:

Function	Description
`open(position, index)`	Opens sidebars. positions - ('all', 'left', 'top', 'right', 'bottom'); index - position the side panel
`close(position)`	Closes sidebars. positions - ('all', 'left', 'top', 'right', 'bottom');
`getSidebarIndex(sidebar)`	returns the index of the sidebar in an array of a specific position.

The Sidebar has a few public functions:

Function	Description
`open()`	Opens this sidebar.
`close()`	Closes this sidebar.

Styling

Various class names are attached to the sidebar and container for easier styling.

SidebarAccordion

Class name	Description
`ng-sidebar-accordion`	Always present on the container element.
`ng-sidebar-accordion__left-pane`	Always present on the element where panels are placed on the left edge.
`ng-sidebar-accordion__top-pane`	Always present on the element where panels are placed at the top edge.
`ng-sidebar-accordion__right-pane`	Always present on the element where panels are placed on the right edge.
`ng-sidebar-accordion__bottom-pane`	Always present on the element where panels are placed along the bottom edge.
`ng-sidebar-accordion__left-pane_resizable`	Appears when resizing the panel is allowed. Left pane.
`ng-sidebar-accordion__top-pane_resizable`	Appears when resizing the panel is allowed. Top pane.
`ng-sidebar-accordion__right-pane_resizable`	Appears when resizing the panel is allowed. Right pane.
`ng-sidebar-accordion__bottom-pane_resizable`	Appears when resizing the panel is allowed. Bottom pane.
`ng-sidebar-accordion__left-pane_over`	Appears when panel mode is set to`over'. Left pane.
`ng-sidebar-accordion__top-pane_over`	Appears when panel mode is set to`over'. Top pane.
`ng-sidebar-accordion__right-pane_over`	Appears when panel mode is set to`over'. Right side.
`ng-sidebar-accordion__bottom-pane_over`	Appears when panel mode is set to`over'. Bottom pane.
`ng-sidebar-accordion-content`	Always present on the element where the main content is placed.
`ng-sidebar-accordion__gutter-horizontal`	Appears when resizing the panel is allowed.
`ng-sidebar-accordion__gutter-vertical`	Appears when resizing the panel is allowed.

Sidebar

Class name	Description
`ng-sidebar`	Sidebar element.
`ng-sidebar-header`	The title of the sidebar.
`ng-sidebar-header__content`	Content of the sidebar header.
`ng-sidebar-content`	Contents of the sidebar.
`ng-sidebar_opened`	Appears when the sidebar is open.

All the above classes are always present on the element.

Options

`<ng-sidebar-accordion>`

Inputs

Property name	Type	Default	Description
`width`	string		Width of the component.
`height`	string		Height of the component.
`className`	string		Css class.
`sidebarResizable`	boolean	false	A flag that specifies whether or not the sidebar can be resized.

Outputs

Property name	Callback arguments	Description
`sidebarResizableBegin`	position	Emitted when the sidebar size change starts.
`sidebarResizableEnd`	position	Emitted when the sidebar size change ends.
`sidebarOpenedChange`	SidebarComponent	Emitted when sidebar state changes.

position: 'left', 'right', 'top', 'bottom'

`<ng-sidebar>`

Inputs

Property name	Type	Default	Description
`position`	'left', 'right', 'top', 'bottom'		The position where to place the sidebar.
`className`	string		Css class.
`opened`	boolean	false	State sidebar.
`pinned`	boolean	false	Pin the sidebar

Outputs

Property name	Callback arguments	Description
`openedChange`	`{ sender: SidebarComponent, opened: boolean }`	Emitted when the sidebar state changes.
`headerClicked`	`SidebarComponent`	Emitted when the sidebar header clicked.
`headerTouchMoved`	`SidebarMouseTouchEventArgs`	Emitted when the sidebar header touch moved
`headerTouchEnded`	`SidebarMouseTouchEventArgs`	Emitted when the sidebar header touch ended