DEPRECATED

Use the @anypoint-web-components/awc module instead.

This mixin is a port of iron-fit-behavior that works with LitElement.

ArcFitMixin fits an element in another element using max-height and max-width, and optionally centers it in the window or another element. The element will only be sized and/or positioned if it has not already been sized and/or positioned by CSS.

ArcFitMixin can position an element into another element using verticalAlign and horizontalAlign. This will override the element's css position.

<div class="container">
  <arc-fit-impl verticalalign="top" horizontalalign="auto">
    Positioned into the container
  </arc-fit-impl>
</div>

Use noOverlap to position the element around another element without overlapping it.

<div class="container">
  <arc-fit-impl nooverlap verticalalign="auto" horizontalalign="auto">
    Positioned around the container
  </arc-fit-impl>
</div>

Use horizontalOffset, verticalOffset to offset the element from its positionTarget; ArcFitMixin will collapse these in order to keep the element within fitInto boundaries, while preserving the element's CSS margin values.

<div class="container">
  <arc-fit-impl verticalalign="top" verticaloffset="20">
    With vertical offset
  </arc-fit-impl>
</div>

Deprecation notice

The following attributes are supported for compatibility with older and Polymer elements but eventually will be removed and replaced wit the corresponding new attribute.

• sizing-target > sizingtarget
• fit-into > fitinto
• no-overlap > nooverlap
• position-target > positiontarget
• horizontal-align > horizontalalign
• vertical-align > verticalalign
• dynamic-align > dynamicalign
• horizontal-offset > horizontaloffset
• vertical-offset > verticaloffset
• auto-fit-on-attach > autofitonattach

Installation

npm i @advanced-rest-client/arc-fit-mixin

Usage

import { LitElement } from 'lit-element';
import { ArcFitMixin } from '@advanced-rest-client/arc-fit-mixin';

class ArcFitImpl extends ArcFitMixin(LitElement) {
  static get properties() {
    return {
      myProp: { type: Object, attribute: 'my-prop' },
    };
  }
}

Testing

npm run test

Testing with Sauce Labs

npm run test:sl

Demo

npm start