# WSegmentsVertical

Description:

### Props

Name | Type | Default value | Required? | Description
--- | --- | --- | --- | ---
`items` | Array | `[]` | No | 輸入項目的物件陣列，預設[]
`width` | Number | `230` | No | 輸入組件寬度數字，單位為px，預設230
`height` | Number | `600` | No | 輸入組件寬度數字，單位為px，預設600
`paddingStyle` | Object | `{top:10,bottom:10,left:50,right:0}` | No | 輸入內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，但因組件無法自動計算text寬度故right無效。單位為px，預設{top:10,bottom:10,left:50,right:0}
`keyValueStart` | String | `'valueStart'` | No | 輸入項目物件存放起始值之欄位字串，預設'valueStart'
`keyValueEnd` | String | `'valueEnd'` | No | 輸入項目物件存放結束值之欄位字串，預設'valueEnd'
`keyText` | String | `'text'` | No | 輸入項目物件存放顯示文字之欄位字串，預設'text'
`valueMin` | Number | `null` | No | 輸入項目陣列內全部值之最小值數字，預設null
`valueMax` | Number | `null` | No | 輸入項目陣列內全部值之最大值數字，預設null
`title` | String | `'left'` | No | 輸入軸標題文字字串，可選'left'與'right'，預設'left'
`titleColor` | String | `'#444'` | No | 輸入軸標題文字顏色字串，預設'#444'
`titleFontSize` | String | `'1rem'` | No | 輸入軸標題文字字型大小字串，預設'1rem'
`titleShift` | Number | `null` | No | 輸入軸標題與左側軸距離數字，單位為px，若給null則自動使用值為-paddingStyle.left+12，預設null
`alignStart` | String | `'left'` | No | 輸入項目起始值刻度文字對齊字串，可選'left'與'right'，預設'left'
`alignEnd` | String | `'right'` | No | 輸入項目結束值刻度文字對齊字串，可選'left'與'right'，預設'right'
`funFormatTickValue` | function | `null` | No | 輸入處理項目數據之刻度值用以顯示函數，預設null
`axisColor` | String | `'#666'` | No | 輸入軸顏色字串，預設'#666'
`tickColor` | String | `'#666'` | No | 輸入刻度顏色字串，預設'#666'
`tickSize` | Number | `5` | No | 輸入刻度尺寸(為單側寬度)數字，單位為px，預設5
`tickLabelColor` | String | `'#666'` | No | 輸入刻度文字顏色字串，預設'#666'
`tickLabelFontSize` | String | `'0.7rem'` | No | 輸入刻度文字字型大小字串，預設'0.7rem'
`segmentBackgroundType` | String | `'color'` | No | 輸入區塊背景類型字串，可選'color'或'image'，預設'color'
`segmentBackgroundImage` | String | `''` | No | 輸入區塊背景圖片字串，通過background-image:url(...)設定，預設''
`funSegmentBackgroundImage` | function | `null` | No | 輸入處理項目數據之區塊背景圖片函數，預設null
`segmentBackgroundImageSize` | String | `'75%'` | No | 輸入區塊背景圖片尺寸字串，預設'75%'
`segmentBackgroundColor` | String | `'#FFB74D'` | No | 輸入區塊背景顏色字串，預設'#FFB74D'
`funSegmentBackgroundColor` | function | `null` | No | 輸入處理項目數據之區塊背景函數，預設null
`segmentBorderColor` | String|Object | `'#FFB74D'` | No | 輸入區塊邊框顏色字串或物件，給予物件時可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，預設'#FB8C00'
`funSegmentBorderColor` | function | `null` | No | 輸入處理項目數據之區塊邊框函數，預設null
`segmentSize` | Number | `6` | No | 輸入區塊尺寸(為兩側總寬度)數字，單位為px，預設6
`textWithPopup` | Boolean | `false` | No | 輸入項目文字是否可點擊顯示popup彈窗布林值，預設false
`textFontSize` | String | `'0.7rem'` | No | 輸入項目文字區之文字字型大小字串，預設'0.7rem'
`textColor` | String | `'#222'` | No | 輸入項目文字區之文字顏色字串，預設'#222'
`textBackgroundColor` | String | `'#ddd'` | No | 輸入項目文字區之背景顏色字串，預設'#ddd'
`textTriangularSize` | Number | `15` | No | 輸入項目文字區之箭頭長度數字，單位為px，若textTriangularSize/textTriangularRatio*2小於項目文字區高度時則會破圖，預設15
`textTriangularRatio` | Number | `1.5` | No | 輸入項目文字區之箭頭長寬比值數字，若textTriangularSize/textTriangularRatio*2小於項目文字區高度時則會破圖，預設1.5
`textShift` | Number | `null` | No | 輸入項目文字區與左側軸距離數字，單位為px，若給null則自動使用值為1+segmentSize/2+paddingStyle.left，預設null
`textCanClick` | Boolean | `false` | No | 輸入項目文字是否可點擊布林值，預設false
`segmentCanClick` | Boolean | `false` | No | 輸入區塊是否可點擊布林值，預設false

### Props

Name | Type | Default value | Required? | Description
--- | --- | --- | --- | ---
`items` | Array | `[]` | No | 輸入項目的物件陣列，預設[]
`width` | Number | `230` | No | 輸入組件寬度數字，單位為px，預設230
`height` | Number | `600` | No | 輸入組件寬度數字，單位為px，預設600
`paddingStyle` | Object | `{top:10,bottom:10,left:50,right:0}` | No | 輸入內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，但因組件無法自動計算text寬度故right無效。單位為px，預設{top:10,bottom:10,left:50,right:0}
`keyValueStart` | String | `'valueStart'` | No | 輸入項目物件存放起始值之欄位字串，預設'valueStart'
`keyValueEnd` | String | `'valueEnd'` | No | 輸入項目物件存放結束值之欄位字串，預設'valueEnd'
`keyText` | String | `'text'` | No | 輸入項目物件存放顯示文字之欄位字串，預設'text'
`valueMin` | Number | `null` | No | 輸入項目陣列內全部值之最小值數字，預設null
`valueMax` | Number | `null` | No | 輸入項目陣列內全部值之最大值數字，預設null
`title` | String | `'left'` | No | 輸入軸標題文字字串，可選'left'與'right'，預設'left'
`titleColor` | String | `'#444'` | No | 輸入軸標題文字顏色字串，預設'#444'
`titleFontSize` | String | `'1rem'` | No | 輸入軸標題文字字型大小字串，預設'1rem'
`titleShift` | Number | `null` | No | 輸入軸標題與左側軸距離數字，單位為px，若給null則自動使用值為-paddingStyle.left+12，預設null
`alignStart` | String | `'left'` | No | 輸入項目起始值刻度文字對齊字串，可選'left'與'right'，預設'left'
`alignEnd` | String | `'right'` | No | 輸入項目結束值刻度文字對齊字串，可選'left'與'right'，預設'right'
`funFormatTickValue` | function | `null` | No | 輸入處理項目數據之刻度值用以顯示函數，預設null
`axisColor` | String | `'#666'` | No | 輸入軸顏色字串，預設'#666'
`tickColor` | String | `'#666'` | No | 輸入刻度顏色字串，預設'#666'
`tickSize` | Number | `5` | No | 輸入刻度尺寸(為單側寬度)數字，單位為px，預設5
`tickLabelColor` | String | `'#666'` | No | 輸入刻度文字顏色字串，預設'#666'
`tickLabelFontSize` | String | `'0.7rem'` | No | 輸入刻度文字字型大小字串，預設'0.7rem'
`segmentBackgroundType` | String | `'color'` | No | 輸入區塊背景類型字串，可選'color'或'image'，預設'color'
`segmentBackgroundImage` | String | `''` | No | 輸入區塊背景圖片字串，通過background-image:url(...)設定，預設''
`funSegmentBackgroundImage` | function | `null` | No | 輸入處理項目數據之區塊背景圖片函數，預設null
`segmentBackgroundImageSize` | String | `'75%'` | No | 輸入區塊背景圖片尺寸字串，預設'75%'
`segmentBackgroundColor` | String | `'#FFB74D'` | No | 輸入區塊背景顏色字串，預設'#FFB74D'
`funSegmentBackgroundColor` | function | `null` | No | 輸入處理項目數據之區塊背景函數，預設null
`segmentBorderColor` | String|Object | `'#FFB74D'` | No | 輸入區塊邊框顏色字串或物件，給予物件時可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，預設'#FB8C00'
`funSegmentBorderColor` | function | `null` | No | 輸入處理項目數據之區塊邊框函數，預設null
`segmentSize` | Number | `6` | No | 輸入區塊尺寸(為兩側總寬度)數字，單位為px，預設6
`textWithPopup` | Boolean | `false` | No | 輸入項目文字是否可點擊顯示popup彈窗布林值，預設false
`textFontSize` | String | `'0.7rem'` | No | 輸入項目文字區之文字字型大小字串，預設'0.7rem'
`textColor` | String | `'#222'` | No | 輸入項目文字區之文字顏色字串，預設'#222'
`textBackgroundColor` | String | `'#ddd'` | No | 輸入項目文字區之背景顏色字串，預設'#ddd'
`textTriangularSize` | Number | `15` | No | 輸入項目文字區之箭頭長度數字，單位為px，若textTriangularSize/textTriangularRatio*2小於項目文字區高度時則會破圖，預設15
`textTriangularRatio` | Number | `1.5` | No | 輸入項目文字區之箭頭長寬比值數字，若textTriangularSize/textTriangularRatio*2小於項目文字區高度時則會破圖，預設1.5
`textShift` | Number | `null` | No | 輸入項目文字區與左側軸距離數字，單位為px，若給null則自動使用值為1+segmentSize/2+paddingStyle.left，預設null
`textCanClick` | Boolean | `false` | No | 輸入項目文字是否可點擊布林值，預設false
`segmentCanClick` | Boolean | `false` | No | 輸入區塊是否可點擊布林值，預設false