ng-sidebar-accordion

An Angular sidebar accordion component.

Demo

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 toover'. Left pane. | | ng-sidebar-accordion__top-pane_over | Appears when panel mode is set toover'. Top pane. | | ng-sidebar-accordion__right-pane_over | Appears when panel mode is set toover'. Right side. | | ng-sidebar-accordion__bottom-pane_over | Appears when panel mode is set toover'. 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 |

<ng-sidebar-settings>

Used to configure sidebar mode

Inputs

| Property name | Type | Default | Description | | ------------- | ---- | ------- | ----------- | | position | 'left', 'right', 'top', 'bottom' | The sidebar position for which settings are applied. | | mode | 'push', 'over' | Sidebars mode. |

Outputs

| Property name | Callback arguments | Description | | ------------- | ------------------ | ----------- | | modeChange | SidebarSettingsComponent | Emitted when the mode is change. | | positionChange | SidebarSettingsComponent | Emitted when the position is change. |