侧面板(Side Panels)
优质
小牛编辑
123浏览
2023-12-01
描述 (Description)
side panel移动到屏幕的左侧或右侧以显示内容。 Framework7允许您在应用程序中包含最多2个面板(右侧面板和左侧面板)。 您需要在《body》的开头添加面板,然后通过应用以下列出的类来选择打开效果 -
panel-reveal - 这将使整个应用程序的内容移出。
panel-cover - 这将使面板覆盖应用程序的内容。
例如,以下代码显示了如何使用上述类 -
<body>
<!-- First add Panel's overlay which will overlays app while panel is opened -->
<div class = "panel-overlay"></div>
<!-- Left panel -->
<div class = "panel panel-left panel-cover">
panel's content
</div>
<!-- Right panel -->
<div class = "panel panel-right panel-reveal">
panel's content
</div>
</body>
下表显示了Framework77支持的面板类型 -
S.No | 类型和描述 |
---|---|
1 | 打开和关闭面板 添加面板和效果后,我们需要添加open和close面板的功能。 |
2 | 小组活动 要检测用户与面板的交互方式,您可以使用面板事件。 |
3 | 用滑动打开面板 Framework7为您提供了使用swipe gesture打开面板的功能。 |
4 | 面板是否已打开? 我们可以使用with-panel[position]-[effect]规则来确定面板是否打开。 |