WListHorizontal

Description:

Props

Name Type Default value Required? Description
items Array [] No 輸入項目的字串陣列或物件陣列,預設[]
enableActive Boolean false No 輸入項目是否使用點擊成為活耀狀態布林值,預設false
itemActive String|Object null No 輸入活耀項目字串或物件,預設null
itemTextFontSize String '1rem' No 輸入文字字型大小字串,預設'1rem'
keyText String 'text' No 輸入項目為物件時,存放顯示文字之欄位字串,預設'text'
keyIcon String 'icon' No 輸入項目為物件時,存放圖標之欄位字串,預設'icon'
space Number 0 No 輸入項目之間間隔數字,單位px,預設0
paddingStyle Object {v:10,h:12} No 輸入內寬距離設定物件,可用鍵值為v、h、left、right、top、bottom,v代表同時設定top與bottom,h代表設定left與right,若有重複設定時後面鍵值會覆蓋前面,各鍵值為寬度數字,單位為px,預設{v:10,h:12}
itemBorderRadius Number 0 No 輸入框圓角度數字,單位為px,預設0
itemBackgroundColor String 'white' No 輸入背景顏色字串,預設'white'
itemBackgroundColorHover String 'rgba(200,200,200,0.2)' No 輸入滑鼠移入時背景顏色字串,預設'rgba(200,200,200,0.2)'
itemBackgroundColorActive String 'white' No 輸入主動模式時背景顏色字串,預設'white'
itemBackgroundColorDisabled String 'white' No 輸入非啟用模式時背景顏色字串,預設'white'
itemTextColor String '#444' No 輸入文字顏色字串,預設'#444'
itemTextColorHover String '#222' No 輸入滑鼠移入時文字顏色字串,預設'#222'
itemTextColorActive String 'orange darken-3' No 輸入主動模式時文字顏色字串,預設'orange darken-3'
itemTextColorDisabled String '#444' No 輸入非啟用模式時文字顏色字串,預設'#444'
itemIconSize Number 22 No 輸入左側圖標之尺寸數字,單位px,預設22
itemIconColor String '#444' No 輸入圖標顏色字串,預設'#444'
itemIconColorHover String '#222' No 輸入滑鼠移入時圖標顏色字串,預設'#222'
itemIconColorActive String 'orange darken-3' No 輸入主動模式時圖標顏色字串,預設'orange darken-3'
itemIconColorDisabled String '#444' No 輸入非啟用模式時圖標顏色字串,預設'#444'
itemRippleColor String 'rgba(245,124,0,0.4)' No 輸入ripple效果顏色字串,預設'rgba(245,124,0,0.4)'
borderBottom Boolean true No 輸入主動模式時是否於項目底部顯示高亮線條,預設true
borderBottomSize Number 2 No 輸入底部高亮線條尺寸(高度)數字,單位px,預設2
borderBottomColor String 'rgba(245,124,0,0.8)' No 輸入底部高亮線條顏色字串,預設'rgba(245,124,0,0.8)'
itemDisabledColor String 'transparent' No 輸入非編輯模式時遮罩顏色字串,預設'transparent'
itemCursorPointer Boolean true No 輸入是否滑鼠移入顯示pointer樣式,預設true

Props

Name Type Default value Required? Description
items Array [] No 輸入項目的字串陣列或物件陣列,預設[]
enableActive Boolean false No 輸入項目是否使用點擊成為活耀狀態布林值,預設false
itemActive String|Object null No 輸入活耀項目字串或物件,預設null
itemTextFontSize String '1rem' No 輸入文字字型大小字串,預設'1rem'
keyText String 'text' No 輸入項目為物件時,存放顯示文字之欄位字串,預設'text'
keyIcon String 'icon' No 輸入項目為物件時,存放圖標之欄位字串,預設'icon'
space Number 0 No 輸入項目之間間隔數字,單位px,預設0
paddingStyle Object {v:10,h:12} No 輸入內寬距離設定物件,可用鍵值為v、h、left、right、top、bottom,v代表同時設定top與bottom,h代表設定left與right,若有重複設定時後面鍵值會覆蓋前面,各鍵值為寬度數字,單位為px,預設{v:10,h:12}
itemBorderRadius Number 0 No 輸入框圓角度數字,單位為px,預設0
itemBackgroundColor String 'white' No 輸入背景顏色字串,預設'white'
itemBackgroundColorHover String 'rgba(200,200,200,0.2)' No 輸入滑鼠移入時背景顏色字串,預設'rgba(200,200,200,0.2)'
itemBackgroundColorActive String 'white' No 輸入主動模式時背景顏色字串,預設'white'
itemBackgroundColorDisabled String 'white' No 輸入非啟用模式時背景顏色字串,預設'white'
itemTextColor String '#444' No 輸入文字顏色字串,預設'#444'
itemTextColorHover String '#222' No 輸入滑鼠移入時文字顏色字串,預設'#222'
itemTextColorActive String 'orange darken-3' No 輸入主動模式時文字顏色字串,預設'orange darken-3'
itemTextColorDisabled String '#444' No 輸入非啟用模式時文字顏色字串,預設'#444'
itemIconSize Number 22 No 輸入左側圖標之尺寸數字,單位px,預設22
itemIconColor String '#444' No 輸入圖標顏色字串,預設'#444'
itemIconColorHover String '#222' No 輸入滑鼠移入時圖標顏色字串,預設'#222'
itemIconColorActive String 'orange darken-3' No 輸入主動模式時圖標顏色字串,預設'orange darken-3'
itemIconColorDisabled String '#444' No 輸入非啟用模式時圖標顏色字串,預設'#444'
itemRippleColor String 'rgba(245,124,0,0.4)' No 輸入ripple效果顏色字串,預設'rgba(245,124,0,0.4)'
borderBottom Boolean true No 輸入主動模式時是否於項目底部顯示高亮線條,預設true
borderBottomSize Number 2 No 輸入底部高亮線條尺寸(高度)數字,單位px,預設2
borderBottomColor String 'rgba(245,124,0,0.8)' No 輸入底部高亮線條顏色字串,預設'rgba(245,124,0,0.8)'
itemDisabledColor String 'transparent' No 輸入非編輯模式時遮罩顏色字串,預設'transparent'
itemCursorPointer Boolean true No 輸入是否滑鼠移入顯示pointer樣式,預設true