Web/DTP
Floating UI使ってみた
イブリン
公開日:2025/02/25
イブリンです。
新しいライブラリーを使ってみたのでそれの紹介となります。
目次
Floating UIって？
あらゆる要素をTooltipやPopoverのように、指定した要素の横に浮くような表示を実装できるJSのライブラリーです。
実装の方法
ドキュメント内では基本の実装手順をわかりやすく書かれていますので割愛しますが、API内容をちょこっと紹介します。
offset
フロート要素の位置を調整するためのAPIです。
親要素から離したり、表示位置をずらしたりすることができます。
|
1 |
middleware: [offset({ mainAxis: 20 })], |
上記の例だと、親要素から20pxの間隔を開けられます。
shift
フロート要素がウインドウの境界に近接するときに、自動に要素の位置を動かしてくれるAPIです。
|
1 |
middleware: [shift({ padding: 5 })], |
上記の例だと、フロート要素がウインドウの境界からオーバーフローすることなく、境界から5pxの間隔を開けてくれます。
autoUpdate
ウインドウを拡大縮小しても、フロート要素を再生成してくれることで表示位置を崩さずにできるAPIです。
基本の使い方としては、フロート要素の位置を決めてくれるcomputePositionを新しい関数で囲み、フロート要素を呼び出す親要素の発火タイミングでautoUpdateのAPIをコールすると、ウインドウのサイズが変わってもスクロールしてもフロート要素が親要素の指定した位置に表示されます。
arrow
Tooltipのよくある形の吹き出しの三角部分を作るCSS自体は自分で書く必要がありますが、その三角部分を正確にポジションできるためのAPIです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const { x: arrowX, y: arrowY } = middlewareData.arrow; const staticSide = { top: "bottom", right: "left", bottom: "top", left: "right", }[placement.split("-")[0]]; Object.assign(arrowElement.style, { left: arrowX != null ? `${arrowX}px` : "", top: arrowY != null ? `${arrowY}px` : "", right: "", bottom: "", [staticSide]: "-8px", }); |
arrowを使うときの注意
フロート要素内にスクロールを導入したい場合、スクロールと同方向の矢印がうまく表示されません。（例：overflow-y: autoで矢印がトップかボトムに表示させる場合）
