ng2-split-pane

WebJar for ng2-split-pane

License	MIT
Categories	Github Development Tools Version Controls
GroupId	org.webjars.npm
ArtifactId	github-com-wannabegeek-ng2-split-pane
Last Version	1.3.1
Release Date	Sep 28, 2017
Type	jar
Description	ng2-split-pane WebJar for ng2-split-pane
Project URL	http://webjars.org
Source Code Management	https://github.com/wannabegeek/ng2-split-pane

Download github-com-wannabegeek-ng2-split-pane

Filename	Size
github-com-wannabegeek-ng2-split-pane-1.3.1.pom
github-com-wannabegeek-ng2-split-pane-1.3.1.jar	14 KB
github-com-wannabegeek-ng2-split-pane-1.3.1-sources.jar	22 bytes
github-com-wannabegeek-ng2-split-pane-1.3.1-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/github-com-wannabegeek-ng2-split-pane/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>github-com-wannabegeek-ng2-split-pane</artifactId>
    <version>1.3.1</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/github-com-wannabegeek-ng2-split-pane/
implementation 'org.webjars.npm:github-com-wannabegeek-ng2-split-pane:1.3.1'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/github-com-wannabegeek-ng2-split-pane/
implementation ("org.webjars.npm:github-com-wannabegeek-ng2-split-pane:1.3.1")

Apache Buildr

'org.webjars.npm:github-com-wannabegeek-ng2-split-pane:jar:1.3.1'

Apache Ivy

<dependency org="org.webjars.npm" name="github-com-wannabegeek-ng2-split-pane" rev="1.3.1">
  <artifact name="github-com-wannabegeek-ng2-split-pane" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='github-com-wannabegeek-ng2-split-pane', version='1.3.1')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "github-com-wannabegeek-ng2-split-pane" % "1.3.1"

Leiningen

[org.webjars.npm/github-com-wannabegeek-ng2-split-pane "1.3.1"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

ng2-split-pane

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;

Key	Range	Does
primary-component-minsize	value in pixels	Only allow the primary pane (either top or left) to go as small as this
secondary-component-minsize	value in pixels	Only allow the secondary pane (either bottom or right) to go as small as this
separator-thickness	value in pixels (7 by default)	The thickness of the separator between the primary and secondary components
primary-component-toggled-off	boolean true or false (false by default)	Hide the primary component and the separator
secondary-component-toggled-off	boolean true or false (false by default)	Hide the secondary component and the separator
secondary-component-minsize	value in pixels	Only allow the secondary pane (either bottom or right) to go as small as this
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 key	If 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

Versions

Version
1.3.1 Sep 28, 2017