Question

我正在寻找一个分屏窗格库 - 这将让我在屏幕上有2个表格，用户可以拖动中间分隔线来显示更多的一个表格或另一个表格。

我知道有些库可以做到这一点，就像shagstrom那样，但我一直在寻找一些不依赖于jQuery的东西。是否存在，如果存在，请指点我吗？

Answer 1

您可以使用没有依赖关系且效果很好的Split.js。

简单示例：

Split(['#one', '#two'], {
    sizes: [25, 75],
    minSize: 200
});

这不是一个有角度的图书馆，但可以很容易地将其整合到指令中。

Answer 2

有一个split.js角度包装，角度分割可以正常工作运行，这是一个例子，运行后 npm install angular-split --save

将AngularSplitModule添加到您的应用模块：

import { AngularSplitModule } from 'angular-split';

@NgModule({
declarations: [
AppComponent,
...
],
imports: [
AngularSplitModule,
...
],
providers: [...],
bootstrap: [AppComponent]
})
export class AppModule {}

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { AngularSplitModule } from 'angular-split'

@Component({
selector: 'my-app',
styles: [`
:host {
  display: block;
  width: 500px;
  height: 400px;
  background: grey;
 }
 `],
  template: `
  <split direction="horizontal">
      <split-area [size]="30">
          <p>Lorem ipsum dolor sit amet...</p>
      </split-area>
      <split-area [size]="70">
          <p>Sed ut perspiciatis unde omnis iste natus erro...</p>
      </split-area>
  </split>`,
})
export class App {}


@NgModule({
imports: [ BrowserModule, AngularSplitModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}

plunker

是否有一个用于角度的拆分窗格库，它不依赖于AngularJS以外的其他框架？

2 个答案: