你好，

我带着一篇方便的SAPUI5控件/扩展博客回来了。希望这有帮助

这是一个更大的，所以我可能会把它分为两部分-所以请继续关注下面的部分，一定要跟着我，以获得更新时，他们准备好了。

我正在设计一个移动应用程序时，我遇到了一个东西，我是在SAPUI5吨现成的控件中丢失：一个面板，我可以滑入和退出的看法。如前所述，这可能比桌面更适用于移动设备，但当然，这也可以用于任何一个-我们忠于Fiori，使这个新的/扩展的控制响应！

我的用例如下：在移动应用程序上，我想要一个默认不可见但可以通过按钮滑入视图的菜单。完成菜单后，使用相同的按钮，我可以再次将其滑出视图（当然除了按钮）。

重要说明：

我希望我的控件呈现完整的菜单，包括滑动所需的按钮我想让我的控制装置来控制滑动我想让我的控件调整到响应宽度

我的解决方案设计

为了实现这样的滑动面板，我创建了以下解决方案设计：

如前所述，UI5中没有实现上述所有功能的控件，但我们仍然可以使用标准控件并对其进行扩展，我决定使用sap.m.Panel

Panel是一个非常简单的控件，实际上它是一个包装器，可以有一个标题（和信息）工具栏。因此，非常适合我的用例。

1.1。开始扩展sap.m.Panel

我们需要一个用于自定义控件的JS文件，例如：PROJECT/webapp/controls/幻灯片面板.js

从绝对最小值开始，然后我们逐个填充代码：

1.2。初始化控件

在lifecycle method init中，我们添加并设置重要的额外属性，啥是大数据，我们稍后将需要：

在JS文件的lifecycle方法之后添加以下方法（我们稍后填充）：

在自定义CSS文件中，人工智能龙头企业，大数据要学什么，服务器，添加以下样式类：PROJECT/webapp/CSS/样式表

1.3. 准备要呈现的控件

首先，让我们添加SlidePanel所需的我们自己的额外属性：

这些属性使您可以自由地按照自己的意愿设置面板和按钮的样式，因此我们不会对所有内容都进行硬编码。关于ContractStyle属性的一点提示：我创建了我的面板，淘客公众号，我只是不喜欢"亮上亮"，所以对我来说，实际上对比度看起来更好（特别是在手机上）。这就是为什么在上面，我将默认值设置为true。

接下来，在我们在呈现之前呈现control–lifecycle方法之前，我们还需要做一些事情：

我知道这是相当多的代码，但是不要灰心，它相当简单。让我们看一下：

在第二部分继续…

我们做了很多：然而，还没有一个可用的，完成的控件，但我觉得这篇博客文章是越来越大，所以我在这里分裂。请检查第2部分以完成滑动面板控制。