Panel React 组件
Panel React 组件表示 侧面板 组件。
面板组件
包含以下组件
Panel- 面板元素
面板属性
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| side | 字符串 | 面板侧面。可能是 left 或 right | |
| left | 布尔值 | side="left" 的快捷属性 | |
| right | 布尔值 | side="right" 的快捷属性 | |
| effect | 字符串 | 面板效果。可以是 cover、reveal、floating 或 push | |
| cover | 布尔值 | effect="cover" 的快捷属性 | |
| reveal | 布尔值 | effect="reveal" 的快捷属性 | |
| push | 布尔值 | effect="push" 的快捷属性 | |
| floating | 布尔值 | effect="floating" 的快捷属性 | |
| visibleBreakpoint | 数字 | 当左侧面板变得始终可见时的最小应用宽度（以 px 为单位） | |
| collapsedBreakpoint | 数字 | 当左侧面板变得部分可见（折叠）时的最小应用宽度（以 px 为单位） | |
| swipe | 布尔值 | false | 如果你想通过滑动打开/关闭面板，请启用此功能 |
| swipeNoFollow | 布尔值 | false | 在旧/慢设备上可以获得更好的性能的备用选项。如果你启用它，那么在滑动面板期间滑动面板不会跟随你的手指，它会在向左/向右滑动时自动打开/关闭。 |
| swipeActiveArea | 数字 | 0 | 从屏幕触发面板滑动的不可见边缘的宽度（以 px 为单位） |
| swipeOnlyClose | 布尔值 | false | 此参数允许通过滑动关闭面板（但不允许打开面板）。（还应启用swipe） |
| swipeThreshold | 数字 | 0 | 如果“触摸距离”小于此值（以 px 为单位），面板不会随着滑动而移动。 |
| backdrop | 布尔值 | true | 启用面板背景（背后深色半透明层） |
| backdropEl | HTMLElement 字符串 | HTML 元素或自定义背景元素的字符串 CSS 选择器 | |
| closeByBackdropClick | 布尔值 | true | 启用/禁用通过点击面板外部关闭面板的功能 |
| resizable | 布尔值 | false | 启用/禁用可调整大小的面板 |
| containerEl | HTMLElement 字符串 | 用于挂载面板的元素（默认为应用根元素） | |
| opened | 布尔值 | 允许打开/关闭面板并设置其初始状态 |
面板事件
| 事件 | 描述 |
|---|---|
| panelOpen | 当面板开始其打开动画时，将触发事件 |
| panelOpened | 当面板完成其打开动画时，将触发事件 |
| panelClose | 当面板开始其关闭动画时，将触发事件 |
| panelClosed | 当面板完成其关闭动画时，将触发事件 |
| panelBackdropClick | 点击面板背景时，将触发事件 |
| panelSwipe | 在触摸滑动操作期间，将为滑动面板触发事件 |
| panelSwipeOpen | 在用滑动打开它的最开始时，将会触发事件 |
| panelCollapsedBreakpoint | 当其 collapsedBreakpoint 与应用宽度匹配时，它变得可见/隐藏时触发事件 |
| panelBreakpoint | 当其 visibleBreakpoint 与应用宽度匹配时，它变得可见/隐藏时触发事件 |
打开和关闭面板
你可以控制面板状态，打开和关闭它
- 通过 面板 API:
- 通过向其
opened属性传递true或false - 通过点击具有相应
panelOpen属性（打开它）和panelClose属性（关闭它）的 链接 或 按钮 来打开或关闭面板
示例
panel.jsx
import React from 'react';
import { Navbar, Page, Block, Button, Link, Panel } from 'framework7-react';
export default () => (
<Page id="panel-page">
<Navbar title="Panel / Side panels"></Navbar>
<Panel left cover containerEl="#panel-page" id="panel-nested">
<Page>
<Block strongIos outlineIos>
<p>This is page-nested Panel.</p>
<p>
<Link panelClose>Close me</Link>
</p>
</Block>
</Page>
</Panel>
<Block strongIos outlineIos>
<p>
Framework7 comes with 2 panels (on left and on right), both are optional. You can put
absolutely anything inside: data lists, forms, custom content, and even other isolated app
view (like in right panel now) with its own dynamic navbar.
</p>
</Block>
<Block strongIos outlineIos>
<p className="grid grid-cols-2 grid-gap">
<Button raised fill panelOpen="left">
Open left panel
</Button>
<Button raised fill panelOpen="right">
Open right panel
</Button>
</p>
<p>
<Button raised fill panelOpen="#panel-nested">
Open nested panel
</Button>
</p>
</Block>
</Page>
);