SAP UI5 DynamicPage 控制元件介紹

i042416發表於2022-06-05

該控制元件從 SAP UI5 1.42 版開始可用。DynamicPage 是一個佈局控制元件,由標題、具有動態行為的標題、內容區域和可選的浮動頁尾組成。

該控制元件由幾個元件組成:

  • DynamicPageTitle - 由左側的標題、中間的內容和右側的操作組成。 顯示的內容會根據 DynamicPageHeader 的當前模式而變化。
  • DynamicPageHeader - 一個通用容器,可以包含單個佈局控制元件並且不關心內容對齊和響應性。 標頭在兩種模式下工作 - 展開模式(expanded)和收起模式(snapped),並且可以藉助不同的屬性調整其行為。
  • 內容區域 - 一個通用容器,可以有單個 UI5 佈局控制元件,不用關心內容對齊和響應性。
  • 頁尾 - 位於底部,有一個小的偏移量,用於附加操作,頁尾浮動在內容上方。 它可以是任何 sap.m.IBar 控制元件。
  • 如果需求是顯示一個始終可見的標題和一個具有可配置擴充套件/對齊功能的標題,請使用 DynamicPage。相反的,不需要擴充套件/對齊功能,最好使用 sap.m.Page 作為較輕的控制元件。
  • 如果顯示的 sap.m.FlexBox 具有非自適應內容(不會拉伸以填充可用空間),建議將 FlexBox 的 fitContainer 屬性設定為 false。
  • 如果您正在顯示 sap.ui.table.Table,請記住它是非自適應的,並且可能會導致 DynamicPage 在較小的螢幕尺寸(例如移動裝置)上出現不可預測的行為。應該使用 sap.m 名稱空間下的 Table 控制元件。
  • 在以下情況下不支援將 DynamicPageTitle 收起(snap): 當 DynamicPage 有滾動條時,控制元件通常會滾動到 snap point 的位置 。但是,當有滾動條但沒有足夠的內容到達 snap point 時,無法使用滾動進行收起操作。
  • 在DynamicPage的內容中使用 sap.ui.layout.form.Form、sap.m.Panel、sap.m.Table和sap.m.List控制元件時,如果要實現垂直方向的文字內容對齊,需要調整它們的左文字偏移量 sap.f.DynamicPageHeader 的內容和 DynamicPage 的內容之間的對齊。
  • 響應行為:DynamicPage 的響應行為取決於所顯示內容的行為。要調整 DynamicPage 內容填充,可以使用 sapUiContentPadding、sapUiNoContentPadding 和 sapUiResponsiveContentPadding CSS 類。

相關文章