Popper

3.2.0

A popper is a transient view that appears above other content onscreen when people click or tap a control or interactive area. Use poppers to enable simple tasks on tablet and desktop.

Demo

NamnTypBeskrivning

children

ReactNodePopper render function or node.

disablePadding

booleanIf true, padding is removed.

disableTransition

booleanIf true, the popper will toggle without any animation effects

flip

booleanThe flip modifier can change the placement of a popper when it's scheduled to overflow a given boundary.

offset

number[]The offset modifier lets you displace a popper element from its reference element.

onClose *

() => voidFunction that handles closing the popper. Usually a function that sets open = false.

showArrow

boolean

sx

SxPropsThe system prop that allows defining system overrides as well as additional CSS styles.

transformOrigin

stringProperty sets the origin for an element's transformations.

Installation

npm install @sj-ab/component-library.ui.popper

Länkar

Best practices

Examples

Example 1: Text Field with Popper (no arrow)

Example 1: Text Field with Popper (no arrow)

Example 2: Chip with Popper (with arrow pointing to its parent)

Example 2: Chip with Popper (with arrow pointing to its parent)

Tillgänglighet

Popper har i nuläget inget inbyggt stöd för att begränsa fokus för tangentbord och skärmläsare! Alla popuper med interaktivitet (t.ex. DatePicker eller Menu) måste alltid använda komponenten Popover från Mui istället för Popper.

Change log

Statistik

  • Importer av Popper

    4
  • Repos med Popper

    10%
  • Senaste installerade version av Popper

    3.2.0
  • Äldsta installerade version av Popper

    3.2.0