方塊元件的基本介紹、用途
Rect 方塊元件磚是 BRICKS 中最基本的元件，在畫布上呈現為基本的方形，大多用於做區塊劃分的底色背景存在，也可用於製作成小型按鈕、選單等多種用途。
方塊元件在畫布上的各種呈現樣貌，不管是有無框線、有無圓角、透明層次或是做成分隔線都可以
Rect (方塊元件) 是我們元件中最基本的一種，以下將會詳細介紹他的各種參數設定，作為其他元件在設定參數時可以參考的內容。
以下將針對各個區塊 (Frame, Properties, Animations, Events) 解說屬性變數的作用。
Frame 區塊
方塊元件基本屬性及進場動態
屬性名稱 | 屬性形態 | 說明 |
X | 數值 | 設定方塊元件從應用程式左方邊界到方塊元件左方邊緣的距離 |
Y | 數值 | 設定方塊元件從應用程式上方邊界到方塊元件上方邊緣的距離 |
Width | 數值 | 設定方塊元件的寬度大小 |
Height | 數值 | 設定方塊元件的高度大小 |
Standby Mode | 清單 | 設定方塊元件待機進場模式，有以下5種模式。
|
Standby Frame | 屬性設定 | 當 Standby Mode 選擇 custom 時才會出現，可自行編輯元件進場的 x, y, width, height 等數值 |
Standby Opacity | 數值 0到1 | 設定元件待機進場前的透明度 |
Standby Delay | 毫秒 | 設定元件待機進場前會延遲多少毫秒再進場 |
Standby Easing | 屬性設定 | 設定元件進場的動態模式，Edit 設定中的 default 代表預設的動態效果，若下方 x, y, 長，寛、透明度無設定時以 default 設定為主。詳細設定可參考: https://easings.net/ |
Render Out of View | 布林值（Yes / No） | 設定元件在應用程式邊界外時是否需要運算其元件。舉例來說，若元件一開始在畫面外，且 Render Out of View 選否時，若有預設 Loop 的動態時，則不會執行，或是播放音樂的元件在畫面外也一樣不會播放。 |
Properties 區塊
屬性名稱 | 屬性形態 | 說明 |
Opacity | 數值 0到1 | 設定元件的透明度，0 代表完全透明，1 代表完全不透明。 |
Background Color | 字串 | 設定元件背景顏色，可直接點選色盤設定或透過輸入色碼進行設定，提供HEX、RGBA、HSLA三種選擇。 |
Properties - Border 區塊
方塊元件 4 邊導角半徑及邊框顏色粗細設定
屬性名稱 | 屬性形態 | 說明 |
Width | 數值 | 設定元件邊框線寛度 |
Style | 清單 | solid: 設定為實心線框 dotted：設定為點線邊框 dashed：設定為虛線邊框
 |
Color | 字串 | 設定邊框顏色 |
Radius | 數值 | 設定元件的四個導角半徑，舉例來說將寬高為 10 的元件設定導角為5時，方形就會變成圓形 |
Top Width | 數值 | 單獨設定方塊元件的上方邊框線寬，此處的設定會覆蓋 Border Width 的設定 |
Top Color | 字串 | 單獨設定方塊元件的上方邊框線顏色，此處的設定會覆蓋 Border Color 設定 |
Top Left Radius | 數值 | 單獨設定方塊元件的左上方邊框導角半徑，此處的設定會覆蓋 Border Radius 設定 |
Top Right Radius | 數值 | 單獨設定方塊元件的右上方邊框導角半徑，此處的設定會覆蓋 Border Radius 設定 |
Bottom Width | 數值 | 單獨設定方塊元件的下方邊框線寬，此處的設定會覆蓋 Border Width 的設定 |
Bottom Color | 字串 | 單獨設定方塊元件的下方邊框線顏色，此處的設定會覆蓋 Border Color 設定 |
Bottom Left Radius | 數值 | 單獨設定方塊元件的左下方邊框導角半徑，此處的設定會覆蓋 Border Radius 設定 |
Bottom Right Radius | 數值 | 單獨設定方塊元件的右下方邊框導角半徑，此處的設定會覆蓋 Border Radius 設定 |
Left Width | 數值 | 單獨設定方塊元件的左方邊框線寬，此處的設定會覆蓋 Border Width 的設定 |
Left Color | 字串 | 單獨設定方塊元件的左方邊框線顏色，此處的設定會覆蓋 Border Color 設定 |
Right Width | 數值 | 單獨設定方塊元件的右方邊框線寬，此處的設定會覆蓋 Border Width 的設定 |
Right Color | 字串 | 單獨設定方塊元件的右方邊框線顏色，此處的設定會覆蓋 Border Color 設定 |
Animations 區塊
在設定 Animations 前，需要先在左側動畫新塊動畫形態後，在下方觸發事件才可指定對應 Animations 動態。設定及操作範例可以參考 Animation 教學文章。
On Press | 當方塊元件被按下時觸發的動畫 |
On Focus | 當方塊元件被選擇時觸發的動畫（使用 TV 設備與遙控器） |
On Blur | 當方塊元件選擇被取消時觸發的動畫（使用 TV 設備與遙控器） |
Standby | 當 Stanby 進場動態完成時觸發的動畫 |
Show | 當方塊元件顯示時會觸發的動畫 |
Breathe | 當方塊元件其他動態觸發播放完後，持續以呼吸式的循環觸發的動畫。 |
Events 區塊
事件區塊，可設定方塊元件在特定狀態下觸發事件，BRICKS 提供多種行為供選擇，例如：改變畫布、觸發功能處理器、改變 Property Bank 的變數數值或是動態生成元件或動畫。設定及操作範例可以參考 Event 教學文章。
On Press | 當方塊元件被按下觸發的事件 |
On Focus | 當方塊元件被選擇時觸發的事件（使用 TV 設備與遙控器） |
On Blur | 當方塊元件選擇被取消時觸發的事件（使用 TV 設備與遙控器） |
Show Start | 當方塊元件顯示時會觸發的事件 |
Standby | 當方塊元件 Stanby 進場動態完成時觸發的事件 |
若需要任何幫助，歡迎點擊右下角的對話圖示詢問，我們會盡快回覆您的問題