splitApp 中的 SAPUI5 NotificationBar

Question

我有一个 NotificaitonBar-Control 作为详细视图的内容元素，它是 splitApp 的一个元素。

在GoogleChrome上没有问题，但是在iPad上有显示问题。 notificationBar 位于主视图和详细视图之间。

masterview 覆盖了一部分notificationBar 而detail-view 没有。

如何调整通知栏的大小。我没有找到任何修改 notificationBar 的方法或属性。

如果我查看 API 我不明白为什么它与详细视图不匹配：

A NotificationBar is a "toolbar" that can be added to a page to show messages and notifications from the application. Its position, height and width is inherited from the element that the notification bar is added to.

SAPUI5 NotificationBar API

我该如何解决这个问题？

Answer 1

从命名空间 sap.ui.ux3 我假设 NotificationBar 没有真正响应，因此不能在像 iPad.

这样的较小设备上工作

我找到了 NotificationBar 的演示页面，其中包含一些有趣的信息：

If the NotificationBar should be smaller than per default a separate CSS-class must be added to the NotificationBar

这意味着您必须通过旧 CSS 来调整大小。他们给出的示例类似于以下代码段。

style.css（或者您的自定义 CSS 文件已命名）

.slimNotificationBar {
     left : 60px;
     right: 100px;
}

要使其在 iPad 和桌面上都能正常工作，您应该通过添加媒体查询使其响应（参见此处：https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries）

Your.controller.js（或者无论如何命名）

// after instantiating your NotificationBar
oNotificationBar.addStyleClass("slimNotificationBar");

Link 到演示页面：https://sapui5.hana.ondemand.com/sdk/test-resources/sap/ui/ux3/demokit/NotificationBar.html

但是，如果您更喜欢内置的响应式解决方案，您可能想尝试以下方法。

将 sap.m.Toolbar 添加到您的详细信息页面，其中有一个按钮可以打开 sap.m.MessagePopover。

参见以下示例：https://sapui5.netweaver.ondemand.com/sdk/explored.html#/sample/sap.m.sample.MessagePopover/preview

splitApp 中的 SAPUI5 NotificationBar

SAPUI5 NotificationBar in splitApp

notifications

resize

width

master-detail

sapui5