Panel-DEMO

---

<fv-Panel v-model="basic">
</fv-Panel>

Panel Near Side

---

<fv-Panel v-model="nearSide" :isNearSide="true">
</fv-Panel>

Panel Central Side

---

<fv-Panel v-model="centralSide" :isCentralSide="true" width="calc(90% - 50px)" height="calc(90% - 50px)">
</fv-Panel>

Panel Light Dismiss

---

<fv-Panel v-model="lightDismiss" :isLightDismiss="true">
</fv-Panel>

Panel Acrylic

---

<fv-Panel v-model="acrylic" :isLightDismiss="true" :isAcrylic="true">
</fv-Panel>

Panel Footer

---

<fv-Panel v-model="footer" :isFooter="true" :isAcrylic="true">
    <template v-slot:footer>
        <fv-button theme="dark" background="rgba(0, 90, 158, 1)">OK</fv-button>
        <fv-button>Cancel</fv-button>
    </template>
</fv-Panel>

Panel Dark Theme

---

Standard

<fv-Panel v-model="dark" :isLightDismiss="true" theme="dark">
</fv-Panel>

Acrylic

<fv-Panel v-model="acrylicDark" :isLightDismiss="true" :isAcrylic="true" theme="dark">
</fv-Panel>

Propoties

---

属性(attr)	类型(type)	必填(required)	默认值(default)	说明(statement)
value	Boolean	No	false	显示/隐藏Panel
title	String	No	Sample Panel	标题
titleSize	[number,string]	No	20	标题字体大小
titleWeight	[number,string]	No	600	标题字体粗细
titleColor	[string(color)]	No	N/A	标题字体颜色
width	[number,string]	No	340	宽度
height	[number,string]	No	100%	宽度
background	[string(color)]	No	N/A	Panel背景色
isNearSide	Boolean	No	false	是否从左侧显示
isCentralSide	Boolean	No	false	是否从中央显示
isLightDismiss	Boolean	No	false	是否单击空白处关闭
showTitleBar	Boolean	No	false	是否显示标题栏
isFooter	Boolean	No	false	是否显示底部控制
isAcrylic	Boolean	No	false	是否开启Acrylic效果
theme	String	No	system	主题样式, 包含light, dark, system, custom几种样式

Slot

---

1. Container

自定义容器内容

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

2. Header

自定义标题栏内容

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

3. Footer

自定义Footer内容

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