mng / ngx-resizable

Resizable Split Pane Layout
https://3dgenomes.github.io/ngx-resizable/
MIT License
22 stars 15 forks source link
angular layout pane resizable split

Resizable Split Pane Layout

This has been adapted from the @11mb/angular-resizable, itself an Angular2 version of @reklino/angular-resizable for AngularJS. Similar work in JavaScript: @RickStrahl/jquery-resizable; Split.js by @nathancahill.

Usage

Checkout and fork these examples (see also explanations below):

StackBlitz - Default Horizontal Layout (HTML-like table rows)

StackBlitz - Vertical/Columns Layout !

Installation instructions

Install ngx-bootstrap from npm:

npm install @3dgenomes/ngx-resizable --save

Add needed package to NgModule imports:

import { NgxResizableModule } from '@3dgenomes/ngx-resizable';

@NgModule({
  ...
  imports: [NgxResizableModule,...]
  ...
})

Use component <rsz-layout> to your HTML:

Default layout - HTML-like table rows:

        +--------+--------+
        |        >        |    [Directions]
  Row 1 | Cell 1 > Cell 2 |    Rows: dragbar on bottom 'v'
        |        >        |    Cells: dragbar on right '>'
        + v v v v v v v v + 
        |        >        |
  Row 2 | Cell 3 > Cell 4 |
        |        >        |
        +--------+--------+
<div class="content">
  <rsz-layout class="row" [directions]="['bottom']" [rFlex]="true">
    <rsz-layout class="cell" [directions]="['right']" [rFlex]="true">
      <p>Cell Content 1</p>
    </rsz-layout>
    <rsz-layout class="cell" [directions]="['none']" [rFlex]="false">
      <p>Cell Content 2</p>
    </rsz-layout>
  </rsz-layout>
  <rsz-layout class="row" [directions]="['none']" [rFlex]="false">
    <rsz-layout class="cell" [directions]="['right']" [rFlex]="true">
      <p>Cell Content 3</p>
    </rsz-layout>
    <rsz-layout class="cell" [directions]="['none']" [rFlex]="false">
      <p>Cell Content 4</p>
    </rsz-layout>
  </rsz-layout>
</div>

Columns layout:

    Col 1     Col 2
  +--------+--------+
  |        >        |    [Directions]
  | Cell 1 > Cell 3 |    Rows: dragbar on right '>'
  |        >        |    Cells: dragbar on bottom 'v'
  | v v v  >  v v v |
  |        >        |
  | Cell 2 > Cell 4 |
  |        >        |
  +--------+--------+
        Drag bar
  <div class="content cols">
    <rsz-layout class="row" [directions]="['right']" [rFlex]="true">
      <rsz-layout class="cell" [directions]="['bottom']" [rFlex]="true">
        <p>Cell Content 1</p>
      </rsz-layout>
      <rsz-layout class="cell" [directions]="['none']" [rFlex]="false">
        <p>Cell Content 2</p>
      </rsz-layout>
    </rsz-layout>
    <rsz-layout class="row" [directions]="['none']" [rFlex]="false">
      <rsz-layout class="cell" [directions]="['bottom']" [rFlex]="true">
        <p>Cell Content 3</p>
      </rsz-layout>
      <rsz-layout class="cell" [directions]="['none']" [rFlex]="false">
        <p>Cell Content 4</p>
      </rsz-layout>
    </rsz-layout>
  </div>

Options

Attributes Default Accepts Description
rDirections ['right'] ['top', 'right', 'bottom', 'left',] Determines which sides of the element are resizable.
rFlex false boolean Set as true if you are using flexbox on a cell.

Events

angular-resizable.resizeStart

This event is emitted at the beginning of a resize with the following info object:

angular-resizable.resizing

Called repeatedly while the mouse is being moved. By default, only calls once every 100ms to keep CPU usage low.

angular-resizable.resizeEnd

This event is emitted at the end of a resize with the following object as an argument:

Changelog

1.8.1

1.7.5

1.7.4

1.7.3

1.7.2

1.7.1

Demo Version notes

1.0.4

License

MIT

Development

This project was generated with Angular CLI.

Demo app development server

Run ng s for a dev server. Navigate to http://localhost:4200/. The demo app will automatically reload if you change any of the source files.

Build using package script

Run npm run package to build the project. The build artifacts and NPM tarball will be stored in the dist/ directory. The demo app will be stored in the docs/ directory and automatically published to https://3dgenomes.github.io/ngx-resizable/ when pushed to GitHub.

Publishing to NPM

After building and commit/push/merge to Github:

  1. update the version notes in the root README.md
  2. update the version number in the library: projects/ngx-resizable/package.json
  3. login to npm: npm login (check if already loggedin using npm whoami)
  4. publish on npm: npm publish ./dist/ngx-resizable/3dgenomes-ngx-resizable-1.8.1.tgz --access public.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.