神刀安全网

Popper.js: A Library Used to Create Poppers in Web Applications

Pop

on 4 sides

Popper on top

Popper on bottom

Popper on left

Popper on right

Poppers on 4 sides

Placing poppers around elements is just that easy!

var popperOnTop = new Popper(referenceElement, onTopPopper, {     placement: 'top' }); var popperOnBottom = new Popper(referenceElement, onBottomPopper, {     placement: 'bottom' }); var popperOnLeft = new Popper(referenceElement, onLeftPopper, {     placement: 'left' }); var popperOnRight = new Popper(referenceElement, onRightPopper, {     placement: 'right' });

Scroll me

up and down

I follow it

staying between boundaries

Popper on scrolling container

In this example we have a relative div which contains a div with overflow: scroll .

Inside it, there are our popper and refeence elements.

var popper = new Popper(referenceElement, onLeftPopper, {     placement: 'left',     boundariesElement: container });

Drag me

on the edges

Flipping popper

which never goes on right side

Custom flip behavior

Try dragging the reference element on the left side, its popper will move on its the bottom edge. Then, try to move the reference element on the bottom left corner, it will move on its top edge.

var popper = new Popper(referenceElement, onLeftPopper, {     placement: 'left',     flipBehavior: ['left', 'bottom', 'top'],     boundariesElement: container });

Reference

Shifted popper

on start

Shifted popper

on end

Shifted poppers

Shift your poppers on start or end of its reference element side.

var shiftStart = new Popper(referenceElement, shiftStartPopper, {     placement: 'left-start',     boundariesElement: container });  var shiftEnd = new Popper(referenceElement, shiftEndPopper, {     placement: 'bottom-end',     boundariesElement: container });

Pop

on the bottom

Popper on bottom

Flips when hits viewport

Viewport boundaries

By default, poppers use as boundaries the page viewport.Scroll the page to see the popper flip when hits the page viewport margins.

var popper = new Popper(referenceElement, onBottomPopper, {     placement: 'bottom' });

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Popper.js: A Library Used to Create Poppers in Web Applications

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮