notifications - splitApp 中的 SAPUI5 通知栏

Question

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

在 Google Chrome 中没有问题，但在 iPad 上出现显示问题。 notificationBar 位于主视图和详细 View 之间。

主视图覆盖了通知栏的一部分，而详细 View 则没有。

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

如果我查看 API，我不明白为什么它与详细 View 不匹配:

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等较小的设备上工作。

我发现了一个通知栏的演示页面，其中包含一些有趣的信息:

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");

演示页面链接: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