# ng2-split-pane-patch

> A simple resizable split pane Angular 2 library

Latest version **12.1.0** (published 2021-06-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install ng2-split-pane-patch
pnpm add ng2-split-pane-patch
yarn add ng2-split-pane-patch
bun add ng2-split-pane-patch
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 12.1.0 |
| Published | 2021-06-28 |
| First published | 2017-11-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 62.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 43 |
| Author | Tom Fewster |
| Maintainers | lautarobock |
| Keywords | Angular, 2, Library, Split, Split View, Split Pane |

## Links

- npm: https://www.npmjs.com/package/ng2-split-pane-patch
- Repository: https://github.com/wannabegeek/ng2-split-pane
- Homepage: https://github.com/wannabegeek/ng2-split-pane/#readme
- Issues: https://github.com/wannabegeek/ng2-split-pane/issues
- npm.io page: https://npm.io/package/ng2-split-pane-patch

## Alternatives

- [byte-size](https://npm.io/package/byte-size.md) — 2.1M weekly downloads
- [speed-limiter](https://npm.io/package/speed-limiter.md) — 16.0K weekly downloads
- [@powersync/node](https://npm.io/package/@powersync/node.md) — 10.9K weekly downloads
- [@ledgerhq/coin-cardano](https://npm.io/package/@ledgerhq/coin-cardano.md) — 1.0K weekly downloads
- [@jayesol/jayeson.lib.streamfinder](https://npm.io/package/@jayesol/jayeson.lib.streamfinder.md) — 1.0K weekly downloads

## Recent versions

- 12.1.0 (latest) — 2021-06-28
- 10.0.4 — 2020-11-17
- 10.0.3 — 2020-11-17
- 10.0.2 — 2020-11-17
- 10.0.1 — 2020-11-17
- 10.0.0 — 2020-11-17
- 9.0.4 — 2020-02-19
- 9.0.3 — 2020-02-19
- 9.0.2 — 2020-02-19
- 9.0.1 — 2020-02-19
- 1.3.2 — 2017-11-10

## README

# ng2-split-pane

[![npm version](https://badge.fury.io/js/ng2-split-pane.svg)](https://www.npmjs.com/package/ng2-split-panehttps://badge.fury.io/js/ng2-split-pane.sv://plnkr.co/bxgcK29PNl9lexw6z6Ym)

Split View module for Angular 2

See an example on [plnkr here](https://plnkr.co/bxgcK29PNl9lexw6z6Ym)

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](https://github.com/wannabegeek/ng2-split-pane/archive/master.zip)
the whole project or install it via NPM:

```bash
$ 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


```javascript
<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**
```typescript
// 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

---
_Source: https://npm.io/package/ng2-split-pane-patch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._