ninja-splitter

Splitter component for Angular 9+

Inspired by https://github.com/wannabegeek/ng2-split-pane. (Can be used up to Angular 8)

There are 2 types of split panes: horizontal-ninja and vertical-ninja

Install

---

You can either download the whole project or install it via NPM:

$ npm install ninja-splitter

---

The following configuration properties are available to client code:

Key	Range	Does
primary-minsize	value in pixels	Minimal allowed size for primary pane
secondary-minsize	value in pixels	Minimal allowed size for secondary pane
separator-width-px	value in pixels (5 by default)	The thickness of the separator between the primary and secondary components
primary-component-toggle	boolean true or false (false by default)	Hide the primary component and the separator
secondary-component-toggle	boolean true or false (false by default)	Hide the secondary component and the separator
primary-component-initialratio	initial value in a ratio of primary/secondary (range 0-1)	The initial size to create the primary pane (secondary will fill the remaining), this value will be over-ridden if a value is found in the local storage.
local-storage-key	string value used as the local storage key key	If this value is present the current splitter position will be stored in local storage

Styling

---

You can define the following css variables to override default styling:

CSS-variable	Responsible for	Default
--ninja-separator-background-color	Background color of the separator HTML element	#fff
--ninja-separator-hover-background-color	Hover background color of the separator HTML element	#fafafa
--ninja-separator-hcursor	Horizontal separator cursor	ns-resize
--ninja-separator-vcursor	Vertical separator cursor	ew-resize

Example

---

<horizontal-ninja
    primary-minsize="50"
    secondary-minsize="100"
    [primary-component-toggle]="false"
    [secondary-component-toggle]="condition"
    local-storage-key="ninja"
    primary-component-initialratio="0.8">

    <div class="ninja-content-primary">
        <span>
            Upper pane
        </span>
    </div>

    <div class="ninja-content-secondary">
        <span>
            Lower pane
        </span>
    </div>

</horizontal-ninja>

Import

// Please note the module is not in the root
import { NinjaSplitterModule } from 'ninja-splitter';

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

Events

(on-change) - emitted on resizing

(on-begin-resizing) - emitted when the user begins dragging the separator

(on-ended-resizing) - emitted when the user releases the separator after dragging