面板 Svelte 組件
面板 Svelte 組件代表 側面板 組件。
面板組件
包含下列組件
Panel- 面板元素
面板屬性
| 屬性 | 類型 | 預設值 | 說明 |
|---|---|---|---|
| side | 字串 | 面板側邊。可能是 left 或 right | |
| 左 | 布林值 | side="left" 的捷徑屬性 | |
| 右 | 布林值 | side="right" 的捷徑屬性 | |
| 效果 | 字串 | 面板效果。可以是 cover、reveal 或 push | |
| 覆蓋 | 布林值 | effect="cover" 的捷徑屬性 | |
| 揭露 | 布林值 | effect="reveal" 的捷徑屬性 | |
| 推動 | 布林值 | effect="push" 的捷徑屬性 | |
| 浮動 | 布林值 | effect="floating" 的捷徑屬性 | |
| 可見斷點 | 數字 | 當左側面板始終可見時的最小應用程式寬度（以像素為單位） | |
| 摺疊斷點 | 數字 | 當左側面板變為部分可見（摺疊）時的最小應用程式寬度（以像素為單位） | |
| 滑動 | 布林值 | 否 | 如果您想啟用使用滑動開啟/關閉面板的功能，請啟用 |
| 滑動不追隨 | 布林值 | 否 | 在舊/慢設備上可能會有更好的效能的備用選項。如果您啟用它，則滑動面板在觸控移動期間不會追隨您的手指，它會在向左/向右滑動時自動開啟/關閉。 |
| 滑動有效區域 | 數字 | 0 | 觸發面板滑動的螢幕不可見邊緣寬度（以像素為單位） |
| 僅滑動關閉 | 布林值 | 否 | 此參數允許使用滑動關閉（但不能開啟）面板。（swipe 也應該啟用） |
| 滑動閾值 | 數字 | 0 | 如果「觸摸距離」小於此值（以像素為單位），面板將不會隨著滑動而移動。 |
| 背景 | 布林值 | 真 | 啟用面板背景（背後深色半透明層） |
| 背景元素 | HTMLElement 字串 | 自訂背景元素的 HTML 元素或字串 CSS 選擇器 | |
| 按背景點擊關閉 | 布林值 | 真 | 啟用/停用通過點擊面板外部關閉面板的功能 |
| 可調整大小 | 布林值 | 否 | 啟用/停用可調整大小的面板 |
| 容器元素 | HTMLElement 字串 | 要將面板安裝到的元素（預設為應用程式根元素） | |
| 已開啟 | 布林值 | 允許開啟/關閉面板並設定其初始狀態 |
面板事件
| 事件 | 說明 |
|---|---|
| 面板開啟 | 當面板開始其開啟動畫時，將觸發事件 |
| 面板已開啟 | 當面板完成其開啟動畫後，將觸發事件 |
| 面板關閉 | 當面板開始其關閉動畫時，將觸發事件 |
| 面板已關閉 | 當面板完成其關閉動畫後，將觸發事件 |
| 面板背景點擊 | 當點擊面板背景時，將觸發事件 |
| 面板滑動 | 在觸控滑動動作期間，將為滑動面板觸發事件 |
| panelSwipeOpen | 事件將在以滑動開啟它的最開始觸發 |
| panelCollapsedBreakpoint | 當它在應用程式寬度符合其 collapsedBreakpoint 時變為可見/隱藏時，事件將觸發 |
| panelBreakpoint | 當它在應用程式寬度符合其 visibleBreakpoint 時變為可見/隱藏時，事件將觸發 |
開啟和關閉面板
您可以控制面板狀態，開啟和關閉它
存取面板實例
您可以透過呼叫 .instance() 元件方法存取已初始化的面板實例。例如
<Panel bind:this={component}>...</Panel>
<script>
let component;
// to get instance in some method
component.instance()
</script>
範例
panel.svelte
<script>
import { Navbar, Page, Block, Button, Panel, Link } from 'framework7-svelte';
</script>
<Page id="panel-page">
<Navbar title="Panel / Side panels" />
<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 class="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>