README

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.

CSS properties	Action
`position` set	Element is not centered horizontally or vertically
`top` or `bottom` set	Element is not vertically centered
`left` or `right` set	Element is not horizontally centered
`max-height` set	Element respects `max-height`
`max-width` set	Element respects `max-width`

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

Usage no npm install needed!