启用面板向左滚动时，如何在左侧部分显示页面

How can I display my page to be visible partially on left when the panel scroll left is enabled?

本文关键字：侧部 显示 滚动 启用      更新时间：2023-09-26

在这个链接中，我可以发现有一个overlay选项，我可以在其中隐藏或显示右侧或左侧的面板。但我想在面板中显示90%或以上的面板。和在facebook手机上的例子一样，我们可以选择在右侧同时看到朋友列表的一小部分新闻。

我在上面提供的链接中尝试了一些代码，其中的代码为

<div data-role="page">
<div data-role="panel" id="mypanel">
<!-- panel content goes here -->
</div><!-- /panel -->
 <!-- header -->
  <!-- content -->
  <!-- footer -->
  </div><!-- page -->

还需要实现什么才能使其达到面板可见时的状态？只有90%的页面必须隐藏在页面的一侧。

感谢

为了实现页面的90%面板，您需要覆盖许多类。

  1. 面板总宽度：

    .ui-panel {
  width: 90%;
}

  2. 面板位置（左）：

    等于面板的宽度。

    .ui-panel-position-left {
  left: -90% !important;
}

  3. 打开面板（3D转换）：

    .ui-panel-open {
  -webkit-transform: translate3d(97%, 0, 0) !important;
  transform: translate3d(97%, 0, 0) !important;
}

  4. 动画：

    增加或降低速度（ms）。

    .ui-panel-animate {
  -webkit-transition: -webkit-transform 500ms ease;
  -moz-transition: -moz-transform 500ms ease;
  transition: transform 500ms ease;
}

  5. 面板的覆盖层/包装层：

    这包括data-dismissible设置为真或假的面板的可点击区域

    .ui-panel-content-wrap-position-left.ui-panel-content-wrap-open, .ui-panel-dismiss-position-left.ui-panel-dismiss-open {
  left: 90% !important;
  right: -90% !important;
}

演示

相关文章：