How to use the dom-align function in dom-align

To help you get started, we’ve selected a few dom-align examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github buildkite / frontend / app / components / layout / NavigationDropdown.js View on Github external
alignElements() {
    // Don't bother about aligning the elements if we're not showing the
    // dropdown.
    if(!this.state.showing) {
      return;
    }

    var points = this.props.align == "right" ? [ "tr", "br" ] : [ "tl", "bl" ];
    domAlign(ReactDOM.findDOMNode(this.dropdownNode), ReactDOM.findDOMNode(this.labelNode), { points: points });
  }
github ecomfe / san-mui / src / Popover / Popover.js View on Github external
let transformOrigin = getTransfromOrigin(targetOrigin);

        // 设置缩放动画的起点
        content.style.transformOrigin = transformOrigin;
        content.style.mozTransformOrigin = transformOrigin;
        content.style.msTransformOrigin = transformOrigin;
        content.style.webkitTransformOrigin = transformOrigin;

        content.style.maxHeight = maxHeight == null ? 'auto' : `${maxHeight}px`;
        content.style.overflowY = maxHeight == null ? 'visible' : 'auto';
        content.style.maxWidth = maxWidth == null ? 'auto' : `${maxWidth}px`;
        content.style.overflowX = maxWidth == null ? 'auto' : `${maxWidth}px`;

        // 对齐元素
        align(
            this.el.firstElementChild,
            anchor,
            {
                points: [targetOrigin, anchorOrigin],
                offset: [offsetX, offsetY],
                overflow: {
                    adjustX: true,
                    adjustY: true
                },
                useCssTransform: false
            }
        );

        // 恢复之前的样式
        content.style.transform = cssTransformBackup;
github yiminghe / dom-align / examples / shadow-dom.js View on Github external
align() {
    const ret = domAlign(this.refs.source, this.refs.target, {
      points: ['bl', 'bl'],
      overflow: {
        adjustY: 1,
      },
    });
    console.log(ret);
  }
github react-melon / melon / src / Menu.js View on Github external
componentDidUpdate() {

        let {main, layer} = this;

        if (main && layer) {

            let {anchorAlignment, layerAlignment} = this.props;

            align(
                layer,
                main,
                {
                    points: [layerAlignment, anchorAlignment],
                    overflow: {
                        adjustX: true,
                        adjustY: true
                    }
                }
            );

        }

    }
github react-melon / melon / src / Popover.js View on Github external
alignLayerToAnchor(layer, anchor) {

        let {
            anchorAlignment,
            layerAlignment,
            anchorOffset,
            layerOffset
        } = this.props;

        let transform = layer.style.transform;

        layer.style.transform = '';

        align(
            layer,
            anchor,
            {
                points: [anchorAlignment, layerAlignment],
                overflow: {
                    adjustX: true,
                    adjustY: true
                },
                offset: layerOffset,
                anchorOffset: anchorOffset
            }
        );

        layer.style.transform = transform;

    }

dom-align

Align DOM Node Flexibly

MIT
Latest version published 1 year ago

Package Health Score

74 / 100
Full package analysis