ACV Popper

Short description for Popper component...

Floating UI

https://www.floating-ui.com/docs

Basic usage

Source code

<script setup>
  import AcvButton from '@/components/button/button.vue';
  import Popper from '@/components/popper/popper.vue';
  import { ref } from 'vue';

  const popperVisible = ref(false);
</script>

<template>
  <AcvButton @click="popperVisible = !popperVisible">
    Toggle
  </AcvButton>
  <Popper
    v-model="popperVisible"
    class="popper"
    :offset="6"
    arrow
  >
    <AcvButton>Popper</AcvButton>
    <template #content>
      Lorem ipsum dolor sit amet, consectet adipisicing elit.
    </template>
  </Popper>
</template>

<style scoped>
.acv-popper {
  background-color: hsl(28deg 100% 97%);
  border: 1px solid hsl(0deg 0% 0%);
  padding: 8px;
}
</style>

Props

Prop name	Description	Type	Values	Default
referenceEl	Reference element for the Popper By default, it is the parent element or default slot element	HTMLElement | null | undefined	-
modelValue	Show/Hide Popper base on v-model value	boolean	-	undefined
persist	Persistence of Popper when clicked outside of reference element	boolean | "content"	-	false
trigger	Trigger event to open the Popper	"click" | "hover"	'click', 'hover'	'click'
delay	Delay before showing Popper in milliseconds	number	-	0
hideDelay	Delay before hiding Popper	number	-	0
transition	Transition to add while showing/hiding Popper	AcvPopperTransitions	-	'fade'
teleport	Whether the Popper is teleported	boolean	-	false
disabled	Whether the Popper is disabled	boolean	-	false
width	Width of the Popper	string | number	-
placement	Placement of the Popper Floating UI	PopperPlacement	-	'bottom-start'
strategy	Strategy of the appearance of the Popper	"absolute" | "fixed"	-
middleware	Whether to use transform for positioning Floating UI	Middleware	-
offset	Offset of the Popper Floating UI	number	-	0
arrow	Whether to show the arrow	boolean	-	false
flip	Changes the placement of the floating element to keep it in view. Floating UI	boolean	-	false
popperClass		string	-

Events

Event name	Properties	Description
update:modelValue	eventName string - The name of the event value boolean - The visibility state of the component	Triggered when the component is toggled
hide	eventName string - undefined	Triggered when the component is hidden
show	eventName mixed - undefined	Triggered when the component is shown

Slots

Name	Description	Bindings
default	The default slot content, reference, anchor element
content	The content slot
arrow	Arrow slot content