Callout

<fv-callout v-model="show" effect="hover" position="bottomLeft">
  <fv-button icon="ActionCenter" borderRadius="3" style="width: 120px; height: 45px;">Callout</fv-button>
  <template v-slot:main>
    <fv-color-picker v-model="color" style="width:500px"></fv-color-picker>
  </template>
</fv-callout>

Callout Custom

beak:

10 px

space:

0 px

position:

topLeft

<fv-callout :lockScroll="true" :position="position.key" :beak="beak" :space="space" :popperStyle="{ backgroundColor: color }" theme="dark">
  <fv-button :background="color" theme="dark" icon="ActionCenter" borderRadius="3" style="width: 120px; height: 45px;">Callout</fv-button>
  <template v-slot:header>
    Fluent UI
  </template>
  <template v-slot:main>
    Hello Vue! Nice to meet you!
  </template>
  <template v-slot:footer>
    @Copyright Creator SN
  </template>
</fv-callout>

Properties

---

Property	Type	Required	Default	Description
v-model	Boolean	No	false	Whether the component is visible.
theme	string	No	'global'	Theme color.
disabled	boolean	No	false	Whether the component is disabled.
space	number	No	0	Spacing in pixels.
beak	number	No	0	Beak size in pixels.
position	string	No	'bottomCenter'	Position.
lockScroll	boolean	No	true	Whether page scrolling is locked.
focusTrap	boolean	No	false	Whether focus trapping is enabled.
delayClose	number	No	0	See the Callout delayClose option.
effect	string	No	'click'	Display trigger mode.
popperStyle	object	No	{}	Floating panel style.
popperClass	array	No	[]	Floating panel CSS classes.
keepalive	boolean	No	false	See the Callout keepalive option.
lang	string	No	"global"	See the Callout lang option.

Appendix

---

1. position