# WExplorer

Description:

### Props

Name | Type | Default value | Required? | Description
--- | --- | --- | --- | ---
`items` | Array | `[]` | No | 輸入項目物件陣列，預設[]
`bindRoot` | String | `'root'` | No | 輸入建置根目錄名稱字串，預設'root'
`funSortTree` | function | `null` | No | 輸入排序樹狀資料夾名稱函數，預設null
`showTree` | Boolean | `true` | No | 輸入是否顯示樹狀資料夾布林值，預設true
`defaultShowTreeFirst` | Boolean | `true` | No | 輸入是否預先顯示樹狀資料夾之第1個資料夾布林值，預設true
`treeWidth` | Number | `250` | No | 輸入樹狀資料夾寬度數字，單位為px，預設250
`treeWidthMin` | Number | `null` | No | 輸入樹狀資料夾可拖曳寬度之最小值數字，單位為px，預設null
`treeWidthMax` | Number | `null` | No | 輸入樹狀資料夾可拖曳寬度之最大值數字，單位為px，預設null
`treeAfloat` | Boolean | `false` | No | 輸入是否樹狀資料夾為浮動顯示布林值，設為true時浮在內容區上故不壓縮內容區寬度，預設false
`treeDefItemHeight` | Number | `30` | No | 輸入樹狀資料夾之按需顯示時各項目預設最小高度(min-height)值，給越準或給大部分項目的高度則渲染速度越快，單位為px，預設30
`treeDefaultDisplayLevel` | Number | `null` | No | 輸入樹狀資料夾之初始展開層數數字，若輸入1就是預設展開至第1層，第2層(含)以下則都隱藏，若輸入null就是全展開，預設null
`treePaddingStyle` | Object | `{v:0,h:0}` | No | 輸入樹狀資料夾之內寬距離物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:0,h:0}
`treeIndent` | Number | `0.7` | No | 輸入樹狀資料夾之縮排比率數字，若使用1就是1倍的圖標寬度(24px)+2*separation(3px)，預設0.7
`treeItemTextColor` | String | `'#444'` | No | 輸入樹狀資料夾之文字顏色字串，預設'#444'
`treeItemTextColorHover` | String | `'#222'` | No | 輸入滑鼠移入時樹狀資料夾之文字顏色字串，預設'#222'
`treeItemTextColorActive` | String | `'#000'` | No | 輸入主動模式時樹狀資料夾之文字顏色字串，預設'#000'
`treeFolderIcon` | String | `mdiFolder` | No | 輸入樹狀資料夾之資料夾圖標字串，預設mdiFolder
`treeFolderIconSize` | Number | `20` | No | 輸入樹狀資料夾之資料夾圖標之尺寸數字，單位為px，預設20
`treeFolderIconColor` | String | `'#888'` | No | 輸入樹狀資料夾之資料夾圖標顏色字串，預設'#888'
`treeFolderIconColorHover` | String | `'#777'` | No | 輸入滑鼠移入時樹狀資料夾之資料夾圖標顏色字串，預設'#777'
`treeFolderIconColorActive` | String | `'#666'` | No | 輸入主動模式時樹狀資料夾之資料夾圖標顏色字串，預設'#666'
`treeItemBackgroundColor` | String | `'transparent'` | No | 輸入樹狀資料夾之項目區背景顏色字串，預設'transparent'
`treeItemBackgroundColorHover` | String | `'rgba(200,200,200,0.2)'` | No | 輸入滑鼠移入時樹狀資料夾之項目區背景顏色字串，預設'rgba(200,200,200,0.2)'
`treeItemBackgroundColorActive` | String | `'rgba(100,100,100,0.2)'` | No | 輸入主動模式時樹狀資料夾之項目區背景顏色字串，預設'rgba(100,100,100,0.2)'
`treeItemRippleColor` | String | `'rgba(200,200,200,0.4)'` | No | 輸入樹狀資料夾之項目區ripple效果顏色字串，預設'rgba(200,200,200,0.4)'
`treeBackgroundColor` | String | `'#fff'` | No | 輸入樹狀資料夾背景顏色字串，預設'#fff'
`treeDrawerBarSize` | Number | `2` | No | 輸入樹狀資料夾抽屜之分隔條尺寸數字，為分隔條寬度，單位為px，預設2
`treeDrawerBarColor` | String | `'#ddd'` | No | 輸入樹狀資料夾抽屜之分隔條顏色字串，預設'#ddd'
`treeToggleIconSize` | Number | `24` | No | 輸入顯隱樹狀資料夾按鈕之圖標尺寸數字，單位為px，預設24
`treeToggleIconColor` | String | `'grey'` | No | 輸入顯隱樹狀資料夾按鈕之圖標顏色字串，預設'grey'
`treeToggleIconDisabledColor` | String | `'grey lighten-1'` | No | 輸入顯隱樹狀資料夾按鈕之禁用時圖標顏色字串，預設'grey lighten-1'
`treeToggleIconBackgroundColor` | String | `'transparent'` | No | 輸入顯隱樹狀資料夾按鈕之圖標背景顏色字串，預設'transparent'
`treeToggleIconBackgroundColorHover` | String | `'rgba(128,128,128,0.15)'` | No | 輸入滑鼠移入時顯隱樹狀資料夾按鈕之圖標背景顏色字串，預設'rgba(128,128,128,0.15)'
`lineBetweenPathAndListWidth` | Number | `1` | No | 輸入路徑區與清單區之間分隔線寬度，單位為px，預設1
`lineBetweenPathAndListColor` | String | `'#ddd'` | No | 輸入路徑區與清單區之間分隔線顏色字串，預設'#ddd'
`listDefItemHeight` | Number | `30` | No | 輸入清單區按需顯示時各項目預設最小高度(min-height)值，單位為px，預設30
`listPaddingStyle` | Object | `{v:0,h:6}` | No | 輸入清單區項目之內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:0,h:6}
`listItemTextFontSize` | String | `'0.85rem'` | No | 輸入清單區項目之文字字型大小字串，預設'0.85rem'
`listItemTextColor` | String | `'#444'` | No | 輸入清單區項目之文字顏色字串，預設'#444'
`listItemTextColorHover` | String | `'#222'` | No | 輸入滑鼠移入時清單區項目之文字顏色字串，預設'#222'
`listItemTextColorActive` | String | `'#000'` | No | 輸入主動模式時清單區項目之文字顏色字串，預設'#000'
`listFolderIcon` | String | `mdiFolder` | No | 輸入清單區項目之資料夾圖標字串，預設mdiFolder
`listFileIcon` | String | `mdiFileOutline` | No | 輸入清單區項目之檔案圖標字串，預設mdiFileOutline
`listItemIconSize` | Number | `22` | No | 輸入清單區項目之圖標尺寸數字，單位為px，預設22
`listItemIconColor` | String | `'#888'` | No | 輸入清單區項目之圖標顏色字串，預設'#888'
`listItemIconColorHover` | String | `'#777'` | No | 輸入滑鼠移入時清單區項目之圖標顏色字串，預設'#777'
`listItemIconColorActive` | String | `'#666'` | No | 輸入主動模式時清單區項目之圖標顏色字串，預設'#666'
`listItemBackgroundColor` | String | `'transparent'` | No | 輸入清單區項目之背景顏色字串，預設'transparent'
`listItemBackgroundColorHover` | String | `'rgba(200,200,200,0.2)'` | No | 輸入滑鼠移入時清單區項目之背景顏色字串，預設'rgba(200,200,200,0.2)'
`listItemBackgroundColorActive` | String | `'rgba(100,100,100,0.2)'` | No | 輸入主動模式時清單區項目之背景顏色字串，預設'rgba(100,100,100,0.2)'
`listItemRippleColor` | String | `'rgba(255,255,255,0.4)'` | No | 輸入清單區項目之ripple效果顏色字串，預設'rgba(255,255,255,0.4)'
`listBackgroundColor` | String | `'#fff'` | No | 輸入清單區背景顏色字串，預設'#fff'
`btnDisplayTreeIconShow` | String | `mdiArrowRightBoldHexagonOutline` | No | 輸入顯示樹狀資料夾按鈕圖標字串，預設mdiArrowRightBoldHexagonOutline
`btnDisplayTreeIconShow` | String | `mdiArrowLeftBoldHexagonOutline` | No | 輸入隱藏樹狀資料夾按鈕圖標字串，預設mdiArrowLeftBoldHexagonOutline
`btnDisplayTreeIconSize` | Number | `20` | No | 輸入顯隱樹狀資料夾按鈕圖標之尺寸數字，單位為px，預設20
`btnDisplayTreeIconColor` | String | `'grey darken-1'` | No | 輸入顯隱樹狀資料夾按鈕圖標顏色字串，預設'grey darken-1'
`btnDisplayTreeIconColorHover` | String | `'grey darken-2'` | No | 輸入滑鼠移入時顯隱樹狀資料夾按鈕圖標顏色字串，預設'grey darken-2'
`btnDisplayTreeIconColorFocus` | String | `'grey darken-3'` | No | 輸入取得焦點時顯隱樹狀資料夾按鈕圖標顏色字串，預設'grey darken-3'
`btnDisplayTreeBackgroundColor` | String | `'transparent'` | No | 輸入顯隱樹狀資料夾按鈕背景顏色字串，預設'transparent'
`btnDisplayTreeBackgroundColorHover` | String | `'rgba(200,200,200,0.3)'` | No | 輸入滑鼠移入時顯隱樹狀資料夾按鈕背景顏色字串，預設'rgba(200,200,200,0.3)'
`btnDisplayTreeBackgroundColorFocus` | String | `'rgba(180,180,180,0.3)'` | No | 輸入主動模式時顯隱樹狀資料夾按鈕背景顏色字串，預設'rgba(180,180,180,0.3)'
`pathBtnTextColor` | String | `'#444'` | No | 輸入路徑區按鈕之文字顏色字串，預設'#444'
`pathBtnTextColorHover` | String | `'#222'` | No | 輸入滑鼠移入時路徑區按鈕之文字顏色字串，預設'#222'
`pathBtnTextFontSize` | String | `'0.85rem'` | No | 輸入路徑區按鈕之文字字型大小字串，預設'0.85rem'
`pathBtnBackgroundColor` | String | `'transparent'` | No | 輸入路徑區按鈕之背景顏色字串，預設'transparent'
`pathBtnBackgroundColorHover` | String | `'rgb(236,236,236)'` | No | 輸入滑鼠移入時路徑區按鈕之背景顏色字串，預設'rgb(236,236,236)'
`pathSepIcon` | String | `mdiChevronRight` | No | 輸入路徑區分隔符號之圖標字串，預設mdiChevronRight
`pathSepIconColor` | String | `'#888'` | No | 輸入路徑區分隔符號之圖標顏色字串，預設'#888'
`pathSepIconSize` | Number | `18` | No | 輸入路徑區分隔符號之圖標尺寸數字，單位為px，預設18
`pathBackgroundColor` | String | `'transparent'` | No | 輸入路徑區背景顏色字串，預設'#fff'
`noSelectedText` | String | `'No selected folder'` | No | 輸入尚未選擇資料夾文字字串，預設'No selected folder'
`draggable` | Boolean | `false` | No | 輸入是否為可拖曳編輯模式布林值，若draggable設定true，此時所有節點皆為展開顯示並且禁止顯隱節點功能，也就是defaultDisplayLevel強制設定為null，此外也不提供過濾功能，也就是filterKeywords強制清空。開啟draggable僅適用小規模數據。draggable預設false
`dgTextDisabled` | String | `'Can not drop here'` | No | 輸入禁止拖曳文字字串，預設'Can not drop here'
`dgTextDisabledColor` | String | `'#812'` | No | 輸入禁止拖曳文字顏色字串，預設'#812'
`dgTextDisabledPaddingLeft` | Number | `15` | No | 輸入禁止拖曳padding-left數字，單位px，預設15
`dgTextDisabledFontSize` | String | `'0.9rem'` | No | 輸入禁止拖曳文字大小字串，預設'0.9rem'
`dgTextDisabledBackgroundColor` | String | `'rgba(255,220,240,0.6)'` | No | 輸入禁止拖曳文字區背景顏色字串，預設'rgba(255,220,240,0.6)'
`dgInsertLineColor` | String | `'#29f'` | No | 輸入拖曳時顯示插入區域線顏色字串，預設'#29f'
`dgInsertBackgroundColor` | String | `'rgba(80,150,255,0.15)'` | No | 輸入拖曳時顯示插入區域背景顏色字串，預設'rgba(80,150,255,0.15)'
`dgBelongBackgroundColor` | String | `'rgba(80,150,255,0.3)'` | No | 輸入拖曳時顯示插入區域(成為目標的子節點)背景顏色字串，預設'rgba(80,150,255,0.3)'
`dgPreviewOpacity` | Number | `1` | No | 輸入拖曳時預覽元素透明度數字，預設1
`dgPreviewDisabledOpacity` | Number | `1` | No | 輸入無效時(位於非可拖曳元素內)拖曳時預覽元素透明度數字，預設1
`dgPreviewBorderWidth` | Number | `0` | No | 輸入拖曳時預覽元素邊框寬度數字，單位px，預設0
`dgPreviewBorderColor` | String | `'#f26'` | No | 輸入拖曳時預覽元素邊框顏色字串，預設'#f26'
`dgPreviewBackground` | String | `'transparent'` | No | 輸入拖曳時預覽元素背景顏色字串，預設'transparent'
`operatable` | Boolean | `false` | No | 輸入是否使用控制節點模式布林值，若operatable設定true，將於各項目右側顯示控制按鈕，點擊可彈出選單進行插入與刪除等項目，此時會觸發事件click-operate-item，而處理相應數據則需呼叫事件提供物件內operateItem函數，詳情請見範例。此時所有節點皆為展開顯示並且禁止顯隱節點功能，也就是defaultDisplayLevel強制設定為null，此外也不提供過濾功能，也就是filterKeywords強制清空。開啟operatable僅適用小規模數據。operatable預設false
`operateItemTextForRename` | String | `'Rename folder'` | No | 輸入控制選項變更文字之文字字串，預設'Rename folder'
`operateItemTextForInsertChild` | String | `'Create sub folder'` | No | 輸入控制選項插入子項目之文字字串，預設'Create sub folder'
`operateItemTextForDelete` | String | `'Delete folder'` | No | 輸入控制選項刪除項目之文字字串，預設'Delete folder'
`operateItemIconForRename` | String | `mdiRenameOutline` | No | 輸入控制選項變更文字之圖標字串，預設mdiRenameOutline
`operateItemIconForInsertChild` | String | `mdiFolderPlusOutline` | No | 輸入控制選項插入子項目之圖標字串，預設mdiFolderPlusOutline
`operateItemIconForDelete` | String | `mdiFolderRemoveOutline` | No | 輸入控制選項刪除項目之圖標字串，預設mdiFolderRemoveOutline
`operateItemPaddingStyle` | Object | `{v:10,h:12}` | No | 輸入控制選項內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:10,h:12}
`operatePanelWidth` | Number | `170` | No | 輸入控制選項寬度數字，單位px，預設170
`operatePanelHeight` | Number | `null` | No | 輸入控制選項高度數字，若為null則使用選項數量*operateItemHeight，單位px，預設null
`operateBtnTooltip` | String | `'Operations'` | No | 輸入控制按鈕之提示文字字串，預設'Operations'
`operateBtnBackgroundColor` | String | `'transparent'` | No | 輸入控制按鈕背景顏色字串，預設'transparent'
`operateBtnBackgroundColorHover` | String | `'rgba(230,230,230,0.7)'` | No | 輸入滑鼠移入時控制按鈕背景顏色字串，預設'rgba(230,230,230,0.7)'
`operateBtnBackgroundColorFocus` | String | `'rgba(230,230,230,0.9)'` | No | 輸入取得焦點時控制按鈕背景顏色字串，預設'rgba(230,230,230,0.9)'
`operateItemBackgroundColor` | String | `'transparent'` | No | 輸入控制項目背景顏色字串，預設'transparent'
`operateItemBackgroundColorHover` | String | `'rgba(200,200,200,0.2)'` | No | 輸入滑鼠移入時控制項目背景顏色字串，預設'rgba(200,200,200,0.2)'
`operateItemHeight` | Number | `42` | No | 輸入控制項目高度數字，單位px，預設42
`operateItemTextColor` | String | `'#444'` | No | 輸入控制項目文字顏色字串，預設'#444'
`operateItemTextColorHover` | String | `'#222'` | No | 輸入滑鼠移入時控制項目文字顏色字串，預設'#222'
`operateItemIconSize` | Number | `22` | No | 輸入控制項目圖標尺寸數字，單位px，預設22
`operateItemIconColor` | String | `'#444'` | No | 輸入控制項目圖標顏色字串，預設'#444'
`operateItemIconColorHover` | String | `'#222'` | No | 輸入滑鼠移入時控制項目圖標顏色字串，預設'#222'
`editorRenameContentBackgroundColor` | String | `'white'` | No | 輸入變更文字彈窗之內容區塊背景顏色字串，預設'white'
`editorRenameFooterBackgroundColor` | String | `'grey lighten-5'` | No | 輸入變更文字彈窗之下方區背景顏色字串，預設'grey lighten-5'
`editorRenameInputTextColor` | String | `'grey darken-3'` | No | 輸入變更文字彈窗之輸入文字框之文字顏色字串，預設'grey darken-3'
`editorRenameInputTextBottomLineBorderColor` | String | `'grey lighten-1'` | No | 輸入變更文字彈窗之輸入文字框之底部線顏色字串，預設'grey lighten-1'
`editorRenameInputTextBottomLineBorderColorHover` | String | `'grey'` | No | 輸入變更文字彈窗之輸入文字框之滑鼠移入時底部線顏色字串，預設'grey'
`editorRenameInputTextBottomLineBorderColorFocus` | String | `'blue darken-1'` | No | 輸入變更文字彈窗之輸入文字框之取得焦點時底部線顏色字串，預設'blue darken-1'
`editorRenameCancelBtnText` | String | `'Save'` | No | 輸入變更文字彈窗之取消按鈕文字字串，預設'Save'
`editorRenameCancelBtnTextColor` | String | `'grey darken-3'` | No | 輸入變更文字彈窗之取消按鈕文字顏色字串，預設'grey darken-3'
`editorRenameCancelBtnTextColorHover` | String | `'grey darken-2'` | No | 輸入變更文字彈窗之滑鼠移入時取消按鈕文字顏色字串，預設'grey darken-2'
`editorRenameCancelBtnIcon` | String | `mdiCloseCircleOutline` | No | 輸入變更文字彈窗之取消按鈕圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設mdiCloseCircleOutline
`editorRenameCancelBtnIconSize` | Number | `22` | No | 輸入變更文字彈窗之取消按鈕圖標大小，單位為px，預設22
`editorRenameCancelBtnIconColor` | String | `'grey darken-1'` | No | 輸入變更文字彈窗之取消按鈕圖標顏色字串，預設'grey darken-1'
`editorRenameCancelBtnIconColorHover` | String | `'grey darken-2'` | No | 輸入變更文字彈窗之滑鼠移入時取消按鈕圖標顏色字串，預設'grey darken-2'
`editorRenameCancelBtnIconRippleColor` | String | `'rgba(200,200,200,0.4)'` | No | 輸入變更文字彈窗之取消按鈕ripple效果顏色字串，預設'rgba(200,200,200,0.4)'
`editorRenameCancelBtnBackgroundColor` | String | `'white'` | No | 輸入變更文字彈窗之取消按鈕背景顏色字串，預設'white'
`editorRenameCancelBtnBackgroundColorHover` | String | `'grey lighten-3'` | No | 輸入變更文字彈窗之滑鼠移入時取消按鈕背景顏色字串，預設'grey lighten-3'
`editorRenameSaveBtnText` | String | `'Save'` | No | 輸入變更文字彈窗之儲存按鈕文字字串，預設'Save'
`editorRenameSaveBtnTextColor` | String | `'grey darken-3'` | No | 輸入變更文字彈窗之儲存按鈕文字顏色字串，預設'grey darken-3'
`editorRenameSaveBtnTextColorHover` | String | `'grey darken-2'` | No | 輸入變更文字彈窗之滑鼠移入時儲存按鈕文字顏色字串，預設'grey darken-2'
`editorRenameSaveBtnIcon` | String | `mdiCloudUploadOutline` | No | 輸入變更文字彈窗之儲存按鈕圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設mdiCheckboxMarkedCircle
`editorRenameSaveBtnIconSize` | Number | `22` | No | 輸入變更文字彈窗之儲存按鈕圖標大小，單位為px，預設22
`editorRenameSaveBtnIconColor` | String | `'grey darken-1'` | No | 輸入變更文字彈窗之儲存按鈕圖標顏色字串，預設'grey darken-1'
`editorRenameSaveBtnIconColorHover` | String | `'grey darken-2'` | No | 輸入變更文字彈窗之滑鼠移入時儲存按鈕圖標顏色字串，預設'grey darken-2'
`editorRenameSaveBtnIconRippleColor` | String | `'rgba(200,200,200,0.4)'` | No | 輸入變更文字彈窗之儲存按鈕ripple效果顏色字串，預設'rgba(200,200,200,0.4)'
`editorRenameSaveBtnBackgroundColor` | String | `'white'` | No | 輸入變更文字彈窗之儲存按鈕背景顏色字串，預設'white'
`editorRenameSaveBtnBackgroundColorHover` | String | `'grey lighten-3'` | No | 輸入變更文字彈窗之滑鼠移入時儲存按鈕背景顏色字串，預設'grey lighten-3'

### Props

Name | Type | Default value | Required? | Description
--- | --- | --- | --- | ---
`items` | Array | `[]` | No | 輸入項目物件陣列，預設[]
`bindRoot` | String | `'root'` | No | 輸入建置根目錄名稱字串，預設'root'
`funSortTree` | function | `null` | No | 輸入排序樹狀資料夾名稱函數，預設null
`showTree` | Boolean | `true` | No | 輸入是否顯示樹狀資料夾布林值，預設true
`defaultShowTreeFirst` | Boolean | `true` | No | 輸入是否預先顯示樹狀資料夾之第1個資料夾布林值，預設true
`treeWidth` | Number | `250` | No | 輸入樹狀資料夾寬度數字，單位為px，預設250
`treeWidthMin` | Number | `null` | No | 輸入樹狀資料夾可拖曳寬度之最小值數字，單位為px，預設null
`treeWidthMax` | Number | `null` | No | 輸入樹狀資料夾可拖曳寬度之最大值數字，單位為px，預設null
`treeAfloat` | Boolean | `false` | No | 輸入是否樹狀資料夾為浮動顯示布林值，設為true時浮在內容區上故不壓縮內容區寬度，預設false
`treeDefItemHeight` | Number | `30` | No | 輸入樹狀資料夾之按需顯示時各項目預設最小高度(min-height)值，給越準或給大部分項目的高度則渲染速度越快，單位為px，預設30
`treeDefaultDisplayLevel` | Number | `null` | No | 輸入樹狀資料夾之初始展開層數數字，若輸入1就是預設展開至第1層，第2層(含)以下則都隱藏，若輸入null就是全展開，預設null
`treePaddingStyle` | Object | `{v:0,h:0}` | No | 輸入樹狀資料夾之內寬距離物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:0,h:0}
`treeIndent` | Number | `0.7` | No | 輸入樹狀資料夾之縮排比率數字，若使用1就是1倍的圖標寬度(24px)+2*separation(3px)，預設0.7
`treeItemTextColor` | String | `'#444'` | No | 輸入樹狀資料夾之文字顏色字串，預設'#444'
`treeItemTextColorHover` | String | `'#222'` | No | 輸入滑鼠移入時樹狀資料夾之文字顏色字串，預設'#222'
`treeItemTextColorActive` | String | `'#000'` | No | 輸入主動模式時樹狀資料夾之文字顏色字串，預設'#000'
`treeFolderIcon` | String | `mdiFolder` | No | 輸入樹狀資料夾之資料夾圖標字串，預設mdiFolder
`treeFolderIconSize` | Number | `20` | No | 輸入樹狀資料夾之資料夾圖標之尺寸數字，單位為px，預設20
`treeFolderIconColor` | String | `'#888'` | No | 輸入樹狀資料夾之資料夾圖標顏色字串，預設'#888'
`treeFolderIconColorHover` | String | `'#777'` | No | 輸入滑鼠移入時樹狀資料夾之資料夾圖標顏色字串，預設'#777'
`treeFolderIconColorActive` | String | `'#666'` | No | 輸入主動模式時樹狀資料夾之資料夾圖標顏色字串，預設'#666'
`treeItemBackgroundColor` | String | `'transparent'` | No | 輸入樹狀資料夾之項目區背景顏色字串，預設'transparent'
`treeItemBackgroundColorHover` | String | `'rgba(200,200,200,0.2)'` | No | 輸入滑鼠移入時樹狀資料夾之項目區背景顏色字串，預設'rgba(200,200,200,0.2)'
`treeItemBackgroundColorActive` | String | `'rgba(100,100,100,0.2)'` | No | 輸入主動模式時樹狀資料夾之項目區背景顏色字串，預設'rgba(100,100,100,0.2)'
`treeItemRippleColor` | String | `'rgba(200,200,200,0.4)'` | No | 輸入樹狀資料夾之項目區ripple效果顏色字串，預設'rgba(200,200,200,0.4)'
`treeBackgroundColor` | String | `'#fff'` | No | 輸入樹狀資料夾背景顏色字串，預設'#fff'
`treeDrawerBarSize` | Number | `2` | No | 輸入樹狀資料夾抽屜之分隔條尺寸數字，為分隔條寬度，單位為px，預設2
`treeDrawerBarColor` | String | `'#ddd'` | No | 輸入樹狀資料夾抽屜之分隔條顏色字串，預設'#ddd'
`treeToggleIconSize` | Number | `24` | No | 輸入顯隱樹狀資料夾按鈕之圖標尺寸數字，單位為px，預設24
`treeToggleIconColor` | String | `'grey'` | No | 輸入顯隱樹狀資料夾按鈕之圖標顏色字串，預設'grey'
`treeToggleIconDisabledColor` | String | `'grey lighten-1'` | No | 輸入顯隱樹狀資料夾按鈕之禁用時圖標顏色字串，預設'grey lighten-1'
`treeToggleIconBackgroundColor` | String | `'transparent'` | No | 輸入顯隱樹狀資料夾按鈕之圖標背景顏色字串，預設'transparent'
`treeToggleIconBackgroundColorHover` | String | `'rgba(128,128,128,0.15)'` | No | 輸入滑鼠移入時顯隱樹狀資料夾按鈕之圖標背景顏色字串，預設'rgba(128,128,128,0.15)'
`lineBetweenPathAndListWidth` | Number | `1` | No | 輸入路徑區與清單區之間分隔線寬度，單位為px，預設1
`lineBetweenPathAndListColor` | String | `'#ddd'` | No | 輸入路徑區與清單區之間分隔線顏色字串，預設'#ddd'
`listDefItemHeight` | Number | `30` | No | 輸入清單區按需顯示時各項目預設最小高度(min-height)值，單位為px，預設30
`listPaddingStyle` | Object | `{v:0,h:6}` | No | 輸入清單區項目之內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:0,h:6}
`listItemTextFontSize` | String | `'0.85rem'` | No | 輸入清單區項目之文字字型大小字串，預設'0.85rem'
`listItemTextColor` | String | `'#444'` | No | 輸入清單區項目之文字顏色字串，預設'#444'
`listItemTextColorHover` | String | `'#222'` | No | 輸入滑鼠移入時清單區項目之文字顏色字串，預設'#222'
`listItemTextColorActive` | String | `'#000'` | No | 輸入主動模式時清單區項目之文字顏色字串，預設'#000'
`listFolderIcon` | String | `mdiFolder` | No | 輸入清單區項目之資料夾圖標字串，預設mdiFolder
`listFileIcon` | String | `mdiFileOutline` | No | 輸入清單區項目之檔案圖標字串，預設mdiFileOutline
`listItemIconSize` | Number | `22` | No | 輸入清單區項目之圖標尺寸數字，單位為px，預設22
`listItemIconColor` | String | `'#888'` | No | 輸入清單區項目之圖標顏色字串，預設'#888'
`listItemIconColorHover` | String | `'#777'` | No | 輸入滑鼠移入時清單區項目之圖標顏色字串，預設'#777'
`listItemIconColorActive` | String | `'#666'` | No | 輸入主動模式時清單區項目之圖標顏色字串，預設'#666'
`listItemBackgroundColor` | String | `'transparent'` | No | 輸入清單區項目之背景顏色字串，預設'transparent'
`listItemBackgroundColorHover` | String | `'rgba(200,200,200,0.2)'` | No | 輸入滑鼠移入時清單區項目之背景顏色字串，預設'rgba(200,200,200,0.2)'
`listItemBackgroundColorActive` | String | `'rgba(100,100,100,0.2)'` | No | 輸入主動模式時清單區項目之背景顏色字串，預設'rgba(100,100,100,0.2)'
`listItemRippleColor` | String | `'rgba(255,255,255,0.4)'` | No | 輸入清單區項目之ripple效果顏色字串，預設'rgba(255,255,255,0.4)'
`listBackgroundColor` | String | `'#fff'` | No | 輸入清單區背景顏色字串，預設'#fff'
`btnDisplayTreeIconShow` | String | `mdiArrowRightBoldHexagonOutline` | No | 輸入顯示樹狀資料夾按鈕圖標字串，預設mdiArrowRightBoldHexagonOutline
`btnDisplayTreeIconShow` | String | `mdiArrowLeftBoldHexagonOutline` | No | 輸入隱藏樹狀資料夾按鈕圖標字串，預設mdiArrowLeftBoldHexagonOutline
`btnDisplayTreeIconSize` | Number | `20` | No | 輸入顯隱樹狀資料夾按鈕圖標之尺寸數字，單位為px，預設20
`btnDisplayTreeIconColor` | String | `'grey darken-1'` | No | 輸入顯隱樹狀資料夾按鈕圖標顏色字串，預設'grey darken-1'
`btnDisplayTreeIconColorHover` | String | `'grey darken-2'` | No | 輸入滑鼠移入時顯隱樹狀資料夾按鈕圖標顏色字串，預設'grey darken-2'
`btnDisplayTreeIconColorFocus` | String | `'grey darken-3'` | No | 輸入取得焦點時顯隱樹狀資料夾按鈕圖標顏色字串，預設'grey darken-3'
`btnDisplayTreeBackgroundColor` | String | `'transparent'` | No | 輸入顯隱樹狀資料夾按鈕背景顏色字串，預設'transparent'
`btnDisplayTreeBackgroundColorHover` | String | `'rgba(200,200,200,0.3)'` | No | 輸入滑鼠移入時顯隱樹狀資料夾按鈕背景顏色字串，預設'rgba(200,200,200,0.3)'
`btnDisplayTreeBackgroundColorFocus` | String | `'rgba(180,180,180,0.3)'` | No | 輸入主動模式時顯隱樹狀資料夾按鈕背景顏色字串，預設'rgba(180,180,180,0.3)'
`pathBtnTextColor` | String | `'#444'` | No | 輸入路徑區按鈕之文字顏色字串，預設'#444'
`pathBtnTextColorHover` | String | `'#222'` | No | 輸入滑鼠移入時路徑區按鈕之文字顏色字串，預設'#222'
`pathBtnTextFontSize` | String | `'0.85rem'` | No | 輸入路徑區按鈕之文字字型大小字串，預設'0.85rem'
`pathBtnBackgroundColor` | String | `'transparent'` | No | 輸入路徑區按鈕之背景顏色字串，預設'transparent'
`pathBtnBackgroundColorHover` | String | `'rgb(236,236,236)'` | No | 輸入滑鼠移入時路徑區按鈕之背景顏色字串，預設'rgb(236,236,236)'
`pathSepIcon` | String | `mdiChevronRight` | No | 輸入路徑區分隔符號之圖標字串，預設mdiChevronRight
`pathSepIconColor` | String | `'#888'` | No | 輸入路徑區分隔符號之圖標顏色字串，預設'#888'
`pathSepIconSize` | Number | `18` | No | 輸入路徑區分隔符號之圖標尺寸數字，單位為px，預設18
`pathBackgroundColor` | String | `'transparent'` | No | 輸入路徑區背景顏色字串，預設'#fff'
`noSelectedText` | String | `'No selected folder'` | No | 輸入尚未選擇資料夾文字字串，預設'No selected folder'
`draggable` | Boolean | `false` | No | 輸入是否為可拖曳編輯模式布林值，若draggable設定true，此時所有節點皆為展開顯示並且禁止顯隱節點功能，也就是defaultDisplayLevel強制設定為null，此外也不提供過濾功能，也就是filterKeywords強制清空。開啟draggable僅適用小規模數據。draggable預設false
`dgTextDisabled` | String | `'Can not drop here'` | No | 輸入禁止拖曳文字字串，預設'Can not drop here'
`dgTextDisabledColor` | String | `'#812'` | No | 輸入禁止拖曳文字顏色字串，預設'#812'
`dgTextDisabledPaddingLeft` | Number | `15` | No | 輸入禁止拖曳padding-left數字，單位px，預設15
`dgTextDisabledFontSize` | String | `'0.9rem'` | No | 輸入禁止拖曳文字大小字串，預設'0.9rem'
`dgTextDisabledBackgroundColor` | String | `'rgba(255,220,240,0.6)'` | No | 輸入禁止拖曳文字區背景顏色字串，預設'rgba(255,220,240,0.6)'
`dgInsertLineColor` | String | `'#29f'` | No | 輸入拖曳時顯示插入區域線顏色字串，預設'#29f'
`dgInsertBackgroundColor` | String | `'rgba(80,150,255,0.15)'` | No | 輸入拖曳時顯示插入區域背景顏色字串，預設'rgba(80,150,255,0.15)'
`dgBelongBackgroundColor` | String | `'rgba(80,150,255,0.3)'` | No | 輸入拖曳時顯示插入區域(成為目標的子節點)背景顏色字串，預設'rgba(80,150,255,0.3)'
`dgPreviewOpacity` | Number | `1` | No | 輸入拖曳時預覽元素透明度數字，預設1
`dgPreviewDisabledOpacity` | Number | `1` | No | 輸入無效時(位於非可拖曳元素內)拖曳時預覽元素透明度數字，預設1
`dgPreviewBorderWidth` | Number | `0` | No | 輸入拖曳時預覽元素邊框寬度數字，單位px，預設0
`dgPreviewBorderColor` | String | `'#f26'` | No | 輸入拖曳時預覽元素邊框顏色字串，預設'#f26'
`dgPreviewBackground` | String | `'transparent'` | No | 輸入拖曳時預覽元素背景顏色字串，預設'transparent'
`operatable` | Boolean | `false` | No | 輸入是否使用控制節點模式布林值，若operatable設定true，將於各項目右側顯示控制按鈕，點擊可彈出選單進行插入與刪除等項目，此時會觸發事件click-operate-item，而處理相應數據則需呼叫事件提供物件內operateItem函數，詳情請見範例。此時所有節點皆為展開顯示並且禁止顯隱節點功能，也就是defaultDisplayLevel強制設定為null，此外也不提供過濾功能，也就是filterKeywords強制清空。開啟operatable僅適用小規模數據。operatable預設false
`operateItemTextForRename` | String | `'Rename folder'` | No | 輸入控制選項變更文字之文字字串，預設'Rename folder'
`operateItemTextForInsertChild` | String | `'Create sub folder'` | No | 輸入控制選項插入子項目之文字字串，預設'Create sub folder'
`operateItemTextForDelete` | String | `'Delete folder'` | No | 輸入控制選項刪除項目之文字字串，預設'Delete folder'
`operateItemIconForRename` | String | `mdiRenameOutline` | No | 輸入控制選項變更文字之圖標字串，預設mdiRenameOutline
`operateItemIconForInsertChild` | String | `mdiFolderPlusOutline` | No | 輸入控制選項插入子項目之圖標字串，預設mdiFolderPlusOutline
`operateItemIconForDelete` | String | `mdiFolderRemoveOutline` | No | 輸入控制選項刪除項目之圖標字串，預設mdiFolderRemoveOutline
`operateItemPaddingStyle` | Object | `{v:10,h:12}` | No | 輸入控制選項內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:10,h:12}
`operatePanelWidth` | Number | `170` | No | 輸入控制選項寬度數字，單位px，預設170
`operatePanelHeight` | Number | `null` | No | 輸入控制選項高度數字，若為null則使用選項數量*operateItemHeight，單位px，預設null
`operateBtnTooltip` | String | `'Operations'` | No | 輸入控制按鈕之提示文字字串，預設'Operations'
`operateBtnBackgroundColor` | String | `'transparent'` | No | 輸入控制按鈕背景顏色字串，預設'transparent'
`operateBtnBackgroundColorHover` | String | `'rgba(230,230,230,0.7)'` | No | 輸入滑鼠移入時控制按鈕背景顏色字串，預設'rgba(230,230,230,0.7)'
`operateBtnBackgroundColorFocus` | String | `'rgba(230,230,230,0.9)'` | No | 輸入取得焦點時控制按鈕背景顏色字串，預設'rgba(230,230,230,0.9)'
`operateItemBackgroundColor` | String | `'transparent'` | No | 輸入控制項目背景顏色字串，預設'transparent'
`operateItemBackgroundColorHover` | String | `'rgba(200,200,200,0.2)'` | No | 輸入滑鼠移入時控制項目背景顏色字串，預設'rgba(200,200,200,0.2)'
`operateItemHeight` | Number | `42` | No | 輸入控制項目高度數字，單位px，預設42
`operateItemTextColor` | String | `'#444'` | No | 輸入控制項目文字顏色字串，預設'#444'
`operateItemTextColorHover` | String | `'#222'` | No | 輸入滑鼠移入時控制項目文字顏色字串，預設'#222'
`operateItemIconSize` | Number | `22` | No | 輸入控制項目圖標尺寸數字，單位px，預設22
`operateItemIconColor` | String | `'#444'` | No | 輸入控制項目圖標顏色字串，預設'#444'
`operateItemIconColorHover` | String | `'#222'` | No | 輸入滑鼠移入時控制項目圖標顏色字串，預設'#222'
`editorRenameContentBackgroundColor` | String | `'white'` | No | 輸入變更文字彈窗之內容區塊背景顏色字串，預設'white'
`editorRenameFooterBackgroundColor` | String | `'grey lighten-5'` | No | 輸入變更文字彈窗之下方區背景顏色字串，預設'grey lighten-5'
`editorRenameInputTextColor` | String | `'grey darken-3'` | No | 輸入變更文字彈窗之輸入文字框之文字顏色字串，預設'grey darken-3'
`editorRenameInputTextBottomLineBorderColor` | String | `'grey lighten-1'` | No | 輸入變更文字彈窗之輸入文字框之底部線顏色字串，預設'grey lighten-1'
`editorRenameInputTextBottomLineBorderColorHover` | String | `'grey'` | No | 輸入變更文字彈窗之輸入文字框之滑鼠移入時底部線顏色字串，預設'grey'
`editorRenameInputTextBottomLineBorderColorFocus` | String | `'blue darken-1'` | No | 輸入變更文字彈窗之輸入文字框之取得焦點時底部線顏色字串，預設'blue darken-1'
`editorRenameCancelBtnText` | String | `'Save'` | No | 輸入變更文字彈窗之取消按鈕文字字串，預設'Save'
`editorRenameCancelBtnTextColor` | String | `'grey darken-3'` | No | 輸入變更文字彈窗之取消按鈕文字顏色字串，預設'grey darken-3'
`editorRenameCancelBtnTextColorHover` | String | `'grey darken-2'` | No | 輸入變更文字彈窗之滑鼠移入時取消按鈕文字顏色字串，預設'grey darken-2'
`editorRenameCancelBtnIcon` | String | `mdiCloseCircleOutline` | No | 輸入變更文字彈窗之取消按鈕圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設mdiCloseCircleOutline
`editorRenameCancelBtnIconSize` | Number | `22` | No | 輸入變更文字彈窗之取消按鈕圖標大小，單位為px，預設22
`editorRenameCancelBtnIconColor` | String | `'grey darken-1'` | No | 輸入變更文字彈窗之取消按鈕圖標顏色字串，預設'grey darken-1'
`editorRenameCancelBtnIconColorHover` | String | `'grey darken-2'` | No | 輸入變更文字彈窗之滑鼠移入時取消按鈕圖標顏色字串，預設'grey darken-2'
`editorRenameCancelBtnIconRippleColor` | String | `'rgba(200,200,200,0.4)'` | No | 輸入變更文字彈窗之取消按鈕ripple效果顏色字串，預設'rgba(200,200,200,0.4)'
`editorRenameCancelBtnBackgroundColor` | String | `'white'` | No | 輸入變更文字彈窗之取消按鈕背景顏色字串，預設'white'
`editorRenameCancelBtnBackgroundColorHover` | String | `'grey lighten-3'` | No | 輸入變更文字彈窗之滑鼠移入時取消按鈕背景顏色字串，預設'grey lighten-3'
`editorRenameSaveBtnText` | String | `'Save'` | No | 輸入變更文字彈窗之儲存按鈕文字字串，預設'Save'
`editorRenameSaveBtnTextColor` | String | `'grey darken-3'` | No | 輸入變更文字彈窗之儲存按鈕文字顏色字串，預設'grey darken-3'
`editorRenameSaveBtnTextColorHover` | String | `'grey darken-2'` | No | 輸入變更文字彈窗之滑鼠移入時儲存按鈕文字顏色字串，預設'grey darken-2'
`editorRenameSaveBtnIcon` | String | `mdiCloudUploadOutline` | No | 輸入變更文字彈窗之儲存按鈕圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設mdiCheckboxMarkedCircle
`editorRenameSaveBtnIconSize` | Number | `22` | No | 輸入變更文字彈窗之儲存按鈕圖標大小，單位為px，預設22
`editorRenameSaveBtnIconColor` | String | `'grey darken-1'` | No | 輸入變更文字彈窗之儲存按鈕圖標顏色字串，預設'grey darken-1'
`editorRenameSaveBtnIconColorHover` | String | `'grey darken-2'` | No | 輸入變更文字彈窗之滑鼠移入時儲存按鈕圖標顏色字串，預設'grey darken-2'
`editorRenameSaveBtnIconRippleColor` | String | `'rgba(200,200,200,0.4)'` | No | 輸入變更文字彈窗之儲存按鈕ripple效果顏色字串，預設'rgba(200,200,200,0.4)'
`editorRenameSaveBtnBackgroundColor` | String | `'white'` | No | 輸入變更文字彈窗之儲存按鈕背景顏色字串，預設'white'
`editorRenameSaveBtnBackgroundColorHover` | String | `'grey lighten-3'` | No | 輸入變更文字彈窗之滑鼠移入時儲存按鈕背景顏色字串，預設'grey lighten-3'