Popper.js 翻转（flip）

当popper溢出给定边界时，flip修饰符可以改变它的位置。

演示

该位置设置为底部，但如果该位置不适合，则将使用相反的顶部位置。

阶段

main

Options

type Options = {
  fallbackPlacements: Array<Placement>, // [oppositePlacement]
  padding: Padding, // 0,
  boundary: Boundary, // "clippingParents"
  rootBoundary: RootBoundary, // "viewport"
  flipVariations: boolean, // true
  allowedAutoPlacements: Array<Placement>, // all supported placements
};

fallbackPlacements

如果popper的位置设置为底部，但没有足够的空间在这个方向上放置popper，默认情况下，它会将popper的位置设置为顶部。一旦检测到足够的空间，位置将恢复到最初定义(或首选)的位置。

您还可以通过提供一个位置列表来定义备用位置。当首选位置没有可用空间时，修饰符将测试列表中提供的那些，并使用第一个有用的。

createPopper(reference, popper, {
  placement: 'left',
  modifiers: [
    {
      name: 'flip',
      options: {
        fallbackPlacements: ['top', 'right'],
      },
    },
  ],
});

在上面的例子中，如果有足够的空间，popper将被放置在左边，如果没有，它将尝试顶部的位置，如果顶部的位置也不合适，它将尝试使用正确的位置。即使是正确的位置也不合适，它也会返回到最初的位置。

padding

有关详细信息，请参阅检测溢出中的填充。

createPopper(reference, popper, {
  modifiers: [
    {
      name: 'flip',
      options: {
        padding: 8,
      },
    },
  ],
});

boundary

详细信息请参见检测溢出中的边界。

const element = document.querySelector('#parentElement');

createPopper(reference, popper, {
  modifiers: [
    {
      name: 'flip',
      options: {
        boundary: element,
      },
    },
  ],
});

rootBoundary

详细信息请参见检测溢出中的rootBoundary。

createPopper(reference, popper, {
  modifiers: [
    {
      name: 'flip',
      options: {
        rootBoundary: 'document',
      },
    },
  ],
});

altBoundary

这将检查引用的边界上下文(clippingParents)而不是popper的，有效地复制了popper v1中的scrollParent边界。有关详细信息，请参阅检测溢出中的altBoundary。

createPopper(reference, popper, {
  modifiers: [
    {
      name: 'flip',
      options: {
        altBoundary: true, // false by default
      },
    },
  ],
});

flipVariations

当使用变化位置时(如 top-start )， popper 将尝试翻转相反的变化，如果首选的变化不适合。这允许 popper 在 prevtoverflow 有可能出错之前保持与引用元素的边缘对齐。

createPopper(reference, popper, {
  modifiers: [
    {
      name: 'flip',
      options: {
        flipVariations: false, // true by default
      },
    },
  ],
});

allowedAutoPlacements

自动放置是非常通用的，但有时你可能需要让它解决只是一个用户定义的位置集。

例如，如果你想自动只解析为顶部或底部，你可以设置 allowedAutoPlacements 为['top'， 'bottom']。

该特性可以从@popperjs/core@2.3.0开始获得

createPopper(reference, popper, {
  placement: 'auto',
  modifiers: [
    {
      name: 'flip',
      options: {
        allowedAutoPlacements: ['top', 'bottom'], // 默认情况下，所有位置都是允许的
      },
    },
  ],
});

Data

这个修饰符没有数据。