ng-split-areas
Splitting views in Angular horizontally / vertically with configurable size-restrictions.
Documentation: https://github.com/steven-coding/ng-split-areas/
Splitting views in Angular horizontally / vertically with configurable size-restrictions
Splitting views in Angular horizontally / vertically with configurable size-restrictions.
Documentation: https://github.com/steven-coding/ng-split-areas/
devicePixelRatio
to make dragging value effective on HiDPI screen and browsers with zoom !== 100%, thanks to tkglaser and HondaHiroyuki.ngZone.runOutsideAngular()
to avoid triggering change detection during drag, thanks to klemenoslaj.cdRef.markForCheck()
in several setters inside SplitComponent
to force repaint if modified from TS class (instead of the template).dir="ltr"
on <split>
component and that's fix.[gutterSize]
with useTransition="true"
, now gutter's size got transition too and it's visually better.[disabled]
, [direction]
, [width]
, [height]
,.. keep size values got after gutter being dragged instead of reset to user provided values.[useTransition]="true"
, no more transition at component initialisation.10
to 11
because of a small discrepancy in the shown dots position pointed there.[gutterColor]="'#ff0000'"
, [gutterImageH]="'url(xxx)'"
and [gutterImageV]="'url(xxx)'"
.(gutterClick)
event even if [disabled]="true"
to specific usecase.direction="vertical"
initialization, container height was wrong because HostBinding
wasn't applied yet.[visibleTransition]
property renamed to [useTransition]
and work with [visible]
& [size]
.(visibleTransitionEnd)
event renamed to (transitionEnd)
and now triggered from [visible]
& [size]
property.0.2.3
to avoid breaking semantic versionning (I screwed up with 0.2.5
& 0.2.6
which needed angular >=5). Apps using angular 4.x having "angular-split": "^0.2.2"
inside their package.json
shoudn't break anymore.flex-basis
values to avoid unwanted size flickering on areas not linked to dragged gutter.split.component.ts
top.<split gutterSize="12" disabled="true">...</split>
or <split-area order="4" size="40" visible="true">...</split-area>
.(gutterClick)
event for usecases like toggling area between 0% & X%. Now all drag events and gutterSize return {gutterNum: number, sizes: Array<number>}
. [visible]="false"
(bug there since the [visible]
feature was added.. :( ).SplitComponent
and SplitAreaDirective
as ViewChild
/ViewChildren
directly from your class to interact with.[minSize]
(pixel or percent) and custom style.flex-basis: calc( X% - Ypx );
(seems easy at first sight but a bit painfull to implement). For example, you can now have 4 areas (with [visible]="true"
), so 3 gutters, with sizes [0,0,0,100]. This was impossible before (size couldn't go down to 5%)./deep/
use: Could have used ::ng-deep
but I prefer to avoid it too.Renderer2
instead of Renderer
which is deprecated.npm test
.rxjs
version inside package.json
.^4.0.0
, replace <template>
by <ng-template>
and rebuild dist folder.angular-split
is not compatible on browser not supporting it (like ios8).<split [visibleTransition]="true">
) when toggling visibility and visibleTransitionEnd
event ` pr11.angular-split
isn't working on browser without flexbox support, so not working on ios older than 9.<split-area [visible]="boolean">
without removing them from the DOM, useful for specific case like with router. Thanks to jitsmaster (pr8 / pr10)