Panel-DEMO

---

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

Panel Near Side

---

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

Panel Central Side

---

Global Append

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

Panel Top Side

---

<fv-Panel v-model="topSide" :isTopSide="true" :isLightDismiss="true" width="100%" height="500px">
</fv-Panel>

Panel Bottom Side

---

<fv-Panel v-model="bottomSide" :isBottomSide="true" :isLightDismiss="true" width="100%" height="500px">
</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>

Properties

---

Property	Type	Required	Default	Description
modelValue	any	No	!false	See the Panel modelValue option.
title	string	No	'Sample Panel'	Title.
titleSize	number	No	20	See the Panel titleSize option.
titleWeight	number	No	600	See the Panel titleWeight option.
titleColor	string	No	''	See the Panel titleColor option.
width	string	No	'340'	See the Panel width option.
height	string	No	'100%'	See the Panel height option.
background	string	No	''	See the Panel background option.
isNearSide	boolean	No	false	See the Panel isNearSide option.
isCentralSide	boolean	No	false	See the Panel isCentralSide option.
isLightDismiss	boolean	No	false	See the Panel isLightDismiss option.
showTitleBar	boolean	No	true	See the Panel showTitleBar option.
isFooter	boolean	No	false	See the Panel isFooter option.
isAcrylic	boolean	No	false	See the Panel isAcrylic option.
controlPadding	string	No	'15px'	See the Panel controlPadding option.
contentPadding	string	No	'0px'	See the Panel contentPadding option.
isBottomSide	boolean	No	false	See the Panel isBottomSide option.
isTopSide	boolean	No	false	See the Panel isTopSide option.
teleport	boolean	No	false	See the Panel teleport option.
theme	string	No	'global'	Theme style. Supports global, light, dark, system, and custom.
disabled	boolean	No	false	See the Panel disabled option.
lang	string	No	"global"	See the Panel lang option.

Slots

---

1. Container

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

2. Header

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

3. Footer

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