Nevertheless Published Mine

    ng-sidebar-accordion
    TypeScript icon, indicating that this package has built-in type declarations

    4.0.0 • Public • Published

    ng-sidebar-accordion

    NPM

    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 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

    <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.

    Install

    npm i ng-sidebar-accordion

    DownloadsWeekly Downloads

    25

    Version

    4.0.0

    License

    MIT

    Unpacked Size

    364 kB

    Total Files

    29

    Last publish

    Collaborators

    • alexey.gladilin