當前位置: 首頁>>代碼示例>>TypeScript>>正文


TypeScript popper.js.default類代碼示例

本文整理匯總了TypeScript中popper.js.default的典型用法代碼示例。如果您正苦於以下問題:TypeScript js.default類的具體用法?TypeScript js.default怎麽用?TypeScript js.default使用的例子?那麽, 這裏精選的類代碼示例或許可以為您提供幫助。


在下文中一共展示了js.default類的3個代碼示例,這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚,您的評價將有助於係統推薦出更棒的TypeScript代碼示例。

示例1: reposition

  // Reposition the popup as it is shown or if its size changes
  function reposition() {
    const element = findDialogData();
    if (element) {
      if (popper) {
        popper.scheduleUpdate();
      } else {
        const popperOptions = {
          placement: 'top-start',
          eventsEnabled: false,
          modifiers: {
            preventOverflow: {
              priority: ['bottom', 'top', 'right', 'left']
            },
            flip: {
              behavior: ['top', 'bottom', 'right', 'left']
            },
            offset: {
              offset: '0,5px'
            },
            arrow: {
              element: '.arrow'
            }
          }
        } as any;

        const boundariesElement = $attrs.itemPopupBoundaryClass
          ? document.getElementsByClassName($attrs.itemPopupBoundaryClass)[0]
          : undefined;
        if (boundariesElement) {
          popperOptions.modifiers.preventOverflow.boundariesElement = boundariesElement;
          popperOptions.modifiers.flip.boundariesElement = boundariesElement;
        }

        popper = new Popper(element, dialog[0], popperOptions);
        popper.scheduleUpdate(); // helps fix arrow position
      }
    }
  }
開發者ID:bhollis,項目名稱:DIM,代碼行數:39,代碼來源:item-popup.directive.ts

示例2: Popper

import Popper from 'popper.js';

const reference = document.querySelector('.my-button');
const popper = document.querySelector('.my-popper');
const boundary = document.querySelector('.my-boundary');
const arrow = document.querySelector('.my-arrow');

const thePopper = new Popper(
    reference,
    popper,
);
thePopper.update();
thePopper.scheduleUpdate();
thePopper.destroy();
thePopper.enableEventListeners();
thePopper.disableEventListeners();

Popper.modifiers.forEach(console.log.bind(console));
Popper.placements.forEach(console.log.bind(console));

const thePopperWithOptions = new Popper(
    reference,
    popper,
    {
        placement: 'bottom',
        eventsEnabled: true,
        removeOnDestroy: true,
        modifiers: {
            shift: {
                enabled: true,
                fn: (data) => data,
開發者ID:DenisCarriere,項目名稱:DefinitelyTyped,代碼行數:31,代碼來源:popper.js-tests.ts

示例3: Popper

import Popper from 'popper.js';

var reference = document.querySelector('.my-button');
var thePopper = new Popper(
    reference, {
        content: 'My awesome popper!'
    }
);
thePopper.update();
thePopper.destroy();

var options = {
        placement: 'bottom',
        offset: 0,
        arrowElement: document.querySelector('.arrow'),
        modifiersIgnored: ['applyStyle'],
    } as Popper.PopperOptions;

var thePopperWithOptions = new Popper(
    reference, {
        content: 'My awesome popper!',
    }, options);

var popper = document.querySelector('.my-popper');
var anotherPopper = new Popper(
    reference,
    popper
);

var reference = document.querySelector('.my-button');
開發者ID:YousefED,項目名稱:DefinitelyTyped,代碼行數:30,代碼來源:popper.js-tests.ts


注:本文中的popper.js.default類示例由純淨天空整理自Github/MSDocs等開源代碼及文檔管理平台,相關代碼片段篩選自各路編程大神貢獻的開源項目,源碼版權歸原作者所有,傳播和使用請參考對應項目的License;未經允許,請勿轉載。