Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://popper.js.org/docs/v2/utils/detect-overflow/ below:

The detectOverflow utility returns an object of overflow offsets of the popper or reference element relative to a given boundary.

import { detectOverflow } from '@popperjs/core';

const overflow = detectOverflow(state, options);

You can use this utility within your own custom modifiers.

The first argument is the popper instance state that gets passed in to modifiers.

type Options = {
  placement: Placement, 
  elementContext: Context, 
  boundary: Boundary, 
  rootBoundary: RootBoundary, 
  altBoundary: boolean, 
  padding: Padding, 
};


type Context = 'reference' | 'popper';
type Boundary = 'clippingParents' | HTMLElement | Array<HTMLElement>;
type RootBoundary = 'document' | 'viewport';
type Padding =
  | number
  | {|
      top?: number,
      right?: number,
      bottom?: number,
      left?: number,
    |};

This will check the overflow when the popper is given this placement. By default, it's state.placement.

This describes the element that is being checked for overflow relative to the boundary.

detectOverflow(state, {
  elementContext: 'reference', 
});

This describes the area that the element will be checked for overflow relative to.

By default, it is "clippingParents", which are the scrolling containers that may cause the element to be partially or fully cut off.

const customBoundary = document.querySelector('#boundary');

detectOverflow(state, {
  boundary: customBoundary, 
});

This describes the root boundary that will be checked for overflow. There are only two "roots" – the viewport and the document. "viewport" is default, which is the area of the document the user can actually see on the screen. "document" is the entire page which can be potentially scrolled.

detectOverflow(state, {
  rootBoundary: 'document', 
});

This describes whether to use the alt element's boundary. For example, if the elementContext is "popper", then it will check the reference's boundary context, and vice-versa.

detectOverflow(state, {
  altBoundary: true, 
});

Applies virtual padding to the boundary.

You can pass a number, which will be equal padding on all four sides, or an object containing side properties each with their own padding value.

detectOverflow(state, {
  
  padding: 8,
  
  padding: { top: 8, right: 16 },
});

type OverflowOffsets = {
  top: number,
  bottom: number,
  right: number,
  left: number,
};

For your custom modifiers, ensure you add "offset" to requiresIfExists, as the util needs to have access to this information if offset exists in the modifier lifecycle:

import { detectOverflow } from '@popperjs/core';

const myModifier = {
  name: 'myModifier',
  enabled: true,
  phase: 'main',
  requiresIfExists: ['offset'],
  fn({ state }) {
    const overflow = detectOverflow(state);
    
  },
};

detectOverflow only considers the offset modifier by default and reports values as though no other modifier is currently affecting it. This means if preventOverflow is enabled, its values should be taken into account (state.modifiersData.preventOverflow), along with any other potential modifier that alters popperOffsets.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4