| Name | Type | Default |
|---|
|
disabled
|
Boolean
|
false
|
Sets or gets the disabled property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSplitter #mySplitter
[width]="850" [height]="480" [panels]="[{ size: 300 }]" [disabled]="true">
<div class="splitter-panel">
Panel 1
</div>
<div class="splitter-panel">
Panel 2
</div>
</jqxSplitter>
`
})
export class AppComponent {
}
|
|
height
|
String | Number
|
300
|
Sets or gets the height property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSplitter #mySplitter
[width]="850" [height]="480" [panels]="[{ size: 300 }]">
<div class="splitter-panel">
Panel 1
</div>
<div class="splitter-panel">
Panel 2
</div>
</jqxSplitter>
`
})
export class AppComponent {
}
|
|
orientation
|
enum:SplitterOrientation
|
'vertical'
|
enum SplitterOrientation { horizontal, vertical } Sets or gets the orientation property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSplitter #mySplitter
[width]="850" [height]="480" [panels]="[{ size: 300 }]" [orientation]="'horizontal'">
<div class="splitter-panel">
Panel 1
</div>
<div class="splitter-panel">
Panel 2
</div>
</jqxSplitter>
`
})
export class AppComponent {
}
|
|
panels
|
Array<SplitterPanel>
|
[]
|
interface SplitterPanel { size?: Number | String; min?: Number | String; collapsible?: Boolean; collapsed?: Boolean; } Sets or gets the panels property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSplitter #mySplitter
[width]="850" [height]="480" [panels]="[{ size: 300 }]">
<div class="splitter-panel">
Panel 1
</div>
<div class="splitter-panel">
Panel 2
</div>
</jqxSplitter>
`
})
export class AppComponent {
}
|
|
resizable
|
Boolean
|
true
|
Sets or gets the resizable property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSplitter #mySplitter
[width]="850" [height]="480" [panels]="[{ size: 300 }]" [resizable]="false">
<div class="splitter-panel">
Panel 1
</div>
<div class="splitter-panel">
Panel 2
</div>
</jqxSplitter>
`
})
export class AppComponent {
}
|
|
splitBarSize
|
Number
|
5
|
Sets or gets the splitBarSize property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSplitter #mySplitter
[width]="850" [height]="480" [panels]="[{ size: 300 }]" [splitBarSize]="10">
<div class="splitter-panel">
Panel 1
</div>
<div class="splitter-panel">
Panel 2
</div>
</jqxSplitter>
`
})
export class AppComponent {
}
|
|
showSplitBar
|
Boolean
|
true
|
Sets or gets the showSplitBar property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSplitter #mySplitter
[width]="850" [height]="480" [panels]="[{ size: 300 }]" [showSplitBar]="false">
<div class="splitter-panel">
Panel 1
</div>
<div class="splitter-panel">
Panel 2
</div>
</jqxSplitter>
`
})
export class AppComponent {
}
|
|
theme
|
String
|
''
|
Sets or gets the theme property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSplitter #mySplitter
[width]="850" [height]="480" [panels]="[{ size: 300 }]" [theme]="'energyblue'">
<div class="splitter-panel">
Panel 1
</div>
<div class="splitter-panel">
Panel 2
</div>
</jqxSplitter>
`
})
export class AppComponent {
}
|
|
width
|
String | Number
|
300
|
Sets or gets the width property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSplitter #mySplitter
[width]="850" [height]="480" [panels]="[{ size: 300 }]">
<div class="splitter-panel">
Panel 1
</div>
<div class="splitter-panel">
Panel 2
</div>
</jqxSplitter>
`
})
export class AppComponent {
}
|
|
|
|
collapsed
|
Event
|
|
This event is triggered when a panel is collapsed.
Code examples
Bind to the collapsed event of jqxSplitter.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSplitter #mySplitter(onCollapsed)="Collapsed($event)"
[width]="850" [height]="480" [panels]="[{ size: 300 }]">
<div class="splitter-panel">
Panel 1
</div>
<div class="splitter-panel">
Panel 2
</div>
</jqxSplitter>
`
})
export class AppComponent {
Collapsed(event: any): void
{
// Do Something
}
}
|
|
expanded
|
Event
|
|
This event is triggered when a panel is expanded.
Code examples
Bind to the expanded event of jqxSplitter.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSplitter #mySplitter(onExpanded)="Expanded($event)"
[width]="850" [height]="480" [panels]="[{ size: 300 }]">
<div class="splitter-panel">
Panel 1
</div>
<div class="splitter-panel">
Panel 2
</div>
</jqxSplitter>
`
})
export class AppComponent {
Expanded(event: any): void
{
// Do Something
}
}
|
|
resize
|
Event
|
|
This event is triggered when the 'resize' operation has ended.
Code examples
Bind to the resize event of jqxSplitter.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSplitter #mySplitter(onResize)="Resize($event)"
[width]="850" [height]="480" [panels]="[{ size: 300 }]">
<div class="splitter-panel">
Panel 1
</div>
<div class="splitter-panel">
Panel 2
</div>
</jqxSplitter>
`
})
export class AppComponent {
Resize(event: any): void
{
// Do Something
}
}
|
|
resizeStart
|
Event
|
|
This event is triggered when the 'resizeStart' operation has started.
Code examples
Bind to the resizeStart event of jqxSplitter.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSplitter #mySplitter(onResizeStart)="ResizeStart($event)"
[width]="850" [height]="480" [panels]="[{ size: 300 }]">
<div class="splitter-panel">
Panel 1
</div>
<div class="splitter-panel">
Panel 2
</div>
</jqxSplitter>
`
})
export class AppComponent {
ResizeStart(event: any): void
{
// Do Something
}
}
|
|
|
| Name | Return Type | Arguments |
|---|
|
collapse
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSplitter #mySplitter
[width]="850" [height]="480" [panels]="[{ size: 300 }]">
<div class="splitter-panel">
Panel 1
</div>
<div class="splitter-panel">
Panel 2
</div>
</jqxSplitter>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('mySplitter') mySplitter: jqxSplitterComponent;
ngAfterViewInit(): void
{
this.mySplitter.collapse();
}
}
|
|
destroy
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSplitter #mySplitter
[width]="850" [height]="480" [panels]="[{ size: 300 }]">
<div class="splitter-panel">
Panel 1
</div>
<div class="splitter-panel">
Panel 2
</div>
</jqxSplitter>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('mySplitter') mySplitter: jqxSplitterComponent;
ngAfterViewInit(): void
{
this.mySplitter.destroy();
}
}
|
|
disable
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSplitter #mySplitter
[width]="850" [height]="480" [panels]="[{ size: 300 }]">
<div class="splitter-panel">
Panel 1
</div>
<div class="splitter-panel">
Panel 2
</div>
</jqxSplitter>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('mySplitter') mySplitter: jqxSplitterComponent;
ngAfterViewInit(): void
{
this.mySplitter.disable();
}
}
|
|
enable
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSplitter #mySplitter
[width]="850" [height]="480" [panels]="[{ size: 300 }]">
<div class="splitter-panel">
Panel 1
</div>
<div class="splitter-panel">
Panel 2
</div>
</jqxSplitter>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('mySplitter') mySplitter: jqxSplitterComponent;
ngAfterViewInit(): void
{
this.mySplitter.enable();
}
}
|
|
expand
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSplitter #mySplitter
[width]="850" [height]="480" [panels]="[{ size: 300 }]">
<div class="splitter-panel">
Panel 1
</div>
<div class="splitter-panel">
Panel 2
</div>
</jqxSplitter>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('mySplitter') mySplitter: jqxSplitterComponent;
ngAfterViewInit(): void
{
this.mySplitter.expand();
}
}
|
|
render
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSplitter #mySplitter
[width]="850" [height]="480" [panels]="[{ size: 300 }]">
<div class="splitter-panel">
Panel 1
</div>
<div class="splitter-panel">
Panel 2
</div>
</jqxSplitter>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('mySplitter') mySplitter: jqxSplitterComponent;
ngAfterViewInit(): void
{
this.mySplitter.render();
}
}
|
|
refresh
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSplitter #mySplitter
[width]="850" [height]="480" [panels]="[{ size: 300 }]">
<div class="splitter-panel">
Panel 1
</div>
<div class="splitter-panel">
Panel 2
</div>
</jqxSplitter>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('mySplitter') mySplitter: jqxSplitterComponent;
ngAfterViewInit(): void
{
this.mySplitter.refresh();
}
}
|