w-component-vue

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>WExplorer - Documentation</title> <script src="scripts/prettify/prettify.js"></script> <script src="scripts/prettify/lang-css.js"></script>  <link type="text/css" rel="stylesheet" href="styles/prettify.css"> <link type="text/css" rel="stylesheet" href="styles/jsdoc.css"> <script src="scripts/nav.js" defer></script> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <input type="checkbox" id="nav-trigger" class="nav-trigger" /> <label for="nav-trigger" class="navicon-button x"> <div class="navicon"></div> </label> <label for="nav-trigger" class="overlay"></label> <nav > <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-WAggridVueDyn.html">WAggridVueDyn</a></li><li><a href="module-WBadge.html">WBadge</a></li><li><a href="module-WButtonChip.html">WButtonChip</a></li><li><a href="module-WButtonCircle.html">WButtonCircle</a></li><li><a href="module-WCheckbox.html">WCheckbox</a></li><li><a href="module-WCkeditorVueDyn.html">WCkeditorVueDyn</a></li><li><a href="module-WColorPickAlpha.html">WColorPickAlpha</a></li><li><a href="module-WColorPickHexagon.html">WColorPickHexagon</a></li><li><a href="module-WColorPickHexagonGray.html">WColorPickHexagonGray</a></li><li><a href="module-WColorPickHsv.html">WColorPickHsv</a></li><li><a href="module-WColorPickHue.html">WColorPickHue</a></li><li><a href="module-WColorPickStripe.html">WColorPickStripe</a></li><li><a href="module-WColorSelect.html">WColorSelect</a></li><li><a href="module-WColorSelectInput.html">WColorSelectInput</a></li><li><a href="module-WColorSelectPanel.html">WColorSelectPanel</a></li><li><a href="module-WColorSelectPanelBlock.html">WColorSelectPanelBlock</a></li><li><a href="module-WColorSelectPanelHsva.html">WColorSelectPanelHsva</a></li><li><a href="module-WConfirm.html">WConfirm</a></li><li><a href="module-WDialog.html">WDialog</a></li><li><a href="module-WDrawer.html">WDrawer</a></li><li><a href="module-WDropfiles.html">WDropfiles</a></li><li><a href="module-WDynamicList.html">WDynamicList</a></li><li><a href="module-WEchartsVueDyn.html">WEchartsVueDyn</a></li><li><a href="module-WExplorer.html">WExplorer</a></li><li><a href="module-WGroupBaggage.html">WGroupBaggage</a></li><li><a href="module-WGroupChipCheck.html">WGroupChipCheck</a></li><li><a href="module-WGroupChipRadio.html">WGroupChipRadio</a></li><li><a href="module-WGroupDragdrop.html">WGroupDragdrop</a></li><li><a href="module-WGroupIconCheck.html">WGroupIconCheck</a></li><li><a href="module-WGroupIconRadio.html">WGroupIconRadio</a></li><li><a href="module-WGroupTags.html">WGroupTags</a></li><li><a href="module-WHighchartsBitmapDyn.html">WHighchartsBitmapDyn</a></li><li><a href="module-WHighchartsVueDyn.html">WHighchartsVueDyn</a></li><li><a href="module-WHighstockVueDyn.html">WHighstockVueDyn</a></li><li><a href="module-WIcon.html">WIcon</a></li><li><a href="module-WIconLoading.html">WIconLoading</a></li><li><a href="module-WImageCascadingDyn.html">WImageCascadingDyn</a></li><li><a href="module-WImageLazy.html">WImageLazy</a></li><li><a href="module-WImageViewerDyn.html">WImageViewerDyn</a></li><li><a href="module-WInputCheckbox.html">WInputCheckbox</a></li><li><a href="module-WInputRadio.html">WInputRadio</a></li><li><a href="module-WJsonView.html">WJsonView</a></li><li><a href="module-WLeafletVueDyn.html">WLeafletVueDyn</a></li><li><a href="module-WLevelGrade.html">WLevelGrade</a></li><li><a href="module-WListCheck.html">WListCheck</a></li><li><a href="module-WListExpand.html">WListExpand</a></li><li><a href="module-WListExpandItem.html">WListExpandItem</a></li><li><a href="module-WListHorizontal.html">WListHorizontal</a></li><li><a href="module-WListItem.html">WListItem</a></li><li><a href="module-WListRadio.html">WListRadio</a></li><li><a href="module-WListVertical.html">WListVertical</a></li><li><a href="module-WPanelAvatar.html">WPanelAvatar</a></li><li><a href="module-WPanelBulge.html">WPanelBulge</a></li><li><a href="module-WPanelDivideHorizontal.html">WPanelDivideHorizontal</a></li><li><a href="module-WPanelDivideVertical.html">WPanelDivideVertical</a></li><li><a href="module-WPanelLabelItem.html">WPanelLabelItem</a></li><li><a href="module-WPanelScale.html">WPanelScale</a></li><li><a href="module-WPanelScrolly.html">WPanelScrolly</a></li><li><a href="module-WPanelScrollyCore.html">WPanelScrollyCore</a></li><li><a href="module-WPanelStripe.html">WPanelStripe</a></li><li><a href="module-WPopup.html">WPopup</a></li><li><a href="module-WPopupEditText.html">WPopupEditText</a></li><li><a href="module-WProgressBar.html">WProgressBar</a></li><li><a href="module-WProgressCircle.html">WProgressCircle</a></li><li><a href="module-WQuillVueDyn.html">WQuillVueDyn</a></li><li><a href="module-WSegmentsVertical.html">WSegmentsVertical</a></li><li><a href="module-WShellBottomLine.html">WShellBottomLine</a></li><li><a href="module-WShellEllipse.html">WShellEllipse</a></li><li><a href="module-WSlider.html">WSlider</a></li><li><a href="module-WSwitch.html">WSwitch</a></li><li><a href="module-WTableDyn.html">WTableDyn</a></li><li><a href="module-WText.html">WText</a></li><li><a href="module-WTextCore.html">WTextCore</a></li><li><a href="module-WTextInt.html">WTextInt</a></li><li><a href="module-WTextIntCore.html">WTextIntCore</a></li><li><a href="module-WTextSelect.html">WTextSelect</a></li><li><a href="module-WTextSuggest.html">WTextSuggest</a></li><li><a href="module-WTextSuggestCore.html">WTextSuggestCore</a></li><li><a href="module-WTextarea.html">WTextarea</a></li><li><a href="module-WTextareaCore.html">WTextareaCore</a></li><li><a href="module-WThreejsVueDyn.html">WThreejsVueDyn</a></li><li><a href="module-WTimeday.html">WTimeday</a></li><li><a href="module-WTimedayCore.html">WTimedayCore</a></li><li><a href="module-WTimedayCoreRe.html">WTimedayCoreRe</a></li><li><a href="module-WTimedayRange.html">WTimedayRange</a></li><li><a href="module-WTimedayRangeCore.html">WTimedayRangeCore</a></li><li><a href="module-WTimeminute.html">WTimeminute</a></li><li><a href="module-WTimeminuteCore.html">WTimeminuteCore</a></li><li><a href="module-WTimeminuteRange.html">WTimeminuteRange</a></li><li><a href="module-WTimeminuteRangeCore.html">WTimeminuteRangeCore</a></li><li><a href="module-WTinymceVueDyn.html">WTinymceVueDyn</a></li><li><a href="module-WTooltip.html">WTooltip</a></li><li><a href="module-WTree.html">WTree</a></li><li><a href="module-WTreeIconCheckbox.html">WTreeIconCheckbox</a></li><li><a href="module-WTreeIconToggle.html">WTreeIconToggle</a></li><li><a href="module-WVditorDyn.html">WVditorDyn</a></li></ul><h3>Global</h3><ul><li><a href="global.html#binarySearch">binarySearch</a></li><li><a href="global.html#convertColor">convertColor</a></li></ul> </nav> <div id="main"> <h1 class="page-title">WExplorer</h1> <section> <header> </header> <article> <div class="container-overview"> <dl class="details"> <dt class="tag-description">Description:</dt> <dd class="tag-description"><ul class="dummy"><li></p></div></div> <h3 class="subsection-title" style="margin-top: 1em" data-jsdoc-vuejs="section-props">Props</h3> <table data-jsdoc-vuejs="table-props"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Default value</th> <th>Required?</th> <th>Description</th> </tr> </thead> <tbody><tr> <td><code>items</code></td> <td>Array</td> <td><code>[]</code></td> <td>No</td> <td>輸入項目物件陣列，預設[]</td> </tr><tr> <td><code>bindRoot</code></td> <td>String</td> <td><code>'root'</code></td> <td>No</td> <td>輸入建置根目錄名稱字串，預設'root'</td> </tr><tr> <td><code>funSortTree</code></td> <td>function</td> <td><code>null</code></td> <td>No</td> <td>輸入排序樹狀資料夾名稱函數，預設null</td> </tr><tr> <td><code>showTree</code></td> <td>Boolean</td> <td><code>true</code></td> <td>No</td> <td>輸入是否顯示樹狀資料夾布林值，預設true</td> </tr><tr> <td><code>defaultShowTreeFirst</code></td> <td>Boolean</td> <td><code>true</code></td> <td>No</td> <td>輸入是否預先顯示樹狀資料夾之第1個資料夾布林值，預設true</td> </tr><tr> <td><code>treeWidth</code></td> <td>Number</td> <td><code>250</code></td> <td>No</td> <td>輸入樹狀資料夾寬度數字，單位為px，預設250</td> </tr><tr> <td><code>treeWidthMin</code></td> <td>Number</td> <td><code>null</code></td> <td>No</td> <td>輸入樹狀資料夾可拖曳寬度之最小值數字，單位為px，預設null</td> </tr><tr> <td><code>treeWidthMax</code></td> <td>Number</td> <td><code>null</code></td> <td>No</td> <td>輸入樹狀資料夾可拖曳寬度之最大值數字，單位為px，預設null</td> </tr><tr> <td><code>treeAfloat</code></td> <td>Boolean</td> <td><code>false</code></td> <td>No</td> <td>輸入是否樹狀資料夾為浮動顯示布林值，設為true時浮在內容區上故不壓縮內容區寬度，預設false</td> </tr><tr> <td><code>treeDefItemHeight</code></td> <td>Number</td> <td><code>30</code></td> <td>No</td> <td>輸入樹狀資料夾之按需顯示時各項目預設最小高度(min-height)值，給越準或給大部分項目的高度則渲染速度越快，單位為px，預設30</td> </tr><tr> <td><code>treeDefaultDisplayLevel</code></td> <td>Number</td> <td><code>null</code></td> <td>No</td> <td>輸入樹狀資料夾之初始展開層數數字，若輸入1就是預設展開至第1層，第2層(含)以下則都隱藏，若輸入null就是全展開，預設null</td> </tr><tr> <td><code>treePaddingStyle</code></td> <td>Object</td> <td><code>{v:0,h:0}</code></td> <td>No</td> <td>輸入樹狀資料夾之內寬距離物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:0,h:0}</td> </tr><tr> <td><code>treeIndent</code></td> <td>Number</td> <td><code>0.7</code></td> <td>No</td> <td>輸入樹狀資料夾之縮排比率數字，若使用1就是1倍的圖標寬度(24px)+2*separation(3px)，預設0.7</td> </tr><tr> <td><code>treeItemTextColor</code></td> <td>String</td> <td><code>'#444'</code></td> <td>No</td> <td>輸入樹狀資料夾之文字顏色字串，預設'#444'</td> </tr><tr> <td><code>treeItemTextColorHover</code></td> <td>String</td> <td><code>'#222'</code></td> <td>No</td> <td>輸入滑鼠移入時樹狀資料夾之文字顏色字串，預設'#222'</td> </tr><tr> <td><code>treeItemTextColorActive</code></td> <td>String</td> <td><code>'#000'</code></td> <td>No</td> <td>輸入主動模式時樹狀資料夾之文字顏色字串，預設'#000'</td> </tr><tr> <td><code>treeFolderIcon</code></td> <td>String</td> <td><code>mdiFolder</code></td> <td>No</td> <td>輸入樹狀資料夾之資料夾圖標字串，預設mdiFolder</td> </tr><tr> <td><code>treeFolderIconSize</code></td> <td>Number</td> <td><code>20</code></td> <td>No</td> <td>輸入樹狀資料夾之資料夾圖標之尺寸數字，單位為px，預設20</td> </tr><tr> <td><code>treeFolderIconColor</code></td> <td>String</td> <td><code>'#888'</code></td> <td>No</td> <td>輸入樹狀資料夾之資料夾圖標顏色字串，預設'#888'</td> </tr><tr> <td><code>treeFolderIconColorHover</code></td> <td>String</td> <td><code>'#777'</code></td> <td>No</td> <td>輸入滑鼠移入時樹狀資料夾之資料夾圖標顏色字串，預設'#777'</td> </tr><tr> <td><code>treeFolderIconColorActive</code></td> <td>String</td> <td><code>'#666'</code></td> <td>No</td> <td>輸入主動模式時樹狀資料夾之資料夾圖標顏色字串，預設'#666'</td> </tr><tr> <td><code>treeItemBackgroundColor</code></td> <td>String</td> <td><code>'transparent'</code></td> <td>No</td> <td>輸入樹狀資料夾之項目區背景顏色字串，預設'transparent'</td> </tr><tr> <td><code>treeItemBackgroundColorHover</code></td> <td>String</td> <td><code>'rgba(200,200,200,0.2)'</code></td> <td>No</td> <td>輸入滑鼠移入時樹狀資料夾之項目區背景顏色字串，預設'rgba(200,200,200,0.2)'</td> </tr><tr> <td><code>treeItemBackgroundColorActive</code></td> <td>String</td> <td><code>'rgba(100,100,100,0.2)'</code></td> <td>No</td> <td>輸入主動模式時樹狀資料夾之項目區背景顏色字串，預設'rgba(100,100,100,0.2)'</td> </tr><tr> <td><code>treeItemRippleColor</code></td> <td>String</td> <td><code>'rgba(200,200,200,0.4)'</code></td> <td>No</td> <td>輸入樹狀資料夾之項目區ripple效果顏色字串，預設'rgba(200,200,200,0.4)'</td> </tr><tr> <td><code>treeBackgroundColor</code></td> <td>String</td> <td><code>'#fff'</code></td> <td>No</td> <td>輸入樹狀資料夾背景顏色字串，預設'#fff'</td> </tr><tr> <td><code>treeDrawerBarSize</code></td> <td>Number</td> <td><code>2</code></td> <td>No</td> <td>輸入樹狀資料夾抽屜之分隔條尺寸數字，為分隔條寬度，單位為px，預設2</td> </tr><tr> <td><code>treeDrawerBarColor</code></td> <td>String</td> <td><code>'#ddd'</code></td> <td>No</td> <td>輸入樹狀資料夾抽屜之分隔條顏色字串，預設'#ddd'</td> </tr><tr> <td><code>treeToggleIconSize</code></td> <td>Number</td> <td><code>24</code></td> <td>No</td> <td>輸入顯隱樹狀資料夾按鈕之圖標尺寸數字，單位為px，預設24</td> </tr><tr> <td><code>treeToggleIconColor</code></td> <td>String</td> <td><code>'grey'</code></td> <td>No</td> <td>輸入顯隱樹狀資料夾按鈕之圖標顏色字串，預設'grey'</td> </tr><tr> <td><code>treeToggleIconDisabledColor</code></td> <td>String</td> <td><code>'grey lighten-1'</code></td> <td>No</td> <td>輸入顯隱樹狀資料夾按鈕之禁用時圖標顏色字串，預設'grey lighten-1'</td> </tr><tr> <td><code>treeToggleIconBackgroundColor</code></td> <td>String</td> <td><code>'transparent'</code></td> <td>No</td> <td>輸入顯隱樹狀資料夾按鈕之圖標背景顏色字串，預設'transparent'</td> </tr><tr> <td><code>treeToggleIconBackgroundColorHover</code></td> <td>String</td> <td><code>'rgba(128,128,128,0.15)'</code></td> <td>No</td> <td>輸入滑鼠移入時顯隱樹狀資料夾按鈕之圖標背景顏色字串，預設'rgba(128,128,128,0.15)'</td> </tr><tr> <td><code>lineBetweenPathAndListWidth</code></td> <td>Number</td> <td><code>1</code></td> <td>No</td> <td>輸入路徑區與清單區之間分隔線寬度，單位為px，預設1</td> </tr><tr> <td><code>lineBetweenPathAndListColor</code></td> <td>String</td> <td><code>'#ddd'</code></td> <td>No</td> <td>輸入路徑區與清單區之間分隔線顏色字串，預設'#ddd'</td> </tr><tr> <td><code>listDefItemHeight</code></td> <td>Number</td> <td><code>30</code></td> <td>No</td> <td>輸入清單區按需顯示時各項目預設最小高度(min-height)值，單位為px，預設30</td> </tr><tr> <td><code>listPaddingStyle</code></td> <td>Object</td> <td><code>{v:0,h:6}</code></td> <td>No</td> <td>輸入清單區項目之內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:0,h:6}</td> </tr><tr> <td><code>listItemTextFontSize</code></td> <td>String</td> <td><code>'0.85rem'</code></td> <td>No</td> <td>輸入清單區項目之文字字型大小字串，預設'0.85rem'</td> </tr><tr> <td><code>listItemTextColor</code></td> <td>String</td> <td><code>'#444'</code></td> <td>No</td> <td>輸入清單區項目之文字顏色字串，預設'#444'</td> </tr><tr> <td><code>listItemTextColorHover</code></td> <td>String</td> <td><code>'#222'</code></td> <td>No</td> <td>輸入滑鼠移入時清單區項目之文字顏色字串，預設'#222'</td> </tr><tr> <td><code>listItemTextColorActive</code></td> <td>String</td> <td><code>'#000'</code></td> <td>No</td> <td>輸入主動模式時清單區項目之文字顏色字串，預設'#000'</td> </tr><tr> <td><code>listFolderIcon</code></td> <td>String</td> <td><code>mdiFolder</code></td> <td>No</td> <td>輸入清單區項目之資料夾圖標字串，預設mdiFolder</td> </tr><tr> <td><code>listFileIcon</code></td> <td>String</td> <td><code>mdiFileOutline</code></td> <td>No</td> <td>輸入清單區項目之檔案圖標字串，預設mdiFileOutline</td> </tr><tr> <td><code>listItemIconSize</code></td> <td>Number</td> <td><code>22</code></td> <td>No</td> <td>輸入清單區項目之圖標尺寸數字，單位為px，預設22</td> </tr><tr> <td><code>listItemIconColor</code></td> <td>String</td> <td><code>'#888'</code></td> <td>No</td> <td>輸入清單區項目之圖標顏色字串，預設'#888'</td> </tr><tr> <td><code>listItemIconColorHover</code></td> <td>String</td> <td><code>'#777'</code></td> <td>No</td> <td>輸入滑鼠移入時清單區項目之圖標顏色字串，預設'#777'</td> </tr><tr> <td><code>listItemIconColorActive</code></td> <td>String</td> <td><code>'#666'</code></td> <td>No</td> <td>輸入主動模式時清單區項目之圖標顏色字串，預設'#666'</td> </tr><tr> <td><code>listItemBackgroundColor</code></td> <td>String</td> <td><code>'transparent'</code></td> <td>No</td> <td>輸入清單區項目之背景顏色字串，預設'transparent'</td> </tr><tr> <td><code>listItemBackgroundColorHover</code></td> <td>String</td> <td><code>'rgba(200,200,200,0.2)'</code></td> <td>No</td> <td>輸入滑鼠移入時清單區項目之背景顏色字串，預設'rgba(200,200,200,0.2)'</td> </tr><tr> <td><code>listItemBackgroundColorActive</code></td> <td>String</td> <td><code>'rgba(100,100,100,0.2)'</code></td> <td>No</td> <td>輸入主動模式時清單區項目之背景顏色字串，預設'rgba(100,100,100,0.2)'</td> </tr><tr> <td><code>listItemRippleColor</code></td> <td>String</td> <td><code>'rgba(255,255,255,0.4)'</code></td> <td>No</td> <td>輸入清單區項目之ripple效果顏色字串，預設'rgba(255,255,255,0.4)'</td> </tr><tr> <td><code>listBackgroundColor</code></td> <td>String</td> <td><code>'#fff'</code></td> <td>No</td> <td>輸入清單區背景顏色字串，預設'#fff'</td> </tr><tr> <td><code>btnDisplayTreeIconShow</code></td> <td>String</td> <td><code>mdiArrowRightBoldHexagonOutline</code></td> <td>No</td> <td>輸入顯示樹狀資料夾按鈕圖標字串，預設mdiArrowRightBoldHexagonOutline</td> </tr><tr> <td><code>btnDisplayTreeIconShow</code></td> <td>String</td> <td><code>mdiArrowLeftBoldHexagonOutline</code></td> <td>No</td> <td>輸入隱藏樹狀資料夾按鈕圖標字串，預設mdiArrowLeftBoldHexagonOutline</td> </tr><tr> <td><code>btnDisplayTreeIconSize</code></td> <td>Number</td> <td><code>20</code></td> <td>No</td> <td>輸入顯隱樹狀資料夾按鈕圖標之尺寸數字，單位為px，預設20</td> </tr><tr> <td><code>btnDisplayTreeIconColor</code></td> <td>String</td> <td><code>'grey darken-1'</code></td> <td>No</td> <td>輸入顯隱樹狀資料夾按鈕圖標顏色字串，預設'grey darken-1'</td> </tr><tr> <td><code>btnDisplayTreeIconColorHover</code></td> <td>String</td> <td><code>'grey darken-2'</code></td> <td>No</td> <td>輸入滑鼠移入時顯隱樹狀資料夾按鈕圖標顏色字串，預設'grey darken-2'</td> </tr><tr> <td><code>btnDisplayTreeIconColorFocus</code></td> <td>String</td> <td><code>'grey darken-3'</code></td> <td>No</td> <td>輸入取得焦點時顯隱樹狀資料夾按鈕圖標顏色字串，預設'grey darken-3'</td> </tr><tr> <td><code>btnDisplayTreeBackgroundColor</code></td> <td>String</td> <td><code>'transparent'</code></td> <td>No</td> <td>輸入顯隱樹狀資料夾按鈕背景顏色字串，預設'transparent'</td> </tr><tr> <td><code>btnDisplayTreeBackgroundColorHover</code></td> <td>String</td> <td><code>'rgba(200,200,200,0.3)'</code></td> <td>No</td> <td>輸入滑鼠移入時顯隱樹狀資料夾按鈕背景顏色字串，預設'rgba(200,200,200,0.3)'</td> </tr><tr> <td><code>btnDisplayTreeBackgroundColorFocus</code></td> <td>String</td> <td><code>'rgba(180,180,180,0.3)'</code></td> <td>No</td> <td>輸入主動模式時顯隱樹狀資料夾按鈕背景顏色字串，預設'rgba(180,180,180,0.3)'</td> </tr><tr> <td><code>pathBtnTextColor</code></td> <td>String</td> <td><code>'#444'</code></td> <td>No</td> <td>輸入路徑區按鈕之文字顏色字串，預設'#444'</td> </tr><tr> <td><code>pathBtnTextColorHover</code></td> <td>String</td> <td><code>'#222'</code></td> <td>No</td> <td>輸入滑鼠移入時路徑區按鈕之文字顏色字串，預設'#222'</td> </tr><tr> <td><code>pathBtnTextFontSize</code></td> <td>String</td> <td><code>'0.85rem'</code></td> <td>No</td> <td>輸入路徑區按鈕之文字字型大小字串，預設'0.85rem'</td> </tr><tr> <td><code>pathBtnBackgroundColor</code></td> <td>String</td> <td><code>'transparent'</code></td> <td>No</td> <td>輸入路徑區按鈕之背景顏色字串，預設'transparent'</td> </tr><tr> <td><code>pathBtnBackgroundColorHover</code></td> <td>String</td> <td><code>'rgb(236,236,236)'</code></td> <td>No</td> <td>輸入滑鼠移入時路徑區按鈕之背景顏色字串，預設'rgb(236,236,236)'</td> </tr><tr> <td><code>pathSepIcon</code></td> <td>String</td> <td><code>mdiChevronRight</code></td> <td>No</td> <td>輸入路徑區分隔符號之圖標字串，預設mdiChevronRight</td> </tr><tr> <td><code>pathSepIconColor</code></td> <td>String</td> <td><code>'#888'</code></td> <td>No</td> <td>輸入路徑區分隔符號之圖標顏色字串，預設'#888'</td> </tr><tr> <td><code>pathSepIconSize</code></td> <td>Number</td> <td><code>18</code></td> <td>No</td> <td>輸入路徑區分隔符號之圖標尺寸數字，單位為px，預設18</td> </tr><tr> <td><code>pathBackgroundColor</code></td> <td>String</td> <td><code>'transparent'</code></td> <td>No</td> <td>輸入路徑區背景顏色字串，預設'#fff'</td> </tr><tr> <td><code>noSelectedText</code></td> <td>String</td> <td><code>'No selected folder'</code></td> <td>No</td> <td>輸入尚未選擇資料夾文字字串，預設'No selected folder'</td> </tr><tr> <td><code>draggable</code></td> <td>Boolean</td> <td><code>false</code></td> <td>No</td> <td>輸入是否為可拖曳編輯模式布林值，若draggable設定true，此時所有節點皆為展開顯示並且禁止顯隱節點功能，也就是defaultDisplayLevel強制設定為null，此外也不提供過濾功能，也就是filterKeywords強制清空。開啟draggable僅適用小規模數據。draggable預設false</td> </tr><tr> <td><code>dgTextDisabled</code></td> <td>String</td> <td><code>'Can not drop here'</code></td> <td>No</td> <td>輸入禁止拖曳文字字串，預設'Can not drop here'</td> </tr><tr> <td><code>dgTextDisabledColor</code></td> <td>String</td> <td><code>'#812'</code></td> <td>No</td> <td>輸入禁止拖曳文字顏色字串，預設'#812'</td> </tr><tr> <td><code>dgTextDisabledPaddingLeft</code></td> <td>Number</td> <td><code>15</code></td> <td>No</td> <td>輸入禁止拖曳padding-left數字，單位px，預設15</td> </tr><tr> <td><code>dgTextDisabledFontSize</code></td> <td>String</td> <td><code>'0.9rem'</code></td> <td>No</td> <td>輸入禁止拖曳文字大小字串，預設'0.9rem'</td> </tr><tr> <td><code>dgTextDisabledBackgroundColor</code></td> <td>String</td> <td><code>'rgba(255,220,240,0.6)'</code></td> <td>No</td> <td>輸入禁止拖曳文字區背景顏色字串，預設'rgba(255,220,240,0.6)'</td> </tr><tr> <td><code>dgInsertLineColor</code></td> <td>String</td> <td><code>'#29f'</code></td> <td>No</td> <td>輸入拖曳時顯示插入區域線顏色字串，預設'#29f'</td> </tr><tr> <td><code>dgInsertBackgroundColor</code></td> <td>String</td> <td><code>'rgba(80,150,255,0.15)'</code></td> <td>No</td> <td>輸入拖曳時顯示插入區域背景顏色字串，預設'rgba(80,150,255,0.15)'</td> </tr><tr> <td><code>dgBelongBackgroundColor</code></td> <td>String</td> <td><code>'rgba(80,150,255,0.3)'</code></td> <td>No</td> <td>輸入拖曳時顯示插入區域(成為目標的子節點)背景顏色字串，預設'rgba(80,150,255,0.3)'</td> </tr><tr> <td><code>dgPreviewOpacity</code></td> <td>Number</td> <td><code>1</code></td> <td>No</td> <td>輸入拖曳時預覽元素透明度數字，預設1</td> </tr><tr> <td><code>dgPreviewDisabledOpacity</code></td> <td>Number</td> <td><code>1</code></td> <td>No</td> <td>輸入無效時(位於非可拖曳元素內)拖曳時預覽元素透明度數字，預設1</td> </tr><tr> <td><code>dgPreviewBorderWidth</code></td> <td>Number</td> <td><code>0</code></td> <td>No</td> <td>輸入拖曳時預覽元素邊框寬度數字，單位px，預設0</td> </tr><tr> <td><code>dgPreviewBorderColor</code></td> <td>String</td> <td><code>'#f26'</code></td> <td>No</td> <td>輸入拖曳時預覽元素邊框顏色字串，預設'#f26'</td> </tr><tr> <td><code>dgPreviewBackground</code></td> <td>String</td> <td><code>'transparent'</code></td> <td>No</td> <td>輸入拖曳時預覽元素背景顏色字串，預設'transparent'</td> </tr><tr> <td><code>operatable</code></td> <td>Boolean</td> <td><code>false</code></td> <td>No</td> <td>輸入是否使用控制節點模式布林值，若operatable設定true，將於各項目右側顯示控制按鈕，點擊可彈出選單進行插入與刪除等項目，此時會觸發事件click-operate-item，而處理相應數據則需呼叫事件提供物件內operateItem函數，詳情請見範例。此時所有節點皆為展開顯示並且禁止顯隱節點功能，也就是defaultDisplayLevel強制設定為null，此外也不提供過濾功能，也就是filterKeywords強制清空。開啟operatable僅適用小規模數據。operatable預設false</td> </tr><tr> <td><code>operateItemTextForRename</code></td> <td>String</td> <td><code>'Rename folder'</code></td> <td>No</td> <td>輸入控制選項變更文字之文字字串，預設'Rename folder'</td> </tr><tr> <td><code>operateItemTextForInsertChild</code></td> <td>String</td> <td><code>'Create sub folder'</code></td> <td>No</td> <td>輸入控制選項插入子項目之文字字串，預設'Create sub folder'</td> </tr><tr> <td><code>operateItemTextForDelete</code></td> <td>String</td> <td><code>'Delete folder'</code></td> <td>No</td> <td>輸入控制選項刪除項目之文字字串，預設'Delete folder'</td> </tr><tr> <td><code>operateItemIconForRename</code></td> <td>String</td> <td><code>mdiRenameOutline</code></td> <td>No</td> <td>輸入控制選項變更文字之圖標字串，預設mdiRenameOutline</td> </tr><tr> <td><code>operateItemIconForInsertChild</code></td> <td>String</td> <td><code>mdiFolderPlusOutline</code></td> <td>No</td> <td>輸入控制選項插入子項目之圖標字串，預設mdiFolderPlusOutline</td> </tr><tr> <td><code>operateItemIconForDelete</code></td> <td>String</td> <td><code>mdiFolderRemoveOutline</code></td> <td>No</td> <td>輸入控制選項刪除項目之圖標字串，預設mdiFolderRemoveOutline</td> </tr><tr> <td><code>operateItemPaddingStyle</code></td> <td>Object</td> <td><code>{v:10,h:12}</code></td> <td>No</td> <td>輸入控制選項內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:10,h:12}</td> </tr><tr> <td><code>operatePanelWidth</code></td> <td>Number</td> <td><code>170</code></td> <td>No</td> <td>輸入控制選項寬度數字，單位px，預設170</td> </tr><tr> <td><code>operatePanelHeight</code></td> <td>Number</td> <td><code>null</code></td> <td>No</td> <td>輸入控制選項高度數字，若為null則使用選項數量*operateItemHeight，單位px，預設null</td> </tr><tr> <td><code>operateBtnTooltip</code></td> <td>String</td> <td><code>'Operations'</code></td> <td>No</td> <td>輸入控制按鈕之提示文字字串，預設'Operations'</td> </tr><tr> <td><code>operateBtnBackgroundColor</code></td> <td>String</td> <td><code>'transparent'</code></td> <td>No</td> <td>輸入控制按鈕背景顏色字串，預設'transparent'</td> </tr><tr> <td><code>operateBtnBackgroundColorHover</code></td> <td>String</td> <td><code>'rgba(230,230,230,0.7)'</code></td> <td>No</td> <td>輸入滑鼠移入時控制按鈕背景顏色字串，預設'rgba(230,230,230,0.7)'</td> </tr><tr> <td><code>operateBtnBackgroundColorFocus</code></td> <td>String</td> <td><code>'rgba(230,230,230,0.9)'</code></td> <td>No</td> <td>輸入取得焦點時控制按鈕背景顏色字串，預設'rgba(230,230,230,0.9)'</td> </tr><tr> <td><code>operateItemBackgroundColor</code></td> <td>String</td> <td><code>'transparent'</code></td> <td>No</td> <td>輸入控制項目背景顏色字串，預設'transparent'</td> </tr><tr> <td><code>operateItemBackgroundColorHover</code></td> <td>String</td> <td><code>'rgba(200,200,200,0.2)'</code></td> <td>No</td> <td>輸入滑鼠移入時控制項目背景顏色字串，預設'rgba(200,200,200,0.2)'</td> </tr><tr> <td><code>operateItemHeight</code></td> <td>Number</td> <td><code>42</code></td> <td>No</td> <td>輸入控制項目高度數字，單位px，預設42</td> </tr><tr> <td><code>operateItemTextColor</code></td> <td>String</td> <td><code>'#444'</code></td> <td>No</td> <td>輸入控制項目文字顏色字串，預設'#444'</td> </tr><tr> <td><code>operateItemTextColorHover</code></td> <td>String</td> <td><code>'#222'</code></td> <td>No</td> <td>輸入滑鼠移入時控制項目文字顏色字串，預設'#222'</td> </tr><tr> <td><code>operateItemIconSize</code></td> <td>Number</td> <td><code>22</code></td> <td>No</td> <td>輸入控制項目圖標尺寸數字，單位px，預設22</td> </tr><tr> <td><code>operateItemIconColor</code></td> <td>String</td> <td><code>'#444'</code></td> <td>No</td> <td>輸入控制項目圖標顏色字串，預設'#444'</td> </tr><tr> <td><code>operateItemIconColorHover</code></td> <td>String</td> <td><code>'#222'</code></td> <td>No</td> <td>輸入滑鼠移入時控制項目圖標顏色字串，預設'#222'</td> </tr><tr> <td><code>editorRenameContentBackgroundColor</code></td> <td>String</td> <td><code>'white'</code></td> <td>No</td> <td>輸入變更文字彈窗之內容區塊背景顏色字串，預設'white'</td> </tr><tr> <td><code>editorRenameFooterBackgroundColor</code></td> <td>String</td> <td><code>'grey lighten-5'</code></td> <td>No</td> <td>輸入變更文字彈窗之下方區背景顏色字串，預設'grey lighten-5'</td> </tr><tr> <td><code>editorRenameInputTextColor</code></td> <td>String</td> <td><code>'grey darken-3'</code></td> <td>No</td> <td>輸入變更文字彈窗之輸入文字框之文字顏色字串，預設'grey darken-3'</td> </tr><tr> <td><code>editorRenameInputTextBottomLineBorderColor</code></td> <td>String</td> <td><code>'grey lighten-1'</code></td> <td>No</td> <td>輸入變更文字彈窗之輸入文字框之底部線顏色字串，預設'grey lighten-1'</td> </tr><tr> <td><code>editorRenameInputTextBottomLineBorderColorHover</code></td> <td>String</td> <td><code>'grey'</code></td> <td>No</td> <td>輸入變更文字彈窗之輸入文字框之滑鼠移入時底部線顏色字串，預設'grey'</td> </tr><tr> <td><code>editorRenameInputTextBottomLineBorderColorFocus</code></td> <td>String</td> <td><code>'blue darken-1'</code></td> <td>No</td> <td>輸入變更文字彈窗之輸入文字框之取得焦點時底部線顏色字串，預設'blue darken-1'</td> </tr><tr> <td><code>editorRenameCancelBtnText</code></td> <td>String</td> <td><code>'Save'</code></td> <td>No</td> <td>輸入變更文字彈窗之取消按鈕文字字串，預設'Save'</td> </tr><tr> <td><code>editorRenameCancelBtnTextColor</code></td> <td>String</td> <td><code>'grey darken-3'</code></td> <td>No</td> <td>輸入變更文字彈窗之取消按鈕文字顏色字串，預設'grey darken-3'</td> </tr><tr> <td><code>editorRenameCancelBtnTextColorHover</code></td> <td>String</td> <td><code>'grey darken-2'</code></td> <td>No</td> <td>輸入變更文字彈窗之滑鼠移入時取消按鈕文字顏色字串，預設'grey darken-2'</td> </tr><tr> <td><code>editorRenameCancelBtnIcon</code></td> <td>String</td> <td><code>mdiCloseCircleOutline</code></td> <td>No</td> <td>輸入變更文字彈窗之取消按鈕圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設mdiCloseCircleOutline</td> </tr><tr> <td><code>editorRenameCancelBtnIconSize</code></td> <td>Number</td> <td><code>22</code></td> <td>No</td> <td>輸入變更文字彈窗之取消按鈕圖標大小，單位為px，預設22</td> </tr><tr> <td><code>editorRenameCancelBtnIconColor</code></td> <td>String</td> <td><code>'grey darken-1'</code></td> <td>No</td> <td>輸入變更文字彈窗之取消按鈕圖標顏色字串，預設'grey darken-1'</td> </tr><tr> <td><code>editorRenameCancelBtnIconColorHover</code></td> <td>String</td> <td><code>'grey darken-2'</code></td> <td>No</td> <td>輸入變更文字彈窗之滑鼠移入時取消按鈕圖標顏色字串，預設'grey darken-2'</td> </tr><tr> <td><code>editorRenameCancelBtnIconRippleColor</code></td> <td>String</td> <td><code>'rgba(200,200,200,0.4)'</code></td> <td>No</td> <td>輸入變更文字彈窗之取消按鈕ripple效果顏色字串，預設'rgba(200,200,200,0.4)'</td> </tr><tr> <td><code>editorRenameCancelBtnBackgroundColor</code></td> <td>String</td> <td><code>'white'</code></td> <td>No</td> <td>輸入變更文字彈窗之取消按鈕背景顏色字串，預設'white'</td> </tr><tr> <td><code>editorRenameCancelBtnBackgroundColorHover</code></td> <td>String</td> <td><code>'grey lighten-3'</code></td> <td>No</td> <td>輸入變更文字彈窗之滑鼠移入時取消按鈕背景顏色字串，預設'grey lighten-3'</td> </tr><tr> <td><code>editorRenameSaveBtnText</code></td> <td>String</td> <td><code>'Save'</code></td> <td>No</td> <td>輸入變更文字彈窗之儲存按鈕文字字串，預設'Save'</td> </tr><tr> <td><code>editorRenameSaveBtnTextColor</code></td> <td>String</td> <td><code>'grey darken-3'</code></td> <td>No</td> <td>輸入變更文字彈窗之儲存按鈕文字顏色字串，預設'grey darken-3'</td> </tr><tr> <td><code>editorRenameSaveBtnTextColorHover</code></td> <td>String</td> <td><code>'grey darken-2'</code></td> <td>No</td> <td>輸入變更文字彈窗之滑鼠移入時儲存按鈕文字顏色字串，預設'grey darken-2'</td> </tr><tr> <td><code>editorRenameSaveBtnIcon</code></td> <td>String</td> <td><code>mdiCloudUploadOutline</code></td> <td>No</td> <td>輸入變更文字彈窗之儲存按鈕圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設mdiCheckboxMarkedCircle</td> </tr><tr> <td><code>editorRenameSaveBtnIconSize</code></td> <td>Number</td> <td><code>22</code></td> <td>No</td> <td>輸入變更文字彈窗之儲存按鈕圖標大小，單位為px，預設22</td> </tr><tr> <td><code>editorRenameSaveBtnIconColor</code></td> <td>String</td> <td><code>'grey darken-1'</code></td> <td>No</td> <td>輸入變更文字彈窗之儲存按鈕圖標顏色字串，預設'grey darken-1'</td> </tr><tr> <td><code>editorRenameSaveBtnIconColorHover</code></td> <td>String</td> <td><code>'grey darken-2'</code></td> <td>No</td> <td>輸入變更文字彈窗之滑鼠移入時儲存按鈕圖標顏色字串，預設'grey darken-2'</td> </tr><tr> <td><code>editorRenameSaveBtnIconRippleColor</code></td> <td>String</td> <td><code>'rgba(200,200,200,0.4)'</code></td> <td>No</td> <td>輸入變更文字彈窗之儲存按鈕ripple效果顏色字串，預設'rgba(200,200,200,0.4)'</td> </tr><tr> <td><code>editorRenameSaveBtnBackgroundColor</code></td> <td>String</td> <td><code>'white'</code></td> <td>No</td> <td>輸入變更文字彈窗之儲存按鈕背景顏色字串，預設'white'</td> </tr><tr> <td><code>editorRenameSaveBtnBackgroundColorHover</code></td> <td>String</td> <td><code>'grey lighten-3'</code></td> <td>No</td> <td>輸入變更文字彈窗之滑鼠移入時儲存按鈕背景顏色字串，預設'grey lighten-3'</td> </tr></tbody> </table> <div class="container-overview"><div><p> </li></ul></dd> </dl> <div class="description usertext"></p></div></div> <h3 class="subsection-title" style="margin-top: 1em" data-jsdoc-vuejs="section-props">Props</h3> <table data-jsdoc-vuejs="table-props"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Default value</th> <th>Required?</th> <th>Description</th> </tr> </thead> <tbody><tr> <td><code>items</code></td> <td>Array</td> <td><code>[]</code></td> <td>No</td> <td>輸入項目物件陣列，預設[]</td> </tr><tr> <td><code>bindRoot</code></td> <td>String</td> <td><code>'root'</code></td> <td>No</td> <td>輸入建置根目錄名稱字串，預設'root'</td> </tr><tr> <td><code>funSortTree</code></td> <td>function</td> <td><code>null</code></td> <td>No</td> <td>輸入排序樹狀資料夾名稱函數，預設null</td> </tr><tr> <td><code>showTree</code></td> <td>Boolean</td> <td><code>true</code></td> <td>No</td> <td>輸入是否顯示樹狀資料夾布林值，預設true</td> </tr><tr> <td><code>defaultShowTreeFirst</code></td> <td>Boolean</td> <td><code>true</code></td> <td>No</td> <td>輸入是否預先顯示樹狀資料夾之第1個資料夾布林值，預設true</td> </tr><tr> <td><code>treeWidth</code></td> <td>Number</td> <td><code>250</code></td> <td>No</td> <td>輸入樹狀資料夾寬度數字，單位為px，預設250</td> </tr><tr> <td><code>treeWidthMin</code></td> <td>Number</td> <td><code>null</code></td> <td>No</td> <td>輸入樹狀資料夾可拖曳寬度之最小值數字，單位為px，預設null</td> </tr><tr> <td><code>treeWidthMax</code></td> <td>Number</td> <td><code>null</code></td> <td>No</td> <td>輸入樹狀資料夾可拖曳寬度之最大值數字，單位為px，預設null</td> </tr><tr> <td><code>treeAfloat</code></td> <td>Boolean</td> <td><code>false</code></td> <td>No</td> <td>輸入是否樹狀資料夾為浮動顯示布林值，設為true時浮在內容區上故不壓縮內容區寬度，預設false</td> </tr><tr> <td><code>treeDefItemHeight</code></td> <td>Number</td> <td><code>30</code></td> <td>No</td> <td>輸入樹狀資料夾之按需顯示時各項目預設最小高度(min-height)值，給越準或給大部分項目的高度則渲染速度越快，單位為px，預設30</td> </tr><tr> <td><code>treeDefaultDisplayLevel</code></td> <td>Number</td> <td><code>null</code></td> <td>No</td> <td>輸入樹狀資料夾之初始展開層數數字，若輸入1就是預設展開至第1層，第2層(含)以下則都隱藏，若輸入null就是全展開，預設null</td> </tr><tr> <td><code>treePaddingStyle</code></td> <td>Object</td> <td><code>{v:0,h:0}</code></td> <td>No</td> <td>輸入樹狀資料夾之內寬距離物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:0,h:0}</td> </tr><tr> <td><code>treeIndent</code></td> <td>Number</td> <td><code>0.7</code></td> <td>No</td> <td>輸入樹狀資料夾之縮排比率數字，若使用1就是1倍的圖標寬度(24px)+2*separation(3px)，預設0.7</td> </tr><tr> <td><code>treeItemTextColor</code></td> <td>String</td> <td><code>'#444'</code></td> <td>No</td> <td>輸入樹狀資料夾之文字顏色字串，預設'#444'</td> </tr><tr> <td><code>treeItemTextColorHover</code></td> <td>String</td> <td><code>'#222'</code></td> <td>No</td> <td>輸入滑鼠移入時樹狀資料夾之文字顏色字串，預設'#222'</td> </tr><tr> <td><code>treeItemTextColorActive</code></td> <td>String</td> <td><code>'#000'</code></td> <td>No</td> <td>輸入主動模式時樹狀資料夾之文字顏色字串，預設'#000'</td> </tr><tr> <td><code>treeFolderIcon</code></td> <td>String</td> <td><code>mdiFolder</code></td> <td>No</td> <td>輸入樹狀資料夾之資料夾圖標字串，預設mdiFolder</td> </tr><tr> <td><code>treeFolderIconSize</code></td> <td>Number</td> <td><code>20</code></td> <td>No</td> <td>輸入樹狀資料夾之資料夾圖標之尺寸數字，單位為px，預設20</td> </tr><tr> <td><code>treeFolderIconColor</code></td> <td>String</td> <td><code>'#888'</code></td> <td>No</td> <td>輸入樹狀資料夾之資料夾圖標顏色字串，預設'#888'</td> </tr><tr> <td><code>treeFolderIconColorHover</code></td> <td>String</td> <td><code>'#777'</code></td> <td>No</td> <td>輸入滑鼠移入時樹狀資料夾之資料夾圖標顏色字串，預設'#777'</td> </tr><tr> <td><code>treeFolderIconColorActive</code></td> <td>String</td> <td><code>'#666'</code></td> <td>No</td> <td>輸入主動模式時樹狀資料夾之資料夾圖標顏色字串，預設'#666'</td> </tr><tr> <td><code>treeItemBackgroundColor</code></td> <td>String</td> <td><code>'transparent'</code></td> <td>No</td> <td>輸入樹狀資料夾之項目區背景顏色字串，預設'transparent'</td> </tr><tr> <td><code>treeItemBackgroundColorHover</code></td> <td>String</td> <td><code>'rgba(200,200,200,0.2)'</code></td> <td>No</td> <td>輸入滑鼠移入時樹狀資料夾之項目區背景顏色字串，預設'rgba(200,200,200,0.2)'</td> </tr><tr> <td><code>treeItemBackgroundColorActive</code></td> <td>String</td> <td><code>'rgba(100,100,100,0.2)'</code></td> <td>No</td> <td>輸入主動模式時樹狀資料夾之項目區背景顏色字串，預設'rgba(100,100,100,0.2)'</td> </tr><tr> <td><code>treeItemRippleColor</code></td> <td>String</td> <td><code>'rgba(200,200,200,0.4)'</code></td> <td>No</td> <td>輸入樹狀資料夾之項目區ripple效果顏色字串，預設'rgba(200,200,200,0.4)'</td> </tr><tr> <td><code>treeBackgroundColor</code></td> <td>String</td> <td><code>'#fff'</code></td> <td>No</td> <td>輸入樹狀資料夾背景顏色字串，預設'#fff'</td> </tr><tr> <td><code>treeDrawerBarSize</code></td> <td>Number</td> <td><code>2</code></td> <td>No</td> <td>輸入樹狀資料夾抽屜之分隔條尺寸數字，為分隔條寬度，單位為px，預設2</td> </tr><tr> <td><code>treeDrawerBarColor</code></td> <td>String</td> <td><code>'#ddd'</code></td> <td>No</td> <td>輸入樹狀資料夾抽屜之分隔條顏色字串，預設'#ddd'</td> </tr><tr> <td><code>treeToggleIconSize</code></td> <td>Number</td> <td><code>24</code></td> <td>No</td> <td>輸入顯隱樹狀資料夾按鈕之圖標尺寸數字，單位為px，預設24</td> </tr><tr> <td><code>treeToggleIconColor</code></td> <td>String</td> <td><code>'grey'</code></td> <td>No</td> <td>輸入顯隱樹狀資料夾按鈕之圖標顏色字串，預設'grey'</td> </tr><tr> <td><code>treeToggleIconDisabledColor</code></td> <td>String</td> <td><code>'grey lighten-1'</code></td> <td>No</td> <td>輸入顯隱樹狀資料夾按鈕之禁用時圖標顏色字串，預設'grey lighten-1'</td> </tr><tr> <td><code>treeToggleIconBackgroundColor</code></td> <td>String</td> <td><code>'transparent'</code></td> <td>No</td> <td>輸入顯隱樹狀資料夾按鈕之圖標背景顏色字串，預設'transparent'</td> </tr><tr> <td><code>treeToggleIconBackgroundColorHover</code></td> <td>String</td> <td><code>'rgba(128,128,128,0.15)'</code></td> <td>No</td> <td>輸入滑鼠移入時顯隱樹狀資料夾按鈕之圖標背景顏色字串，預設'rgba(128,128,128,0.15)'</td> </tr><tr> <td><code>lineBetweenPathAndListWidth</code></td> <td>Number</td> <td><code>1</code></td> <td>No</td> <td>輸入路徑區與清單區之間分隔線寬度，單位為px，預設1</td> </tr><tr> <td><code>lineBetweenPathAndListColor</code></td> <td>String</td> <td><code>'#ddd'</code></td> <td>No</td> <td>輸入路徑區與清單區之間分隔線顏色字串，預設'#ddd'</td> </tr><tr> <td><code>listDefItemHeight</code></td> <td>Number</td> <td><code>30</code></td> <td>No</td> <td>輸入清單區按需顯示時各項目預設最小高度(min-height)值，單位為px，預設30</td> </tr><tr> <td><code>listPaddingStyle</code></td> <td>Object</td> <td><code>{v:0,h:6}</code></td> <td>No</td> <td>輸入清單區項目之內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:0,h:6}</td> </tr><tr> <td><code>listItemTextFontSize</code></td> <td>String</td> <td><code>'0.85rem'</code></td> <td>No</td> <td>輸入清單區項目之文字字型大小字串，預設'0.85rem'</td> </tr><tr> <td><code>listItemTextColor</code></td> <td>String</td> <td><code>'#444'</code></td> <td>No</td> <td>輸入清單區項目之文字顏色字串，預設'#444'</td> </tr><tr> <td><code>listItemTextColorHover</code></td> <td>String</td> <td><code>'#222'</code></td> <td>No</td> <td>輸入滑鼠移入時清單區項目之文字顏色字串，預設'#222'</td> </tr><tr> <td><code>listItemTextColorActive</code></td> <td>String</td> <td><code>'#000'</code></td> <td>No</td> <td>輸入主動模式時清單區項目之文字顏色字串，預設'#000'</td> </tr><tr> <td><code>listFolderIcon</code></td> <td>String</td> <td><code>mdiFolder</code></td> <td>No</td> <td>輸入清單區項目之資料夾圖標字串，預設mdiFolder</td> </tr><tr> <td><code>listFileIcon</code></td> <td>String</td> <td><code>mdiFileOutline</code></td> <td>No</td> <td>輸入清單區項目之檔案圖標字串，預設mdiFileOutline</td> </tr><tr> <td><code>listItemIconSize</code></td> <td>Number</td> <td><code>22</code></td> <td>No</td> <td>輸入清單區項目之圖標尺寸數字，單位為px，預設22</td> </tr><tr> <td><code>listItemIconColor</code></td> <td>String</td> <td><code>'#888'</code></td> <td>No</td> <td>輸入清單區項目之圖標顏色字串，預設'#888'</td> </tr><tr> <td><code>listItemIconColorHover</code></td> <td>String</td> <td><code>'#777'</code></td> <td>No</td> <td>輸入滑鼠移入時清單區項目之圖標顏色字串，預設'#777'</td> </tr><tr> <td><code>listItemIconColorActive</code></td> <td>String</td> <td><code>'#666'</code></td> <td>No</td> <td>輸入主動模式時清單區項目之圖標顏色字串，預設'#666'</td> </tr><tr> <td><code>listItemBackgroundColor</code></td> <td>String</td> <td><code>'transparent'</code></td> <td>No</td> <td>輸入清單區項目之背景顏色字串，預設'transparent'</td> </tr><tr> <td><code>listItemBackgroundColorHover</code></td> <td>String</td> <td><code>'rgba(200,200,200,0.2)'</code></td> <td>No</td> <td>輸入滑鼠移入時清單區項目之背景顏色字串，預設'rgba(200,200,200,0.2)'</td> </tr><tr> <td><code>listItemBackgroundColorActive</code></td> <td>String</td> <td><code>'rgba(100,100,100,0.2)'</code></td> <td>No</td> <td>輸入主動模式時清單區項目之背景顏色字串，預設'rgba(100,100,100,0.2)'</td> </tr><tr> <td><code>listItemRippleColor</code></td> <td>String</td> <td><code>'rgba(255,255,255,0.4)'</code></td> <td>No</td> <td>輸入清單區項目之ripple效果顏色字串，預設'rgba(255,255,255,0.4)'</td> </tr><tr> <td><code>listBackgroundColor</code></td> <td>String</td> <td><code>'#fff'</code></td> <td>No</td> <td>輸入清單區背景顏色字串，預設'#fff'</td> </tr><tr> <td><code>btnDisplayTreeIconShow</code></td> <td>String</td> <td><code>mdiArrowRightBoldHexagonOutline</code></td> <td>No</td> <td>輸入顯示樹狀資料夾按鈕圖標字串，預設mdiArrowRightBoldHexagonOutline</td> </tr><tr> <td><code>btnDisplayTreeIconShow</code></td> <td>String</td> <td><code>mdiArrowLeftBoldHexagonOutline</code></td> <td>No</td> <td>輸入隱藏樹狀資料夾按鈕圖標字串，預設mdiArrowLeftBoldHexagonOutline</td> </tr><tr> <td><code>btnDisplayTreeIconSize</code></td> <td>Number</td> <td><code>20</code></td> <td>No</td> <td>輸入顯隱樹狀資料夾按鈕圖標之尺寸數字，單位為px，預設20</td> </tr><tr> <td><code>btnDisplayTreeIconColor</code></td> <td>String</td> <td><code>'grey darken-1'</code></td> <td>No</td> <td>輸入顯隱樹狀資料夾按鈕圖標顏色字串，預設'grey darken-1'</td> </tr><tr> <td><code>btnDisplayTreeIconColorHover</code></td> <td>String</td> <td><code>'grey darken-2'</code></td> <td>No</td> <td>輸入滑鼠移入時顯隱樹狀資料夾按鈕圖標顏色字串，預設'grey darken-2'</td> </tr><tr> <td><code>btnDisplayTreeIconColorFocus</code></td> <td>String</td> <td><code>'grey darken-3'</code></td> <td>No</td> <td>輸入取得焦點時顯隱樹狀資料夾按鈕圖標顏色字串，預設'grey darken-3'</td> </tr><tr> <td><code>btnDisplayTreeBackgroundColor</code></td> <td>String</td> <td><code>'transparent'</code></td> <td>No</td> <td>輸入顯隱樹狀資料夾按鈕背景顏色字串，預設'transparent'</td> </tr><tr> <td><code>btnDisplayTreeBackgroundColorHover</code></td> <td>String</td> <td><code>'rgba(200,200,200,0.3)'</code></td> <td>No</td> <td>輸入滑鼠移入時顯隱樹狀資料夾按鈕背景顏色字串，預設'rgba(200,200,200,0.3)'</td> </tr><tr> <td><code>btnDisplayTreeBackgroundColorFocus</code></td> <td>String</td> <td><code>'rgba(180,180,180,0.3)'</code></td> <td>No</td> <td>輸入主動模式時顯隱樹狀資料夾按鈕背景顏色字串，預設'rgba(180,180,180,0.3)'</td> </tr><tr> <td><code>pathBtnTextColor</code></td> <td>String</td> <td><code>'#444'</code></td> <td>No</td> <td>輸入路徑區按鈕之文字顏色字串，預設'#444'</td> </tr><tr> <td><code>pathBtnTextColorHover</code></td> <td>String</td> <td><code>'#222'</code></td> <td>No</td> <td>輸入滑鼠移入時路徑區按鈕之文字顏色字串，預設'#222'</td> </tr><tr> <td><code>pathBtnTextFontSize</code></td> <td>String</td> <td><code>'0.85rem'</code></td> <td>No</td> <td>輸入路徑區按鈕之文字字型大小字串，預設'0.85rem'</td> </tr><tr> <td><code>pathBtnBackgroundColor</code></td> <td>String</td> <td><code>'transparent'</code></td> <td>No</td> <td>輸入路徑區按鈕之背景顏色字串，預設'transparent'</td> </tr><tr> <td><code>pathBtnBackgroundColorHover</code></td> <td>String</td> <td><code>'rgb(236,236,236)'</code></td> <td>No</td> <td>輸入滑鼠移入時路徑區按鈕之背景顏色字串，預設'rgb(236,236,236)'</td> </tr><tr> <td><code>pathSepIcon</code></td> <td>String</td> <td><code>mdiChevronRight</code></td> <td>No</td> <td>輸入路徑區分隔符號之圖標字串，預設mdiChevronRight