Ninja-splitter NPM

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