資源管理器側邊欄

資源管理器以結構化樹格式顯示設計器中目前頁面的內容。它使您能夠選擇特定頁面上的任何元件，包括那些在畫布上可能難以選擇的元件。在資源管理器中，您還可以重新排列元素並調整 組件結構。結構的變化立即反映在畫布上。

在整個教程中，您將發現： 

1. 存取、定位和調整資源管理器側邊欄大小的方法
2. 透過資源管理器選擇組件的技術
3. 區分資源管理器中獨特組件的策略
4. 使用資源管理器重新定位元件的方法

存取、錨定資源管理器側邊欄並調整其大小

資源管理器側邊欄位於側邊工具列中。您可以透過點擊側邊面板中的圖示或按下鍵盤上的 Z 來切換資源管理器。如果取消固定，您也可以將元素拖曳到側面板中的圖示上來開啟資源管理器。

在小於 1440 像素的螢幕上，資源管理器會在右側展開（在右側面板上方），同時拖曳元素進行重新定位。

錨定探索者

在寬度超過 1440 像素的瀏覽器上，您可以選擇錨定資源管理器以使其始終可見。這有助於輕鬆地將元素放置在內部並與元素快速互動。

若要錨定瀏覽器，請點選瀏覽器頂部工具列中的錨點圖示。若要取消錨定，請選擇資源管理器工具列中的取消錨定圖示。

調整資源管理器的大小

錨定後，您可以調整資源管理器面板的寬度。

若要調整資源管理器的大小，請確保其已錨定，然後將滑鼠懸停在其右邊緣並拖曳出現的藍線。

查看目前頁面的元素

資源管理器也可以用來視覺化頁面層次結構並識別哪些元件嵌套在其他元件中。

您可以選擇展開或折疊父組件。透過展開父元件，其中的子元件變得可見並且縮排。您也可以選擇「全部折疊」以僅查看頂級父元件，或選擇「全部展開」以顯示頁面上的每個元素。

若要展開或折疊父組件，請按一下“切換” 圖示 ▸ 位於組件左側。

若要展開或折疊所有元件，請按一下資源管理器工具列中的展開/折疊圖示。

內幕提示： 按 替代/選項 + Z 在鍵盤上快速展開或折疊全部 探險家 成分。

透過資源管理器選擇元件

將滑鼠懸停在資源管理器中的不同元件上將突出顯示畫布上相應的元件。相反，將滑鼠懸停在畫布元素上將突出顯示資源管理器中的元素。

按一下資源管理器中的一個元件以將其選取。在資源管理器中選擇螢幕外元件後，畫布會自動捲動到該元件。選擇組件後，您可以在「樣式」面板中設定其樣式，或在「組件設定」面板中配置其設定。此外，還可以透過「交互」面板建立互動。

透過資源管理器選擇元件有利於辨識元件的層次結構、其父元件和同級元件。在設計互動時，這些知識非常寶貴。

透過畫布選擇不可存取的組件

事實證明，在選擇在畫布上具有挑戰性或無法選擇的元件時，資源管理器尤其有價值。其中包括 Display 屬性設定為 None 的元素或具有負 Z 索引的元件。

識別資源管理器中的獨特元件

在資源管理器中，您可能會在某些組件的左側看到彩色圖標，而其他組件的右側則有圖標。這些都是獨特的指標。它們有助於快速區分靜態和動態組件或自動定位和固定的網格子項目。這些圖示還允許立即識別觸發互動的組件或隱藏在畫布上的組件。

資源管理器中的圖示傳達了有關組件的重要詳細資訊： 

• 綠色“盒子”圖標（左邊） — 組件是一個模組
• 綠色“盒子”圖標（正確的） — 此元件是編輯模式下的開放模組
• 紫色圖示（左邊） — 該元件是一個集合列表，連結到一個集合字段，或應用了一個條件
• “哈希”圖示 #（正確的） — 此元素是固定到網格中的單元格或區域的網格子元素‍
• “斜眼”圖標（正確的） — 組件的顯示設定為隱藏且在畫布上不可見
• 閃電圖示（右） — 該組件有一個互動觸發器
• 「地球」圖示（右） — 元件已在目前語言環境視圖中本地化

使用資源管理器移動元件

元件可以直接在畫布上移動，但有時在資源管理器中移動元件時可視化結構是有益的。例如，您可以透過在資源管理器中拖曳元件來重新排列同級元件（共用相同父級的元件）。頁面的各個部分也可以與其中的所有子元件一起移動。

資源管理器簡化了頁面層次結構的變更。此任務在畫布上可能具有挑戰性，特別是對於大小相似的嵌套組件。但是，在資源管理器中，您可以立即抓取子元件並將其放置在其父元件之外。同樣，您可以透過點擊元件並將其拖曳到另一個元素中來嵌套該元件。