- Description:
| 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' |
| 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' |