LivewireでAlpine.jsからfloating-uiを使う
まず、<https://github.com/awcodes/alpine floating ui パッケージをインストールする。 app.css app.js このように使えばよい。 検索してみたところ、popper.js より floating ui を使うのがおすすめとのことだった...
GGAMI
まず、<https://github.com/awcodes/alpine floating ui パッケージをインストールする。 app.css app.js このように使えばよい。 検索してみたところ、popper.js より floating ui を使うのがおすすめとのことだった...
まず、https://github.com/awcodes/alpine-floating-ui パッケージをインストールする。
.panel {
display: none;
}
.arrow {
position: absolute;
background-color: inherit;
width: 8px;
height: 8px;
transform: rotate(45deg);
}import "./bootstrap";
import { Alpine, Livewire } from "../../vendor/livewire/livewire/dist/livewire.esm";
import focus from "@alpinejs/focus";
<div x-data="floatingUI({
offset: 8,
placement: 'bottom',
arrow: {
element: $refs.arrow
}
})" @mouseenter="show()" @mouseleave="hide()">
このように使えばよい。
検索してみたところ、popper.js より floating-ui を使うのがおすすめとのことだった...