Next Phenomenal Microbrewery

    @advanced-rest-client/arc-fit-mixin
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.2 • Public • Published

    ArcFitMixin

    Published on NPM

    Tests and publishing

    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

    Install

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

    DownloadsWeekly Downloads

    919

    Version

    1.2.2

    License

    Apache-2.0

    Unpacked Size

    44 kB

    Total Files

    11

    Last publish

    Collaborators

    • carowright
    • jarrodek
    • twoplustwoone
    • lbauret