@3dgenomes/ngx-resizable 中文文档教程

Question

Resizable Split Pane Layout

这改编自 @11mb/angular-resizable，它本身是 @reklino/angular-resizable 用于 AngularJS。 JavaScript 中的类似工作：@RickStrahl/jquery-resizable； Split.js 作者：@nathancahill .

Usage

安装说明 从 npm 安装 ngx-bootstrap：

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

将所需的包添加到 NgModule 导入：

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

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

使用组件 到您的 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

此事件在调整大小开始时使用以下信息对象发出：已

• 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

调用移动鼠标时重复。 默认情况下，每 100 毫秒仅调用一次以保持较低的 CPU 使用率。

• 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

此事件在调整大小结束时发出，使用以下对象作为参数：

• 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

Library Version notes

1.8.0

• Update to Angular 8

1.7.5

• Correct NPM upload

1.7.4

• Update packaging

1.7.3

• Update deps to fix TAR security

1.7.2

• Fix aot compile issue since window does not exist

1.7.1

• Add README.md
• Export component via public-api.ts

Demo Version notes

1.0.4

• Update version display

License

MIT

Development

This project was generated with Angular CLI .

Demo app development server

为开发服务器运行 ng s。 导航到 http://localhost:4200/。 如果您更改任何源文件，演示应用程序将自动重新加载。

Build using package script

运行 npm run package 来构建项目。 构建工件和 NPM tarball 将存储在 dist/ 目录中。 演示应用程序将存储在 docs/ 目录中，并在推送到 GitHub 时自动发布到 https://3dgenomes.github.io/ngx-resizable/。

Publishing to NPM

构建并提交/推送/合并到 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 using: npm publish ./dist/ngx-resizable/3dgenomes-ngx-resizable-1.8.1.tgz --access public.

Running unit tests

运行 ng test 以通过 Karma 执行单元测试.

Running end-to-end tests

运行 ng e2e 以通过 Protractor 执行端到端测试。

Further help

要获得有关 Angular CLI 的更多帮助，请使用 ng help 或查看 角度 CLI 自述文件。