Vue3 OverlayPanel is a container component positioned as connected to its target.
It supports Vue 3 with <a target="_blank" href="https://primefaces.org/primevue/showcase">PrimeVue 3</a> and Vue 2 with <a target="_blank" href="https://primefaces.org/primevue/showcase-v2">PrimeVue 2</a>.
<h3 id="setup">Setup</h3>
Refer to PrimeVue <a target="_blank" href="https://primefaces.org/primevue/showcase/#/setup">setup documentation</a> for download and installation steps for your environment such as Vue CLI, Vite or browser.
<h3 id="import">Import</h3>
<pre><code class="lang-js">import OverlayPanel from 'primevue/overlaypanel';
</code></pre>
<h3 id="getting-started">Getting Started</h3>
OverlayPanel is accessed via its reference where visibility is controlled using toggle, show and hide methods.
<pre><code class="lang-html">&lt;Button type="button" label="Toggle" @click="toggle" /&gt;

&lt;OverlayPanel ref="op"&gt;
 &lt;img src="demo/images/nature/nature1.jpg" alt="Nature Image"&gt;
&lt;/OverlayPanel&gt;
</code></pre>
<pre><code class="lang-js">toggle(event) {
 this.$refs.op.toggle(event);
}
</code></pre>
<h3 id="dismissable-and-closeicon">Dismissable and CloseIcon</h3>
Clicking outside the overlay hides the panel, setting dismissable to false disables this behavior. Additionally enabling showCloseIcon property displays a close icon at the top right corner to close the panel.
<pre><code class="lang-html">&lt;OverlayPanel ref="op" :showCloseIcon="true" :dismissable="true"&gt;
 &lt;img src="demo/images/nature/nature1.jpg" alt="Nature Image"&gt;
&lt;/OverlayPanel&gt;
</code></pre>
<h3 id="theming">Theming</h3>
OverlayPanel supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the <a target="_blank" href="https://primefaces.org/primevue/showcase/#/theming">Designer</a> tool.
<h3 id="resources">Resources</h3>
Visit the PrimeVue <a target="_blank" href="https://primefaces.org/primevue/showcase/#/overlaypanel">OverlayPanel</a> showcase for demos and documentation.

Vue3 OverlayPanel is a container component positioned as connected to its target.
It supports Vue 3 with [PrimeVue 3](https://primefaces.org/primevue/showcase) and Vue 2 with [PrimeVue 2](https://primefaces.org/primevue/showcase-v2).

### Setup

Refer to PrimeVue [setup documentation](https://primefaces.org/primevue/showcase/#/setup) for download and installation steps for your environment such as Vue CLI, Vite or browser.

### Import

```js
import OverlayPanel from 'primevue/overlaypanel';
```

### Getting Started

OverlayPanel is accessed via its reference where visibility is controlled using toggle, show and hide methods.

```html
<Button type="button" label="Toggle" @click="toggle" />

<OverlayPanel ref="op">
	<img src="demo/images/nature/nature1.jpg" alt="Nature Image">
</OverlayPanel>
```

```js
toggle(event) {
 this.$refs.op.toggle(event);
}
```

### Dismissable and CloseIcon

Clicking outside the overlay hides the panel, setting **dismissable** to false disables this behavior. Additionally enabling **showCloseIcon** property displays a close icon at the top right corner to close the panel.

```html
<OverlayPanel ref="op" :showCloseIcon="true" :dismissable="true">
	<img src="demo/images/nature/nature1.jpg" alt="Nature Image">
</OverlayPanel>
```

### Theming

OverlayPanel supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the [Designer](https://primefaces.org/primevue/showcase/#/theming) tool.

### Resources

Visit the PrimeVue [OverlayPanel](https://primefaces.org/primevue/showcase/#/overlaypanel) showcase for demos and documentation.