方塊元件的基本介紹、用途
Rect 方塊元件磚是 BRICKS 中最基本的元件，在畫布上呈現為基本的方形，大多用於做區塊劃分的底色背景存在，也可用於製作成小型按鈕、選單等多種用途。
方塊元件在畫布上的各種呈現樣貌，不管是有無框線、有無圓角、透明層次或是做成分隔線都可以
Rect (方塊元件) 是我們元件中最基本的一種，以下將會詳細介紹他的各種參數設定，作為其他元件在設定參數時可以參考的內容。
以下將針對各個區塊 (Frame, Properties, Animations, Events) 解說屬性變數的作用。
Frame 區塊
方塊元件基本屬性及進場動態
Property Name 屬性名稱 | Property Type 屬性形態 | Description 說明 |
X | Number
數值 | X coordinate of the top left corner of the brick 設定方塊元件從應用程式左方邊界到方塊元件左方邊緣的距離 |
Y | Number
數值 | Y coordinate of the top left corner of the brick 設定方塊元件從應用程式上方邊界到方塊元件上方邊緣的距離 |
Width | Number
數值 | Width of the rectangle brick 設定方塊元件的寬度大小 |
Height | Number
數值 | Height of the rectangle brick 設定方塊元件的高度大小 |
Standby Mode | List 清單 | Setting the standby mode of a brick means setting the transition effect from the brick's standby mode to its first appearance on the canvas. There are five standby modes:
設定方塊元件待機進場模式，有以下5種模式。
|
Standby Frame | Properties 屬性設定 | The Standby Frame property will only show up on the configuration editor and be editable when the user selects "custom" for the brick's Standby Mode. The brick's transitioning properties: x, y, width, and height can be customized. 當 Standby Mode 選擇 custom 時才會出現，可自行編輯元件進場的 x, y, width, height 等數值 |
Standby Opacity | Number (between 0 and 1)
數值 0到1 | The opacity of the brick when it is in standby mode. 設定元件待機進場前的透明度 |
Standby Delay | ms 毫秒 | The time (in milliseconds) for the brick to show up on the screen from standby mode. 設定元件待機進場前會延遲多少毫秒再進場 |
Standby Easing | Properties 屬性設定 | The brick's transition effect into the screen can be specified with easing functions in the Standby Easing pop-up window. If none of the x, y, width, height, and opacity properties is specified, the brick will use the easing function specified in default. For more in-depth information, visit https://easings.net/ 設定元件進場的動態模式，Edit 設定中的 default 代表預設的動態效果，若下方 x, y, 長，寛、透明度無設定時以 default 設定為主。詳細設定可參考: https://easings.net/ |
Render Out of View | Boolean 布林值（Yes / No） | To specify whether the brick will be rendered even if it is out of the application canvas. For example, if a brick is not on the canvas initially during standby, selecting No means that its effect (such as animation and multimedia content) will not be rendered. Note that this only applies to a brick that is completely out of the canvas, which means the brick will still be rendered if it is located on the edge of the canvas. 設定元件在應用程式邊界外時是否需要運算其元件。舉例來說，若元件一開始在畫面外，且 Render Out of View 選否時，若有預設 Loop 的動態時，則不會執行，或是播放音樂的元件在畫面外也一樣不會播放。 |
Properties 區塊
Property Name 屬性名稱 | Property Type 屬性形態 | Description 說明 |
Opacity | Number (between 0 and 1) 數值 0到1 | The opacity of the brick. 0: completely transparent; 1: not transparent at all 設定元件的透明度，0 代表完全透明，1 代表完全不透明。 |
Background Color | String 字串 | The background color of the brick. Users can select a color from the color panel or specify the color with HEX, RGBA, or HSLA. 設定元件背景顏色，可直接點選色盤設定或透過輸入色碼進行設定，提供HEX、RGBA、HSLA三種選擇。 |
Properties - Border 區塊
方塊元件 4 邊導角半徑及邊框顏色粗細設定
Property Name | Property Type 屬性形態 | Description 說明 |
Width | Number 數值 | The border's width 設定元件邊框線寛度 |
Style | One Of 清單 | The border's style. Can be one of solid, dotted, or dashed. solid: 設定為實心線框 dotted：設定為點線邊框 dashed：設定為虛線邊框
 |
Color | String 字串 | The border's color 設定邊框顏色 |
Radius | Number 數值 | The border's radius 設定元件的四個導角半徑，舉例來說將寬高為 10 的元件設定導角為5時，方形就會變成圓形 |
Top Width | Number 數值 | The top border's width. Will overwrite the value specified in border width. 單獨設定方塊元件的上方邊框線寬，此處的設定會覆蓋 Border Width 的設定 |
Top Color | String 字串 | The top border's color. Will overwrite the value specified in border color. 單獨設定方塊元件的上方邊框線顏色，此處的設定會覆蓋 Border Color 設定 |
Top Left Radius | Number 數值 | The border's radius on the top left corner. Will overwrite the value specified in border radius. 單獨設定方塊元件的左上方邊框導角半徑，此處的設定會覆蓋 Border Radius 設定 |
Top Right Radius | Number 數值 | The border's radius on the top right corner. Will overwrite the value specified in border radius. 單獨設定方塊元件的右上方邊框導角半徑，此處的設定會覆蓋 Border Radius 設定 |
Bottom Width | Number 數值 | The bottom border's width. Will overwrite the value specified in border width. 單獨設定方塊元件的下方邊框線寬，此處的設定會覆蓋 Border Width 的設定 |
Bottom Color | String 字串 | The bottom border's color. Will overwrite the value specified in border color. 單獨設定方塊元件的下方邊框線顏色，此處的設定會覆蓋 Border Color 設定 |
Bottom Left Radius | Number 數值 | The border's radius on the bottom left corner. Will overwrite the value specified in border radius. 單獨設定方塊元件的左下方邊框導角半徑，此處的設定會覆蓋 Border Radius 設定 |
Bottom Right Radius | Number 數值 | The border's radius on the bottom right corner. Will overwrite the value specified in border radius. 單獨設定方塊元件的右下方邊框導角半徑，此處的設定會覆蓋 Border Radius 設定 |
Left Width | Number 數值 | The left border's width. Will overwrite the value specified in border width. 單獨設定方塊元件的左方邊框線寬，此處的設定會覆蓋 Border Width 的設定 |
Left Color | String 字串 | The left border's color. Will overwrite the value specified in border color. 單獨設定方塊元件的左方邊框線顏色，此處的設定會覆蓋 Border Color 設定 |
Right Width | Number 數值 | The right border's width. Will overwrite the value specified in border width. 單獨設定方塊元件的右方邊框線寬，此處的設定會覆蓋 Border Width 的設定 |
Right Color | String 字串 | The right border's color. Will overwrite the value specified in border color. 單獨設定方塊元件的右方邊框線顏色，此處的設定會覆蓋 Border Color 設定 |
Animations 區塊
在設定 Animations 前，需要先在左側動畫新塊動畫形態後，在下方觸發事件才可指定對應 Animations 動態。設定及操作範例可以參考 Animation 教學文章。
On Press | Animation that will be triggered when the brick is being pressed. 當方塊元件被按下時觸發的動畫 |
On Focus | Animation that will be triggered when the brick is being focused/selected when using the TV controller. 當方塊元件被選擇時觸發的動畫（使用 TV 設備與遙控器） |
On Blur | Animation that will be triggered when the brick is being unfocused/unselected when using the TV controller. 當方塊元件選擇被取消時觸發的動畫（使用 TV 設備與遙控器） |
Standby | Animation that will be triggered when the brick's standby transition is finished. 當 Stanby 進場動態完成時觸發的動畫 |
Show | Animation that will be triggered when the brick is shown. 當方塊元件顯示時會觸發的動畫 |
Breathe | Animation that will be triggered on repeat when all other animations finish playing. Note that the animation will only be playing on repeat when the starting point and the ending point are the same. For example, a sequential animation that involves translating X to 30 and then back to 0 (the original position) will work. 當方塊元件其他動態觸發播放完後，持續以呼吸式的循環觸發的動畫。 |
Events 區塊
事件區塊，可設定方塊元件在特定狀態下觸發事件，BRICKS 提供多種行為供選擇，例如：改變畫布、觸發功能處理器、改變 Property Bank 的變數數值或是動態生成元件或動畫。設定及操作範例可以參考 Event 教學文章。
On Press | Event that will be triggered when the brick is being pressed. 當方塊元件被按下觸發的事件 |
On Focus | Event that will be triggered when the brick is being focused/selected when using the TV controller. 當方塊元件被選擇時觸發的事件（使用 TV 設備與遙控器） |
On Blur | Event that will be triggered when the brick is being unfocused/unselected when using the TV controller. 當方塊元件選擇被取消時觸發的事件（使用 TV 設備與遙控器） |
Show Start | Event that will be triggered when the brick is shown. 當方塊元件顯示時會觸發的事件 |
Standby | Event that will be triggered when the brick's standby transition is finished. 當方塊元件 Stanby 進場動態完成時觸發的事件 |