Popper
The r-popper is a versatile component that displays any content using any trigger. Easily customize and manage pop-up content to enhance your user interactions.
Usage
import { RPopper } from '@rebilly/revel';
<r-popper :auto-hide="true">
<template v-slot:trigger="scope">
<r-button @click="scope.popper.toggle">
Click me
</r-button>
</template>
<template v-slot:content>
<div class="r-popover">
<div class="r-popover-control">
<div class="r-popover-content r-popover-menu">
<a class="r-popover-menu-item">
List item #1
</a>
<a class="r-popover-menu-item">
List item #2
</a>
</div>
</div>
</div>
</template>
</r-popper>
Examples
| Name | Type | Default | Description |
|---|---|---|---|
| state | Nullable, boolean | null | Opens popper with the parent component |
| escToHide | boolean | true | Close popper on escape key press |
| autoHide | boolean | true | Close popper automatically |
| globalAutoHide | boolean | true | Close all poppers automatically |
| closeFunction | Nullable, TSFunctionType | null | Function to run when closing the popper |
| openOnMount | boolean | false | Open popper on mount |
| disabled | boolean | false | Disable popper |
| fluid | boolean | false | Fluid popper layout |
| offset | number | 4 | Offset from the trigger element |
| margin | MarginsOffset | () => [0, 0, 0, 0] | Margin from the trigger element (ignored on mobile) |
| direction | Directions | 'horizontal' | Popper direction |
| position | Positions | 'bottomStart' | Popper position |
| slideFrom | SlideFrom | 'fade' | Slide from direction |
| duration | number | 0.2 | Transition duration |
| strategy | Strategy | 'absolute' | Strategy for positioning the popper. By default it's `absolute` but you can use `fixed` to position the popper relative to the window. |
| Name | Description |
|---|---|
| trigger | Popper trigger element. |
| content | Popper content element. |
| Name | Description |
|---|---|
| setActivePopper | |
| toggle | |
| toggle-on | |
| toggle-off |