元件總覽 | Bricks Dag, Inc. Help Center

Introduction 介紹

元件是構成應用程式的基礎元件，在 BRICKS TOOLS 中被稱為 brick，所用在應用程式畫布上看到的東西都能使用 brick 元件構建出來，了解所有 brick 元件就能實現在畫布上想達成的任何需求。

Section Outline 單元大綱

在這個單元裡，我們將會介紹 18 種不同的元件:

點擊元件連結可觀看元件的詳細教學

⏱ 此篇教學操作預計花費時間：2～3分鐘

Basic Operations 基本操作

Create a Brick 新增元件
在 APPLICATION 頁籤中，左方的階層清單中有個［ ⊞ ］符號的 Main(Root)，這符號代表是 Canvas 畫布的意思，而所有的 Brick 元件都要從Canvas 畫布右方的［＋］去新增出來。
點擊［＋］後，右方會出現 Bricks 生成介面，可以從［ Template ］選擇要新增的元件類型，然後在［ Title ］裡替元件命名即可新增。
生成介面其他選項簡介
Link exists?：可選擇將自行製作的 Subspace 或 Brick 包裝成一個新的Brick
X, Y：設定 Brick 在 Canvas 畫布中的預設位置。
Width, Height：設定 Brick 在 Canvas 畫布中的寬高。
Remove a Brick 刪除元件
每個元件的右側屬性列表中，最下方 Operation 屬性是用來檢測及控制元件的選項，先介紹下方兩塊紅底色的危險功能。
- Remove This Brick in the Canvas 刪除畫布上元件
  在 Basic 單元的互動行為控制中有教學到如何控制不同 Canvas 之間的動態切換，因此可以得知在不同畫布之間可以存在同一個元件。若是需要讓元件僅僅在其中一個畫布上消失，切換到另一個畫布時出現時，就需要選擇 [ Remove This Brick in the Canvas ] ，這樣就只會在目前選擇的畫布下去刪除元件，不會將所有畫布上的同一元件全部刪除。
- Remove This Brick 刪除元件
  和 Remove This Brick in the Canvas 不同，選擇 [ Remove This Brick ] 的話，只要是所有和該 Brick 為同一個 ID 的元件都會同時被刪除，使用時請小心。
- Copy 複製元件
  同樣在元件右側的 Operation 屬性中有個 Copy 的選項，這是用於當需要多個設定好的元件放置在畫布上時，可以不用一個一個重新製作，直接選擇製作好的元件，選擇 Operation 屬性中的［ Copy ］即可複製出一個一模一樣的元件。
- Inspect This Brick 檢測元件
  從元件右側的 Operation 屬性有個 Inspect This Brick選項，這是用於當元件 Event 事件與 Property Bank, Generator 等各種連結十分複雜時，可透過 Inspect This Brick 就能清楚看出之間的關聯性走向。
  - Event Routing 事件路徑
    顯示這個元件觸發 event / calculation 的流向或是影響了哪些 brick / generator 的 property。
    如下圖所示可以看到，Camera元件有三個事件，分別會觸發不同的 Generator 及影響的 Property Bank 變數和切換 Canvas，接著會看到 Generator 和 Property Bank 變數以及變數連結的 Text 元件，後面還會有 Text 元件的事件都一一被列表出來。
    這些將可輔助檢測元件之間的事件關連是否有問題。
  - Parent Call
    顯示這個元件被哪些 brick / generator / property calculation 觸發或連結。和 Event Route 相反是從源頭去檢視，而 Event Route 則是往下向路徑去檢視。

Configuration 設定

每個元件都會有基本的 Configuration 屬性，點擊元件後右側就會是元件的 Configuration。詳細設定細節可至各元件教學中觀看。

Frame 框架
設定元件基本框架，包含位置、大小、進場方式及行為及在畫布外時的處置方式。
Properties 屬性
設定元件的屬性，包含底色、透明度以及各自不同類型元件的基本設定。
Animations 動態事件
設定元件在不同事件下觸發的動態行為，需先設定好動態才可新增至此區事件中。Animation 動態教學連結
Events 事件
設定元件在不同事件下觸發的行為，若需要控制 Generator 或 Property Bank 變數時需先新增設定好才可在這事件中設定。

觀看下一節 - 基礎純色方塊