Popover

CPopover is a container component that can overlay other components on page.

Basic

Popover is accessed via its ref and visibility is controlled using toggle, show and hide functions with an event of the target.

<template>
  <div class="card flex justify-center">
    <CButton type="button" icon="pi pi-share-alt" label="Share" @click="toggle" />

    <CPopover ref="op">
      <div>
        <span class="font-medium block mb-2">Team Members</span>
        <ul class="list-none p-0 m-0 flex flex-col gap-4">
          <li v-for="member in members" :key="member.name" class="flex items-center gap-2">
            <img :src="`https://primefaces.org/cdn/primevue/images/avatar/${member.image}`" style="width: 32px" />
            <div>
              <span class="font-medium">{{ member.name }}</span>
              <div class="text-sm text-surface-500 dark:text-surface-400">{{ member.email }}</div>
            </div>
            <div class="flex items-center gap-2 text-surface-500 dark:text-surface-400 ml-auto text-sm">
              <span>{{ member.role }}</span>
              <i class="pi pi-angle-down"></i>
            </div>
          </li>
        </ul>
      </div>
    </CPopover>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';

  const op = ref();
  const members = ref([
    { name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' },
    { name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' },
    { name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
  ]);

  const toggle = (event) => {
    op.value.toggle(event);
  };
</script>