- Framework7教程
- Framework7 - 主页
- Framework7 - 概述
- Framework7 - 环境
- Framework7 组件
- Framework7 - 布局
- Framework7 - 导航栏
- Framework7 - 工具栏
- Framework7 - 搜索栏
- Framework7 - 状态栏
- Framework7 - 侧面板
- Framework7 - 内容块
- Framework7 - 布局网格
- Framework7 - 覆盖层
- Framework7 - 预加载器
- Framework7 - 进度条
- Framework7 - 列表视图
- Framework7 - 手风琴
- Framework7 - 卡片
- Framework7 - 芯片
- Framework7 - 按钮
- Framework7 - 操作按钮
- Framework7 - 表格
- Framework7 - 选项卡
- Framework7 - Swiper 滑块
- Framework7 - 照片浏览器
- Framework7 - 自动完成
- Framework7 - 选择器
- Framework7 - 日历
- Framework7 - 刷新
- Framework7 - 无限滚动
- Framework7 - 消息
- Framework7 - 消息栏
- Framework7 - 通知
- Framework7 - 延迟加载
- Framework7 样式
- Framework7 - 颜色主题
- Framework7 - 细线
- Framework7 模板
- Framework7 - 模板概述
- Framework7 - 自动编译
- Framework7 - Template7 页面
- Framework7 快速点击
- Framework7 - 活动状态
- Framework7 - 点击保持事件
- Framework7 - 触摸波纹
- Framework7 有用的资源
- Framework7 - 快速指南
- Framework7 - 有用的资源
- Framework7 - 讨论
Framework7 - 侧面板
描述
侧面板移动到屏幕的左侧或右侧以显示内容。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 支持的面板类型 -