@inkline/inkline
Version:
Inkline is the Vue.js UI/UX Library built for creating your next design system
37 lines (35 loc) • 989 B
HTML
<div
class="dropdown-wrapper"
ref="wrapper"
aria-haspopup="true"
v-click-outside="onClickOutside"
@keyup.esc="onEscape"
>
<div class="dropdown-trigger" ref="trigger">
<slot />
</div>
<transition
name="zoom-in-top-transition"
@after-leave="destroyPopper"
>
<div
class="dropdown"
:class="classes"
role="menu"
ref="popup"
:aria-hidden="visible ? 'false' : 'true'"
v-show="visible"
>
<span data-popper-arrow v-if="arrow" />
<div class="dropdown-header" v-if="$slots.header">
<slot name="header" />
</div>
<div class="dropdown-body" ref="body" v-if="$slots.body">
<slot name="body" />
</div>
<div class="dropdown-footer" v-if="$slots.footer">
<slot name="footer" />
</div>
</div>
</transition>
</div>