NavigationPanel-DEMO

---

<div style="position: relative; width: 100%; height: 800px; display: flex;">
    <fv-NavigationPanel></fv-NavigationPanel>
</div>

NavigationPanel-Flyout

---

<div style="position: relative; width: 100%; height: 800px; display: flex;">
    <fv-NavigationPanel expandMode="flyout"></fv-NavigationPanel>
</div>

NavigationPanel-Mobile Display

---

<div style="position: relative; width: 100%; height: 800px; display: flex;">
    <fv-NavigationPanel mobileDisplay="100000000" flyoutDisplay="500"></fv-NavigationPanel>
</div>

NavigationPanel-Dark Theme

---

1. Standard

<fv-NavigationPanel theme="dark"></fv-NavigationPanel>

2. Flyout

<fv-NavigationPanel expandMode="flyout" theme="dark"></fv-NavigationPanel>

3. Mobile

<fv-NavigationPanel mobileDisplay="100000000" flyoutDisplay="500" theme="dark"></fv-NavigationPanel>

属性

---

属性	类型	必填	默认值	说明
title	string	否	'NavigationPanel'	NavigationPanel 标题。
expand	boolean	否	true	初始是否展开，可通过 sync 方法来同步状态。
expandMode	string	否	'relative'	展开模式，有占位和浮动两种。
expandWidth	number	否	350	展开宽度，以px为单位。
expandDisplay	number	否	1024	浏览器宽度大于多少时展开。
compactWidth	number	否	50	折叠宽度，以px为单位。
flyoutDisplay	number	否	0	浏览器宽度小于多少时开启浮动模式，若expandMode设为flyout，则始终为浮动模式。
fullSizeDisplay	number	否	800	浏览器宽度小于多少时全屏显示。
mobileDisplay	number	否	0	浏览器宽度小于多少时开启移动端模式。
showBack	boolean	否	true	是否显示后退按钮。
showSearch	boolean	否	true	是否显示搜索框。
settingTitle	string	否	'Settings'	设置选项的标题。
showSetting	boolean	否	true	是否显示设置选项。
background	string	否	''	NavigationPanel 背景色。
theme	string	否	'global'	主题样式。支持 global、light、dark、system 和 custom。
showNav	boolean	否	true	参见组件的 showNav 选项。
disabled	boolean	否	false	参见组件的 disabled 选项。
lang	string	否	"global"	参见组件的 lang 选项。

事件

---

事件名	参数	说明
setting-click	Object	设置选项被点击后触发事件，返回{ event: MouseEvent }
update:expand	boolean	当折叠或展开时同步外界传入的expand
expand-change	boolean	当折叠或展开时触发事件并提供当前状态。
expand-click
back	MouseEvent	返回选项被点击后触发事件。

插槽

---

1. SearchBlock

自定义搜索框区域内容, 默认的搜索框无实际作用

<template v-slot:searchBlock></template>

2. NavIcon

自定义NavigationPanel导航按钮区域内容, 默认的导航按钮为GlobalNavButton图标

<template v-slot:navIcon>
    <i class="ms-Icon ms-Icon--GlobalNavButton icon"></i>
</template>

2. BackIcon

自定义NavigationPanel后退按钮区域内容, 默认的后退按钮为Back图标

<template v-slot:backIcon>
    <i class="ms-Icon ms-Icon--Back icon"></i>
</template>

3. Title

自定义NavigationPanel标题区域内容, 默认的标题为title属性值

<template v-slot:title="{ show }">
    <p v-show="show" class="name title">{{ title }}</p>
</template>

4. Panel

自定义NavigationPanel中的内容

<template v-slot:panel></template>

5. Banner

自定义NavigationPanel顶部banner区域内容, 可用于自定义logo等

<template v-slot:banner></template>

Appendix

---

1. 获取NavigationPanel中setting的dom方法:

<fv-NavigationPanel v-model="items" ref="nav"></fv-NavigationPanel>
let setting = this.$refs.nav.setting;