SAP UI5 OverflowToolbar 控制元件，基於 `sap.m.Toolbar`，該工具欄在其內容不適合顯示區域時提供 Overflow 行為。

當容器可見區域的可用空間不足時，OverflowToolbar的內容會從右向左移動到溢位區域。使用者可以透過溢位按鈕在彈出視窗中開啟它來訪問其內容。

下面是一個例子：OverflowToolbar 裡的按鈕，能夠正常顯示的情況：

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

Flag 和 Toggle 按鈕無法正常顯示，只能在 Overflow 區域顯示的情況：
![](https://img-blog.csdnimg.cn/img_convert/944cc4f6224bf5c63b4758803610e6af.png)

OverflowToolbar是一個自適應容器，它檢查可用寬度並隱藏不適合的部分內容。

它的目的是使用簡單的控制元件，如 sap. m.button和 sap.m.label 作為內容。嵌入其他自適應容器控制元件(sap.m.Breadcrumbs除外)會導致對可用空間的爭奪——兩個控制元件都根據另一個控制元件的大小計算可用空間，並同時改變它們的寬度，導致空間分佈的計算不正確。

下圖顯示了 OverflowToolbar 名為 `content` 的 aggregation，裡面包含了三個子控制元件：
![](https://img-blog.csdnimg.cn/img_convert/7b3294ddfb461bd7a8e0e5c868253006.png)

這三個子控制元件在 detail 檢視裡的定義位置：
![](https://img-blog.csdnimg.cn/img_convert/d6dc259ba73b2c7cd3cfb0f7a0e0a6d9.png)

```xml
<overflowtoolbar>
				<toolbarspacer></toolbarspacer>
				<button type="Accept" text="Save"></button>
				<button type="Reject" text="Cancel"></button>
			</overflowtoolbar>
```

OverflowToolbar 繼承自 `sap.m.Toolbar`, 這是一種水平容器，最常用於顯示按鈕、標籤、選擇和各種其他輸入控制元件。

預設情況下，如果工具欄項有基於百分比的寬度(例如，sap.m.input 和 sap.m.slider)或實現了 sap.ui.core.IShrinkable 介面(例如, sap.m.text 和 sap.m.label)，它們是可收縮的。可以透過為工具欄項提供 sap.m.ToolbarLayoutData 來重寫此行為。

開發人員可以使用 sap.m.toolbarseparator 在前面和後面的 sap.m.toolbar 元素之間新增一個視覺分隔符。分隔符與主題相關，可以是填充、邊距或線。

要在工具欄項之間新增水平空間，請使用sap.m.toolbarspacer。可以定義水平空間的寬度，或者靈活地覆蓋工具欄專案之間的剩餘空間(例如，將專案推到工具欄的邊緣)。

SAP UI5 檢視裡的 OverflowToolbar 控制元件

相關文章