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 | 數字 | 當左側面板總是可見時，應用程式的最小寬度（以像素為單位） | |
| collapsedBreakpoint | 數字 | 當左側面板變為部分可見（收合）時，應用程式的最小寬度（以像素為單位） | |
| swipe | 布林值 | false | 如果您想要啟用透過滑動開啟/關閉面板的功能，請啟用此選項 |
| swipeNoFollow | 布林值 | false | 在舊/慢的裝置上可能會有更好的效能的備用選項。如果您啟用此選項，則滑動面板在觸控移動期間不會跟隨您的手指，它會在向左/向右滑動時自動開啟/關閉。 |
| swipeActiveArea | 數字 | 0 | 從螢幕觸發面板滑動的不可見邊緣寬度（以像素為單位） |
| swipeOnlyClose | 布林值 | false | 此參數允許透過滑動關閉（但不能開啟）面板。（也應該啟用 swipe） |
| swipeThreshold | 數字 | 0 | 如果「觸控距離」小於此值（以像素為單位），面板不會隨著滑動而移動。 |
| backdrop | 布林值 | true | 啟用面板背景（後面的深色半透明圖層） |
| backdropEl | HTMLElement 字串 | 自訂背景元素的 HTML 元素或字串 CSS 選擇器 | |
| closeByBackdropClick | 布林值 | true | 啟用/停用透過點選面板外部來關閉面板的功能 |
| resizable | 布林值 | false | 啟用/停用可調整大小的面板 |
| containerEl | HTMLElement 字串 | 用於安裝面板的元素（預設為應用程式根元素） | |
| opened | 布林值 | 允許開啟/關閉面板並設定其初始狀態 |
面板事件
| 事件 | 說明 |
|---|---|
| panelOpen | 當面板開始其開啟動畫時，將觸發此事件 |
| panelOpened | 當面板完成其開啟動畫後，將觸發此事件 |
| panelClose | 當 Panel 開始其關閉動畫時，將觸發事件 |
| panelClosed | 當 Panel 完成其關閉動畫後，將觸發事件 |
| panelBackdropClick | 當點擊面板背景時，將觸發事件 |
| panelSwipe | 在觸控滑動動作期間，將為滑動面板觸發事件 |
| panelSwipeOpen | 將在開始使用滑動打開它時觸發事件 |
| panelCollapsedBreakpoint | 當應用程式寬度與其 collapsedBreakpoint 匹配時，它變為可見/隱藏時，將觸發事件 |
| panelBreakpoint | 當應用程式寬度與其 visibleBreakpoint 匹配時，它變為可見/隱藏時，將觸發事件 |
開啟和關閉面板
您可以控制面板狀態，開啟和關閉它
範例
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>
);