WPanelDivideVerticalTriple

三分垂直分割組件，由上、中、下3個分區與2條可拖曳分隔條組成，各分區內容以具名scoped slot(top、center、bottom)帶出，各slot帶出ratio(分區比例)、width(分區寬px)、height(分區高px)

Props

Name Type Default value Required? Description
ratio1 Number 1/3 No 輸入第一分隔條位置比例數字，範圍為0~1，需小於ratio2，預設1/3
ratio2 Number 2/3 No 輸入第二分隔條位置比例數字，範圍為0~1，需大於ratio1，預設2/3
ratio1Min Number 0 No 輸入第一分隔條位置最小比例數字，範圍為0~1，需小於ratio1Max，若ratio1Min大於ratio1Max則由ratio1Min主導，預設0
ratio1Max Number 1 No 輸入第一分隔條位置最大比例數字，範圍為0~1，需大於ratio1Min，若ratio1Min大於ratio1Max則由ratio1Min主導，預設1
ratio2Min Number 0 No 輸入第二分隔條位置最小比例數字，範圍為0~1，需小於ratio2Max，若ratio2Min大於ratio2Max則由ratio2Min主導，預設0
ratio2Max Number 1 No 輸入第二分隔條位置最大比例數字，範圍為0~1，需大於ratio2Min，若ratio2Min大於ratio2Max則由ratio2Min主導，預設1
sectionHeightMin Number null No 輸入各分區最小高度數字，為topHeightMin、centerHeightMin與bottomHeightMin之預設值，單位為px，處理優先權大於ratio1Min、ratio1Max、ratio2Min與ratio2Max，預設null
sectionHeightMax Number null No 輸入各分區最大高度數字，為topHeightMax、centerHeightMax與bottomHeightMax之預設值，單位為px，處理優先權大於ratio1Min、ratio1Max、ratio2Min與ratio2Max，預設null
topHeightMin Number null No 輸入上方區最小高度數字，單位為px，處理優先權大於sectionHeightMin，預設null代表沿用sectionHeightMin
topHeightMax Number null No 輸入上方區最大高度數字，單位為px，處理優先權大於sectionHeightMax，預設null代表沿用sectionHeightMax
centerHeightMin Number null No 輸入中間區最小高度數字，單位為px，處理優先權大於sectionHeightMin，預設null代表沿用sectionHeightMin
centerHeightMax Number null No 輸入中間區最大高度數字，單位為px，處理優先權大於sectionHeightMax，預設null代表沿用sectionHeightMax
bottomHeightMin Number null No 輸入下方區最小高度數字，單位為px，處理優先權大於sectionHeightMin，預設null代表沿用sectionHeightMin
bottomHeightMax Number null No 輸入下方區最大高度數字，單位為px，處理優先權大於sectionHeightMax，預設null代表沿用sectionHeightMax
barColor String '#ddd' No 輸入分隔條顏色字串，預設'#ddd'
barSize Number 2 No 輸入分隔條尺寸數字，為分隔條高度，單位為px，預設2
barBorderColor String 'transparent' No 輸入分隔條框線顏色字串，預設'transparent'
barBorderSize Number 3 No 輸入分隔條框線寬度數字，單位為px，預設3，通常配合barBorderColor='transparent'使可拖曳區加大又不遮蔽可視區

Events

Name Payload Type Description
update:ratio1 拖曳第一分隔條時發射，帶出新的第一分隔條位置比例數字
update:ratio2 拖曳第二分隔條時發射，帶出新的第二分隔條位置比例數字
resize 組件尺寸變更時發射，帶出domresize訊息物件

Description:

  • 三分垂直分割組件，由上、中、下3個分區與2條可拖曳分隔條組成，各分區內容以具名scoped slot(top、center、bottom)帶出，各slot帶出ratio(分區比例)、width(分區寬px)、height(分區高px)

Props

Name Type Default value Required? Description
ratio1 Number 1/3 No 輸入第一分隔條位置比例數字，範圍為0~1，需小於ratio2，預設1/3
ratio2 Number 2/3 No 輸入第二分隔條位置比例數字，範圍為0~1，需大於ratio1，預設2/3
ratio1Min Number 0 No 輸入第一分隔條位置最小比例數字，範圍為0~1，需小於ratio1Max，若ratio1Min大於ratio1Max則由ratio1Min主導，預設0
ratio1Max Number 1 No 輸入第一分隔條位置最大比例數字，範圍為0~1，需大於ratio1Min，若ratio1Min大於ratio1Max則由ratio1Min主導，預設1
ratio2Min Number 0 No 輸入第二分隔條位置最小比例數字，範圍為0~1，需小於ratio2Max，若ratio2Min大於ratio2Max則由ratio2Min主導，預設0
ratio2Max Number 1 No 輸入第二分隔條位置最大比例數字，範圍為0~1，需大於ratio2Min，若ratio2Min大於ratio2Max則由ratio2Min主導，預設1
sectionHeightMin Number null No 輸入各分區最小高度數字，為topHeightMin、centerHeightMin與bottomHeightMin之預設值，單位為px，處理優先權大於ratio1Min、ratio1Max、ratio2Min與ratio2Max，預設null
sectionHeightMax Number null No 輸入各分區最大高度數字，為topHeightMax、centerHeightMax與bottomHeightMax之預設值，單位為px，處理優先權大於ratio1Min、ratio1Max、ratio2Min與ratio2Max，預設null
topHeightMin Number null No 輸入上方區最小高度數字，單位為px，處理優先權大於sectionHeightMin，預設null代表沿用sectionHeightMin
topHeightMax Number null No 輸入上方區最大高度數字，單位為px，處理優先權大於sectionHeightMax，預設null代表沿用sectionHeightMax
centerHeightMin Number null No 輸入中間區最小高度數字，單位為px，處理優先權大於sectionHeightMin，預設null代表沿用sectionHeightMin
centerHeightMax Number null No 輸入中間區最大高度數字，單位為px，處理優先權大於sectionHeightMax，預設null代表沿用sectionHeightMax
bottomHeightMin Number null No 輸入下方區最小高度數字，單位為px，處理優先權大於sectionHeightMin，預設null代表沿用sectionHeightMin
bottomHeightMax Number null No 輸入下方區最大高度數字，單位為px，處理優先權大於sectionHeightMax，預設null代表沿用sectionHeightMax
barColor String '#ddd' No 輸入分隔條顏色字串，預設'#ddd'
barSize Number 2 No 輸入分隔條尺寸數字，為分隔條高度，單位為px，預設2
barBorderColor String 'transparent' No 輸入分隔條框線顏色字串，預設'transparent'
barBorderSize Number 3 No 輸入分隔條框線寬度數字，單位為px，預設3，通常配合barBorderColor='transparent'使可拖曳區加大又不遮蔽可視區

Events

Name Payload Type Description
update:ratio1 拖曳第一分隔條時發射，帶出新的第一分隔條位置比例數字
update:ratio2 拖曳第二分隔條時發射，帶出新的第二分隔條位置比例數字
resize 組件尺寸變更時發射，帶出domresize訊息物件