SmartComponent Library NG
  1. Components
  2. SmartSplitPaneComponent

File

src/ui/split-pane/smart-split-pane.component.ts

Extends

AbstractFormChild

Implements

AfterViewInit OnChanges

Metadata

selector smart-split-pane
styleUrls ./smart-split-pane.component.css,
../form/smart-form.component.css
templateUrl ./smart-split-pane.component.html

Index

Properties
Methods
Inputs
Accessors

Constructor

constructor(screenService: SmartScreenService, zone: NgZone, injector: Injector, windowHelperService: FloatingWindowHelperService, smartConfig: SmartConfig)
Parameters :
Name Type Optional
screenService SmartScreenService No
zone NgZone No
injector Injector No
windowHelperService FloatingWindowHelperService No
smartConfig SmartConfig No

Inputs

orientation
Type : string
responsiveOrientation
smart-object-name
Type : string
style
Type : any
visibility
Type : string

Methods

Public handleLayoutChange
handleLayoutChange(newLayout: literal type)
Parameters :
Name Type Optional
newLayout literal type No
Returns : void
setOrientation
setOrientation(orientation: string, start: number, end: number)
Parameters :
Name Type Optional Default value
orientation string No
start number No 0
end number No 4
Returns : void
Public setPaneVisibility
setPaneVisibility()
Returns : void
Public setSplitviewOrientation
setSplitviewOrientation()
Returns : void

Properties

kendoPanes
Type : QueryList<ElementRef>
Decorators :
@ViewChildren(SplitterPaneComponent, {read: ElementRef})
leftPane
Type : ElementRef
Decorators :
@ViewChild(SmartSplitLeftPaneComponent, {read: ElementRef, static: true})
paneVisible
Type : boolean
rightPane
Type : ElementRef
Decorators :
@ViewChild(SmartSplitRightPaneComponent, {read: ElementRef, static: true})
splitviewEl
Type : ElementRef
Decorators :
@ViewChild('splitView', {read: ElementRef, static: false})
wrap
Type : ElementRef
Decorators :
@ViewChild('wrap', {read: ElementRef, static: true})

Accessors

splitterComponent
getsplitterComponent()
Returns : SplitterComponent
style
getstyle()
Returns : any
setstyle(value: any)
Parameters :
Name Type Optional
value any No
Returns : void
visibility
getvisibility()
Returns : string
setvisibility(value: string)
Parameters :
Name Type Optional
value string No
Returns : void
orientation
getorientation()
Returns : string
setorientation(value: string)
Parameters :
Name Type Optional
value string No
Returns : void
responsiveOrientation
getresponsiveOrientation()
Returns : ResponsiveOrientation
setresponsiveOrientation(value)
Parameters :
Name Optional
value No
Returns : void 
<div class="row" #wrap [hidden]="paneVisible !== false">
    <left-pane>
        <ng-content select="[left-pane]"></ng-content>
    </left-pane>
    <right-pane>
        <ng-content select="[right-pane]"></ng-content>
    </right-pane>
</div>

<kendo-splitter [orientation]="orientation" #splitView [hidden]="paneVisible === false" [ngStyle]="style">
    <kendo-splitter-pane size="50%">
        <div #left class="pane-content"></div>
    </kendo-splitter-pane>
    <kendo-splitter-pane>
        <div #right class="pane-content"></div>
    </kendo-splitter-pane>
</kendo-splitter>

./smart-split-pane.component.css 

::ng-deep *[hidden] {
    display: none !important;
}

::ng-deep kendo-splitter-pane left-pane [left-pane],
::ng-deep kendo-splitter-pane right-pane [right-pane] {
    padding: 10px !important;
}

::ng-deep .pane-content {
    height: 100%;
    max-width: 100%;
    width: 100%;
}

::ng-deep .pane-content > left-pane, .pane-content > right-pane {
    height: 100%;
}

::ng-deep .pane-content right-pane [right-pane] .row, .pane-content left-pane [left-pane] .row {
    margin-left: 0px;
    margin-right: 0px;
}

::ng-deep .pane-content right-pane [right-pane] .row smart-toolbar, ::ng-deep .pane-content left-pane [left-pane] .row smart-toolbar {
    padding-left: 0px;
    padding-right: 0px;
}

::ng-deep .k-splitbar-horizontal {
    width: 3px !important;
}

::ng-deep .k-splitbar-vertical {
    height: 3px !important;
}

::ng-deep .k-splitter.k-splitbar-horizontal FormItem {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

../form/smart-form.component.css 

::ng-deep FormItem {
    padding-left: 5px !important;
    padding-right: 5px !important;
    display: block;
}

::ng-deep .k-ripple-container {
    padding: 10px 0px;
}

::ng-deep .container-fluid > .row.smart-form-row  {
    display: block;
    flex-direction: unset;
}
::ng-deep .container-fluid > .row.smart-form-row > formcolumn  {
    overflow-y: auto !important;
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""