WButtonChip

Description:

Props

Name Type Default value Required? Description
text String '' No 輸入文字字串,預設''
tooltip String '' No 輸入提示文字字串,預設''
icon String '' No 輸入圖標字串,可為mdi,md,fa代號或mdi/js路徑,預設''
iconColor String 'black' No 輸入圖標顏色字串,預設'black'
iconColorHover String 'grey darken-3' No 輸入滑鼠移入時圖標顏色字串,預設'grey darken-3'
iconColorActive String 'white' No 輸入主動模式時圖標顏色字串,預設'white'
iconSize Number 22 No 輸入左側圖標之尺寸數字,單位px,預設22
prog Number null No 輸入進度條進度數字,單位%,預設null
progColor String 'rgba(150,150,150,0.4)' No 輸入進度條顏色字串,預設'rgba(150,150,150,0.4)'
progBackgroundColor String 'rgba(150,150,150,0.075)' No 輸入進度條背景顏色字串,預設'rgba(150,150,150,0.075)'
textColor String 'black' No 輸入文字顏色字串,預設'black'
textColorHover String 'grey darken-3' No 輸入滑鼠移入時文字顏色字串,預設'grey darken-3'
textColorActive String 'white' No 輸入主動模式時文字顏色字串,預設'white'
textFontSize String '0.85rem' No 輸入文字字型大小字串,預設'0.85rem'
borderUsed Object {top:true,bottom:true,left:true,right:true} No 輸入是否繪製框設定物件,可用鍵值為left、right、top、bottom,各鍵值為是否繪製框線布林值,單位為px,預設{top:true,bottom:true,left:true,right:true}
borderWidth Object {top:1,bottom:1,left:1,right:1} No 輸入框寬度設定物件,可用鍵值為left、right、top、bottom,各鍵值為寬度數字,單位為px,預設{top:1,bottom:1,left:1,right:1}
borderRadius Number 30 No 輸入框圓角度數字,單位為px,預設30
borderRadiusStyle Object {left:true,right:true} No 輸入框圓角設定物件,可用鍵值為left、right、top、bottom、top-left、bottom-left、top-right、bottom-right,left代表設定top-left與bottom-left,right代表設定top-right與bottom-right,top代表設定top-left與top-right,bottom代表設定bottom-left與bottom-right,若有重複設定時後面鍵值會覆蓋前面,各鍵值為布林值,預設{left:true,right:true}
borderColor String 'transparent' No 輸入邊框顏色字串,預設'transparent'
borderColorHover String 'transparent' No 輸入滑鼠移入時邊框顏色字串,預設'transparent'
borderColorActive String 'transparent' No 輸入主動模式時邊框顏色字串,預設'transparent'
backgroundColor String 'rgb(241,241,241)' No 輸入背景顏色字串,預設'rgb(241,241,241)'
backgroundColorHover String 'rgb(236,236,236)' No 輸入滑鼠移入時背景顏色字串,預設'rgb(236,236,236)'
backgroundColorActive String 'orange' No 輸入主動模式時背景顏色字串,預設'orange'
tooltipBorderRadius Number 4 No 輸入提示文字框圓角度數字,單位為px,預設4
tooltipPaddingStyle Object {v:5,h:8} No 輸入提示文字內寬距離設定物件,可用鍵值為v、h、left、right、top、bottom,v代表同時設定top與bottom,h代表設定left與right,若有重複設定時後面鍵值會覆蓋前面,各鍵值為寬度數字,單位為px,預設{v:5,h:8}
tooltipTextFontSize String '0.85rem' No 輸入提示文字字型大小字串,預設'0.85rem'
tooltipTextColor String 'white' No 輸入提示文字顏色字串,預設'white'
tooltipBackgroundColor String 'rgba(60,60,60,0.75)' No 輸入背景顏色字串,預設'rgba(60,60,60,0.75)'
shadow Boolean false No 輸入是否顯示陰影布林值,預設false
shadowStyle String '' No 輸入陰影顏色字串,預設值詳見props
shadowActive Boolean true No 輸入主動模式時是否顯示陰影布林值,預設true
shadowActiveStyle String '' No 輸入主動模式時陰影顏色字串,預設值詳見props
rippleColor String 'rgba(255,255,255,0.4)' No 輸入ripple效果顏色字串,預設'rgba(255,255,255,0.4)'
paddingStyle Object {v:3,h:15} No 輸入內寬距離設定物件,可用鍵值為v、h、left、right、top、bottom,v代表同時設定top與bottom,h代表設定left與right,若有重複設定時後面鍵值會覆蓋前面,各鍵值為寬度數字,單位為px,預設{v:3,h:15}
shiftLeft Number 0 No 輸入左側內寬平移距離數字,會對paddingStyle設定再添加,可調整例如圖標與左側邊框距離,單位px,預設0
shiftRight Number 0 No 輸入右側內寬平移距離數字,會對paddingStyle設定再添加,可調整例如關閉圖標與右側邊框距離,單位px,預設0
active Boolean false No 輸入是否為主動模式布林值,預設false
close Boolean false No 輸入是否具有關閉按鈕模式布林值,預設false
cursorPointer Boolean true No 輸入是否滑鼠移入顯示pointer樣式布林值,預設true
loading Boolean false No 輸入是否為載入模式布林值,預設false
loadingColor String 'grey darken-2' No 輸入載入圖標顏色字串,預設'grey darken-2'
role String 'button' No 輸入角色字串,預設'button'
editable Boolean true No 輸入是否為編輯模式布林值,預設true
disabledColor String 'rgba(255,255,255,0.5)' No 輸入非編輯模式時遮罩顏色字串,預設'rgba(255,255,255,0.5)'

Props

Name Type Default value Required? Description
text String '' No 輸入文字字串,預設''
tooltip String '' No 輸入提示文字字串,預設''
icon String '' No 輸入圖標字串,可為mdi,md,fa代號或mdi/js路徑,預設''
iconColor String 'black' No 輸入圖標顏色字串,預設'black'
iconColorHover String 'grey darken-3' No 輸入滑鼠移入時圖標顏色字串,預設'grey darken-3'
iconColorActive String 'white' No 輸入主動模式時圖標顏色字串,預設'white'
iconSize Number 22 No 輸入左側圖標之尺寸數字,單位px,預設22
prog Number null No 輸入進度條進度數字,單位%,預設null
progColor String 'rgba(150,150,150,0.4)' No 輸入進度條顏色字串,預設'rgba(150,150,150,0.4)'
progBackgroundColor String 'rgba(150,150,150,0.075)' No 輸入進度條背景顏色字串,預設'rgba(150,150,150,0.075)'
textColor String 'black' No 輸入文字顏色字串,預設'black'
textColorHover String 'grey darken-3' No 輸入滑鼠移入時文字顏色字串,預設'grey darken-3'
textColorActive String 'white' No 輸入主動模式時文字顏色字串,預設'white'
textFontSize String '0.85rem' No 輸入文字字型大小字串,預設'0.85rem'
borderUsed Object {top:true,bottom:true,left:true,right:true} No 輸入是否繪製框設定物件,可用鍵值為left、right、top、bottom,各鍵值為是否繪製框線布林值,單位為px,預設{top:true,bottom:true,left:true,right:true}
borderWidth Object {top:1,bottom:1,left:1,right:1} No 輸入框寬度設定物件,可用鍵值為left、right、top、bottom,各鍵值為寬度數字,單位為px,預設{top:1,bottom:1,left:1,right:1}
borderRadius Number 30 No 輸入框圓角度數字,單位為px,預設30
borderRadiusStyle Object {left:true,right:true} No 輸入框圓角設定物件,可用鍵值為left、right、top、bottom、top-left、bottom-left、top-right、bottom-right,left代表設定top-left與bottom-left,right代表設定top-right與bottom-right,top代表設定top-left與top-right,bottom代表設定bottom-left與bottom-right,若有重複設定時後面鍵值會覆蓋前面,各鍵值為布林值,預設{left:true,right:true}
borderColor String 'transparent' No 輸入邊框顏色字串,預設'transparent'
borderColorHover String 'transparent' No 輸入滑鼠移入時邊框顏色字串,預設'transparent'
borderColorActive String 'transparent' No 輸入主動模式時邊框顏色字串,預設'transparent'
backgroundColor String 'rgb(241,241,241)' No 輸入背景顏色字串,預設'rgb(241,241,241)'
backgroundColorHover String 'rgb(236,236,236)' No 輸入滑鼠移入時背景顏色字串,預設'rgb(236,236,236)'
backgroundColorActive String 'orange' No 輸入主動模式時背景顏色字串,預設'orange'
tooltipBorderRadius Number 4 No 輸入提示文字框圓角度數字,單位為px,預設4
tooltipPaddingStyle Object {v:5,h:8} No 輸入提示文字內寬距離設定物件,可用鍵值為v、h、left、right、top、bottom,v代表同時設定top與bottom,h代表設定left與right,若有重複設定時後面鍵值會覆蓋前面,各鍵值為寬度數字,單位為px,預設{v:5,h:8}
tooltipTextFontSize String '0.85rem' No 輸入提示文字字型大小字串,預設'0.85rem'
tooltipTextColor String 'white' No 輸入提示文字顏色字串,預設'white'
tooltipBackgroundColor String 'rgba(60,60,60,0.75)' No 輸入背景顏色字串,預設'rgba(60,60,60,0.75)'
shadow Boolean false No 輸入是否顯示陰影布林值,預設false
shadowStyle String '' No 輸入陰影顏色字串,預設值詳見props
shadowActive Boolean true No 輸入主動模式時是否顯示陰影布林值,預設true
shadowActiveStyle String '' No 輸入主動模式時陰影顏色字串,預設值詳見props
rippleColor String 'rgba(255,255,255,0.4)' No 輸入ripple效果顏色字串,預設'rgba(255,255,255,0.4)'
paddingStyle Object {v:3,h:15} No 輸入內寬距離設定物件,可用鍵值為v、h、left、right、top、bottom,v代表同時設定top與bottom,h代表設定left與right,若有重複設定時後面鍵值會覆蓋前面,各鍵值為寬度數字,單位為px,預設{v:3,h:15}
shiftLeft Number 0 No 輸入左側內寬平移距離數字,會對paddingStyle設定再添加,可調整例如圖標與左側邊框距離,單位px,預設0
shiftRight Number 0 No 輸入右側內寬平移距離數字,會對paddingStyle設定再添加,可調整例如關閉圖標與右側邊框距離,單位px,預設0
active Boolean false No 輸入是否為主動模式布林值,預設false
close Boolean false No 輸入是否具有關閉按鈕模式布林值,預設false
cursorPointer Boolean true No 輸入是否滑鼠移入顯示pointer樣式布林值,預設true
loading Boolean false No 輸入是否為載入模式布林值,預設false
loadingColor String 'grey darken-2' No 輸入載入圖標顏色字串,預設'grey darken-2'
role String 'button' No 輸入角色字串,預設'button'
editable Boolean true No 輸入是否為編輯模式布林值,預設true
disabledColor String 'rgba(255,255,255,0.5)' No 輸入非編輯模式時遮罩顏色字串,預設'rgba(255,255,255,0.5)'