livewire 에서 alpinejs 로 floating-ui 사용하기
Updated on
목차
일단 https://github.com/awcodes/alpine-floating-ui 패키지를 설치해준다.
app.css#
.panel {
display: none;
}
.arrow {
position: absolute;
background-color: inherit;
width: 8px;
height: 8px;
transform: rotate(45deg);
}app.js#
import "./bootstrap";
import { Alpine, Livewire } from "../../vendor/livewire/livewire/dist/livewire.esm";
import focus from "@alpinejs/focus";
import AlpineFloatingUI from "@awcodes/alpine-floating-ui";
import.meta.glob([
"../assets/**",
"../images/**",
"../fonts/**"
]);
Alpine.plugin(focus);
Alpine.plugin(AlpineFloatingUI);
// Initialize floatingUI functionality
document.addEventListener("alpine:init", () => {
Alpine.data("floatingUI", (options = {}) => ({
show() {
this.$float({
...options
}, {
trap: true
});
},
hide() {
this.$refs.panel.style.display = "none";
}
}));
});
Livewire.start();<div x-data="floatingUI({
offset: 8,
placement: 'bottom',
arrow: {
element: $refs.arrow
}
})" @mouseenter="show()" @mouseleave="hide()">
<a href="https://ggami.net" target="_blank" rel="noopener noreferrer"
class="text-main-base hover:text-main-base flex items-center rounded-full p-1 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-500">
<span class="sr-only">Open blog</span>
<x-svg.icon class="size-6" />
</a>
<div x-ref="panel"
class="panel absolute z-10 rounded bg-gray-900 px-2 py-1 text-sm text-white shadow-md">
<p>블로그 이동</p>
<div x-ref="arrow" class="arrow"></div>
</div>
</div>이렇게 사용해주면 된다.
검색해보니 popper.js 보다 floating-ui 를 사용하는 것을 추천하더라...