Have ideas to improve npm?Join in the discussion! »

    ngx-resizable-ex
    TypeScript icon, indicating that this package has built-in type declarations

    1.7.3 • Public • Published

    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

    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: [ResizableComponent,...]
      ...
    })
    

    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:

    • info.width : The width of the directive at time of resize start. Will be false if resizing vertically
    • info.height : The height of the directive at time of resize start. Will be false if resizing horizontally
    • info.id : The id of the directive. Will be false if there is no id set.
    • info.evt : original mouse event object

    angular-resizable.resizing

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

    • info.width : The width of the directive at time of resize end. Will be false if resizing vertically
    • info.height : The height of the directive at time of resize end. Will be false if resizing horizontally
    • info.id : The id of the directive. Will be false if there is no id set.
    • info.evt : original mouse event object

    angular-resizable.resizeEnd

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

    • info.width : The width of the directive at time of resize end. Will be false if resizing vertically
    • info.height : The height of the directive at time of resize end. Will be false if resizing horizontally
    • info.id : The id of the directive. Will be false if there is no id set.
    • info.evt : original mouse event object

    Version notes

    1.0.1

    • Add README.md
    • Export component via public_api.ts

    License

    MIT

    Install

    npm i ngx-resizable-ex

    DownloadsWeekly Downloads

    3

    Version

    1.7.3

    License

    MIT

    Unpacked Size

    189 kB

    Total Files

    32

    Last publish

    Collaborators

    • avatar