按鈕（Button）元件：用戶在前端可以直接看到一個帶名稱的按鈕，點擊後可執行一個邏輯處理的元件，其默認的結構如下圖，是開發時拖放一個按鈕後雙擊進入按鈕看到的樣子：

1、按鈕本身會默認一個名稱，同一父元件內放第一個時顯示“Button”，第二個會顯示為“Button 2”,按鈕可以改名（快捷鍵“f2”或拖放後命名處於可編輯狀態輸入新名稱）；

2、按鈕屬性設定中，無代碼開發平臺在後端已默認定義了以下幾個樣式類可以定義顯示顏色，可以添加“html.styleClass”屬性並定義為“btn-info/btn-success”等進行顯示效果測試，也可以參考另一文章顯示元件樣式管理介紹自定義更多個性化的樣式：

3、按鈕內部的“<Caption>”數據變量是存放名稱的，也可以放一個字符常量並用剪頭傳值給名稱變量，不過一般不用，但這個變量有個很好的用法就是當執行完邏輯運算後，如果特定的情況可在按鈕上直接反饋一個結果，比如一個“提交”按鈕，當客戶點擊後，“提交”變為“您已提交”或是“謝謝提交”，這類用法可大幅提高用戶體驗，且實現方式簡單：

4、按鈕內部的“<On Click>”是一個行為元件，如之前文章提到過，帶有<>符號的內容本身是軟件所運行時底層代碼的一部分，這個名稱不能改動，設計在其中的邏輯是用戶點擊按鈕時軟件將運算的內容，除上圖中點擊後即將父元件名稱變量改值為“您已提交”，想讓用戶點擊所進行的各種處理都可以設計在其中，比如前面申請審批中對選中的申請記錄進行批準的狀態更新，以及更新後的頁面顯示刷新：

5、按鈕中本身還可以放置一個動態旋轉圖片元件，在大數據或長運算處理時，可以讓用戶在點擊後顯示一個旋轉的圖標，給用戶一個正在運行的反饋以提升用戶體驗，這個用戶同上3中提到的功能：

按鈕組（Button Group）元件：是將幾個按鈕放入一個容器中一起顯示，區別於前面提到的其它顯示容器的是，按鈕組放按鈕元件後，默認的按鈕的圓角在中間的部分將變為直角且各按鈕之間不是分離的，按鈕連在一起，效果如下圖中的第一行三個效果，第二行是放在toolbar中的按鈕，第三行是直接放置的三個獨立按鈕：

以上第一行中第二個按鈕樣式按上2中所述改為“btn-success”,第三個改為“btn-info”,其他默認的“btn-primary”未改動。

TERSUS畫畫一樣開發軟件 顯示元件介紹-按鈕類顯示元件