미들웨어 — Floating UI Plus

← 모든 패턴

Middleware

offset, shift, flip, size, arrow, hide, inline, auto-placement가 어떻게 협력하는지 봅니다.

실행 데모web-components

Offset

(DOC)

Compare the default position with a 10px gutter on the main axis.

0px

10px

offset(0) / offset(10)

Shift

(DOC)

Scroll horizontally. The panel stays on top and shifts along the x-axis to remain visible.

scroll horizontally

shift({padding: 8})

Flip

(DOC)

Scroll up. Flip chooses the available side while shift keeps the panel inside the boundary.

scroll up

bottom (default) + flip() → shift()

Arrow

(DOC)

Scroll horizontally. Floating UI Plus adds the arrow height to the requested visual gap.

scroll horizontally

offset(GAP) → shift() → arrow({element})

Size

(DOC)

Scroll vertically. Available height constrains the panel without adding a second popup scrollbar.

scroll vertically

Floating contentOneTwoThreeFourFive

size({apply: set maxWidth / maxHeight})

Auto placement

(DOC)

Scroll vertically. Auto placement chooses the roomiest side while shift keeps it inside the boundary.

scroll vertically

autoPlacement({padding: 8}) → shift({padding: 8})

Hide

(DOC)

Scroll up. The panel dims after escaping, then hides when its reference is fully clipped.

scroll up

Floating

State: attached

hide() + hide({strategy: 'escaped'})

Inline

(DOC)

Compare the detached bounding box with the relevant client rect of a wrapped inline anchor.

without

Text beforea reference that wraps over multiple linesafter.

with inline()

Text beforea reference that wraps over multiple linesafter.

inline() → offset(8)