我在 SAP UI5 XML 檢視裡有一個 Button 控制元件，型別為 Accept：

![](https://img-blog.csdnimg.cn/img_convert/f8e91d4d259f8ccf5ef3f93c31147ca5.png)

執行時渲染出來的效果如下：

![](https://img-blog.csdnimg.cn/img_convert/2e7c53a60195f7133f644dfb08708f58.png)

這個按鈕對應生成的 HTML 檢視程式碼裡，起作用的 css：

```css
span.sapMBtnInner.sapMBtnAccept {
    background-image: none;
    background-color: #ebf5cb;
    border-color: #ebf5cb;
    color: #256f3a;
}
```
對應的 css 檔案地址：https://sapui5.hana.ondemand.com/resources/sap/m/themes/sap_horizon/library.css

![](https://img-blog.csdnimg.cn/img_convert/4c5983e9c449d326254f22956efb4d62.png)

本地渲染：sapui5.hana.ondemand.com/resources/sap/ui/core/themes/sap_fiori_3
![](https://img-blog.csdnimg.cn/img_convert/7230a5b2410bbefdf892fa3d49aca2fc.png)

本地改成`sap_horizon` 會怎樣？

成功了：
![](https://img-blog.csdnimg.cn/img_convert/19e61512df379fde946867b28597bf86.png)

使用者透過單擊或點選按鈕或按下某些鍵盤鍵（例如 Enter）來觸發操作。

對於按鈕 UI，可以定義文字、圖示或兩者。 您還可以指定是先顯示文字還是先顯示圖示。

可以從一組預定義的 ButtonTypes 中進行選擇，這些 ButtonTypes 提供不同的樣式以對應於觸發的操作。

可以將按鈕設定為啟用或禁用。 啟用的 Button 可以透過單擊或點選來按下，並且它會更改其樣式以向使用者提供視覺反饋，即它被按下或滑鼠游標懸停在上面。 禁用的 Button 顯示為非活動狀態且無法按下。

SAP UI5 所有支援的 Button型別，在這個列舉型別裡可以找到：`sap.m.ButtonType`

![](https://img-blog.csdnimg.cn/img_convert/357da43de9f921b56f19b271b574e3bb.png)

![](https://img-blog.csdnimg.cn/img_convert/384771021598900cb05cdd07e6ae356e.png)

button 的 `ariaHasPopup` 屬性：指定 aria-haspopup 屬性的值

如果值為 None，則不會呈現該屬性。 否則它將使用選定的值呈現。

僅當按鈕與彈出視窗相關時才使用此屬性。 該值需要等於彈出視窗的主要/根(`main/root`)角色，例如對話方塊、選單或列表。

下圖是在 XML 檢視裡嵌入 css style 的方法：

```xml
<view controllername="sap.hcm.Address" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml">
   <style>
      .mySuperRedButton {
         color: red;
      }
   </style>
   <panel>
      <button class="mySuperRedButton" text="Press Me"></button>
   </panel>
</view>
```
為了允許 XML 檢視在內容安全策略拒絕內聯樣式的環境中使用（即沒有 `style-src` 指令的不安全內聯源），則開發人員需要引用外部樣式表，而不是將樣式表嵌入到 SAP UI5 XML 檢視。

SAP UI5 按鈕的型別和背景色設定例子

相關文章