Angular splitter 可以拖拽的佈局

Angular原生的拖拽佈局，無其他依賴。

demo

http://guguji5.top:8080/angular-splitter/

依賴

• angular 5-6
• angular-cli

如何啓動

github倉庫：https://github.com/guguji5/angular-splitter

git clone https://github.com/guguji5/angular-splitter.git
cd angular-splitter
npm install
ng serve --open

文檔

Component <tam-splitter>

@Input	Type	Default	Details
direction	string	“horizontal”	Select split direction: “horizontal” or “vertical”.
splitterBarWidth	number	8	Gutters’s size (dragging elements) in pixels.
useTransition	boolean or number	false	Use transition when collapsing or expanding. when this param is a number, it will be a millisecond value set to the property ‘transition-duration’, should be between 100 and 1000

@Output	Param	Details
sizeChange	{barNum: number, sizes: Array<number>}	Emit when draging, return the index of bar and the sizes of panels

Component <tam-splitter-panel>

@Input	Type	Default	Details
size	number	null	Size of the panel in percent (value between 0 and 100).all panels sizes should be equal to 100
max	number	null	Max size of the panel in percent (value between 0 and 100).
min	number	null	Min size of the panel in percent (value between 0 and 100).
visible	boolean	true	Allow to toggle panel visibility

@Output	Param	Details
collapsedChange	{collapsed:boolean, sizes: Array<number>, collapsedComponentSize: number}	Emit when collapsed or expand, return the collapsed, the sizes of panels and the size of collapsed panel

simple demo:

<tam-splitter splitterBarWidth=3 [direction]="horizontal" (sizeChange)="sizeChange($event)">
    <tam-splitter-panel [size]="20" [max]="30" [min]="10"
        [visible]=true (collapsedChange)="collapsedChange($event)">
        Refined By Panel
    </tam-splitter-panel>
    <tam-splitter-panel  [size]="30" [max]="50" [min]="20">
        Side List Panel
    </tam-splitter-panel>
    <tam-splitter-panel [size]="50" [max]="70" [min]="20">
        Preview Panel
    </tam-splitter-panel>
</tam-splitter>

nested demo:

<tam-splitter splitterBarWidth=3>
    <tam-splitter-panel [size]="20" [max]="30" [min]="10" (collapsedChange)="collapsedChange($event)">
        Refined By Panel
    </tam-splitter-panel>
    <tam-splitter-panel [size]="80">
        <tam-splitter splitterBarWidth=3 [direction]="'vertical'">
            <tam-splitter-panel [size]="30" [max]="40" [min]="20">
                Side List Panel
            </tam-splitter-panel>

            <tam-splitter-panel [size]="70" [max]="80" [min]="60">
                Preview Panel
            </tam-splitter-panel>
        </tam-splitter>
    </tam-splitter-panel>
</tam-splitter>

---

寫在後面的話：
splitter的需求很明確，但是遠不止這麼簡單，PM的需要是拖拽，並且每一個panel都要有最大最小值的限制，而且，因爲第三個區域是展示內容區域，所以希望，拖拽第一個框的時候，增大的是第三個而不是第二個。基於以上需求，google到了兩個控件，kendo-ui-splitter 和 angular-split，kendo雖然有一些sizechange和collapsechange方法，但是還是無法實現當拖拽的時候，人爲的改變第三個的寬度。而第二個無法支持最大最小值。

基於以上背景，只好自己來實現這樣一個功能。具體實現是參考angular-split，只是在計算位置的時候增加了最大值和最小值的邊界，然後有在sizechange事件是暴露出來每一個panel的寬度，基於此來給每一個panel動態計算和賦值。