nsp

ng2-split-pane-patch

Split View module for Angular 2

Showing:

Popularity

Downloads/wk

7

GitHub Stars

44

Maintenance

Last Commit

4yrs ago

Contributors

10

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

ng2-split-pane

npm version

Split View module for Angular 2

See an example on plnkr here

I should be pretty easy to use (hopefully), you can ether have a horizontal-split-pane or a vertical-split-pane

Install


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

$ npm install ng2-split-pane

These can take 3 optional configuration values;

KeyRangeDoes
primary-component-minsizevalue in pixelsOnly allow the primary pane (either top or left) to go as small as this
secondary-component-minsizevalue in pixelsOnly allow the secondary pane (either bottom or right) to go as small as this
separator-thicknessvalue in pixels (7 by default)The thickness of the separator between the primary and secondary components
primary-component-toggled-offboolean true or false (false by default)Hide the primary component and the separator
secondary-component-toggled-offboolean true or false (false by default)Hide the secondary component and the separator
secondary-component-minsizevalue in pixelsOnly allow the secondary pane (either bottom or right) to go as small as this
primary-component-initialratioinitial 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-keystring value used as the keyIf this value is present, uses this key withing localstorage to remember the position of the divider bar
<horizontal-split-pane
    primary-component-minsize="50"
    secondary-component-minsize="100"
    [primary-component-toggled-off]="false"
    [secondary-component-toggled-off]="someCondition"
    local-storage-key="split-pane"
    primary-component-initialratio="0.8">

    <div class="split-pane-content-primary">
        <div class="upper">
            Upper pane
        </div>
    </div>

    <div class="split-pane-content-secondary">
        <div class="lower">
            Lower pane
        </div>
    </div>

</horizontal-split-pane>

Import

// Pleas note the module is no in the root
import { SplitPaneModule } from 'ng2-split-pane/lib/ng2-split-pane';

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

Events

(on-change) - emitted when a change in the size of the component happens

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

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100