NavigationView-DEMO

---

<div style="position: relative; width: 100%; height: 800px; display: flex;">
    <fv-NavigationView :options="options"></fv-NavigationView>
    <fv-img src="https://placehold.co/1280x720/png?text=VFluent+Navigation+View" style="width: 350px; height: 100%; flex: 1;"></fv-img>
</div>

NavigationView-Flyout

---

<div style="position: relative; width: 100%; height: 800px; display: flex;">
    <fv-NavigationView :options="options" expandMode="flyout"></fv-NavigationView>
    <fv-img src="https://placehold.co/1280x720/png?text=VFluent+Navigation+View" style="width: 350px; height: 100%; flex: 1;"></fv-img>
</div>

NavigationView-Mobile Display

---

<div style="position: relative; width: 100%; height: 800px; display: flex;">
    <fv-NavigationView :options="options" mobileDisplay="100000000" flyoutDisplay="500"></fv-NavigationView>
    <fv-img src="https://placehold.co/1280x720/png?text=VFluent+Navigation+Panel" style="width: 350px; height: 100%; flex: 1;"></fv-img>
</div>

NavigationView-Flyout

---

1. Standard

<div style="position: relative; width: 100%; height: 800px; background: black; display: flex;">
    <fv-NavigationView :options="options" theme="dark"></fv-NavigationView>
    <fv-img src="https://placehold.co/1280x720/png?text=VFluent+Navigation+Panel" style="width: 350px; height: 100%; flex: 1;"></fv-img>
</div>

2. Flyout

<div style="position: relative; width: 100%; height: 800px; background: black; display: flex;">
    <fv-NavigationView :options="options" expandMode="flyout" theme="dark"></fv-NavigationView>
    <fv-img src="https://placehold.co/1280x720/png?text=VFluent+Navigation+Panel" style="width: 350px; height: 100%; flex: 1;"></fv-img>
</div>

3. Mobile

<div style="position: relative; width: 100%; height: 800px; background: black; display: flex;">
    <fv-NavigationView :options="options" mobileDisplay="100000000" flyoutDisplay="500" theme="dark"></fv-NavigationView>
    <fv-img src="https://placehold.co/1280x720/png?text=VFluent+Navigation+Panel" style="width: 350px; height: 100%; flex: 1;"></fv-img>
</div>

属性

---

属性	类型	必填	默认值	说明
modelValue	object	否	{}	当前选中项，用v-model绑定。
options	array	否	[]	选项数据，参照ListView中的items数据格式。
title	string	否	'NavigationView'	NavigationView 标题。
expand	boolean	否	true	初始是否展开，可通过 sync 方法来同步状态。
expandMode	string	否	'relative'	展开模式，有占位和浮动两种。
expandWidth	number	否	350	展开宽度，以px为单位。
expandDisplay	number	否	1024	浏览器宽度大于多少时展开。
compactWidth	number	否	46	折叠宽度，以px为单位。
flyoutDisplay	number	否	0	浏览器宽度小于多少时开启浮动模式，若expandMode设为flyout，则始终为浮动模式。
fullSizeDisplay	number	否	800	浏览器宽度小于多少时全屏显示。
mobileDisplay	number	否	0	浏览器宽度小于多少时开启移动端模式。
showBack	boolean	否	true	是否显示后退按钮。
showSearch	boolean	否	true	是否显示搜索框。
settingTitle	string	否	'Settings'	设置选项的标题。
showSetting	boolean	否	true	是否显示设置选项。
searchPlaceholder	string	否	'Search'	搜索框的占位符。
foreground	string	否	''	NavigationView 前景色。
background	string	否	''	NavigationView 背景色。
theme	string	否	'global'	主题样式。支持 global、light、dark、system 和 custom。
emits	array	否	[ 'update:modelValue', 'expand-change', 'setting-click', 'item-click', 'back', 'expand-click', 'update:expand' ]	参见组件的 emits 选项。
showNav	boolean	否	true	参见组件的 showNav 选项。
disabled	boolean	否	false	参见组件的 disabled 选项。
lang	string	否	"global"	参见组件的 lang 选项。

事件

---

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

插槽

---

1. ListItem

默认以value中每一项的属性name作为默认显示, 参考ListView, 包含以下可选属性

• item: 当前项
• index: 当前项索引

<template v-slot:listItem="x">
    <i v-show="x.valueTrigger(x.item.icon) !== undefined" class="ms-Icon icon" :class="[`ms-Icon--${x.valueTrigger(x.item.icon)}`]"></i>
    <p class="name" :style="{ color: x.valueTrigger(x.item.type) == 'header' ? foreground : ''}">{{x.valueTrigger(x.item.name)}}</p>
</template>

注意在收缩时要隐藏<p>标签的话一定要将其类型加上name.

2. NavIcon

默认的导航按钮为GlobalNavButton图标

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

3. BackIcon

默认的后退按钮为Back图标

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

4. Title

默认的标题为title属性值

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

5. Banner

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

<template v-slot:banner>
    <div class="banner">
        <img src="https://placehold.co/200x300/png?text=Logo" alt="logo" />
    </div>
</template>

6. Setting

自定义设置项区域内容。

<template v-slot:setting>
    <fv-animated-icon 
        v-show="showSetting"
        ref="setting"
        modelValue="bounceRotate"
        class="fv-nav-default-item"
        :hideContent="!thisExpand"
        style="width: calc(100% - 10px)"
        @click="settingClick({ event: $event })"
    >
        <i class="ms-Icon ms-Icon--Settings icon"></i>
        <template v-slot:content>
            <p class="name">{{ settingTitle }}</p>
        </template>
    </fv-animated-icon>
</template>

7. Mask

自定义组件遮罩层内容，可用于全局加载等场景。

<fv-NavigationView :options="options">
    <template v-slot:mask>
        <div
            style="
                position: absolute;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(0, 0, 0, 0.35);
                color: white;
                z-index: 10;
            "
        >
            加载中...
        </div>
    </template>
</fv-NavigationView>

Data

---

1. options

• 数据格式参考ListView中items的形式, 其中key字段建议开发者在有重复名称和类型字段时声明用来区别项目
• 开发者可利用icon字段来应用Fabric Icon

options = [{ key: "", name: "", type: "", icon: "", disabled: "" }];

//e.g.//

options: [
    { key: 0, name: "Fruits", type: "header"},
    { key: 1, name: "Apple", icon: "WindowsLogo"},
    { key: 2, name: "Banana", icon: "DelveAnalyticsLogo"},
    { key: 3, name: "Orange", icon: "Guitar"},
    { key: 4, name: "Grape", icon: "HailDay"},
    { key: 5, name: "", type: "divider" },
    { key: 6, name: "Vegetables", type: "header"},
    { key: 7, name: "Broccoli", icon: "QuadColumn"},
    { key: 8, name: "Carrot", icon: "Quantity"},
    { key: 9, name: "Lettuce", icon: "TestBeaker"}
];

Appendix

---

1. NavigationView中的setting项由于不包含在options中, 故无法在options中找到setting项. 但是当选中setting项时, value值会改变为{ name: ">setting", type: "setting" }, 你也可以通过在外部赋值的方式将当前选项更改为setting项.

特别地 0.1.54版本后支持采用函数式字段, 其中支持的字段包括name, disabled, choosen, type, icon, show