Fits an element into another element
IronFitBehavior
IronFitBehavior
positions and fits an element in the bounds of another element and optionally centers it in the window or the other element.
See: Documentation, Demo.
Usage
Installation
npm install --save @polymer/iron-fit-behavior
In a Polymer 3 element
import {PolymerElement} from '@polymer/polymer/polymer-element.js';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
import {IronFitBehavior} from '@polymer/iron-fit-behavior/iron-fit-behavior.js';
class SimpleFit extends mixinBehaviors(IronFitBehavior, PolymerElement) {
static get template() {
return html`
<style>
:host {
background: lightblue;
padding: 2px;
}
</style>
verticalAlign: [[verticalAlign]], horizontalAlign: [[horizontalAlign]]
`;
}
}
customElements.define('simple-fit', SimpleFit);
Then, in your HTML:
<script type="module" src="./simple-fit.js"></script>
<style>
#container {
margin: 3em;
border: 2px dashed gray;
padding: 3em;
}
</style>
<div id="container">
The <code><simple-fit></code> below will be positioned within this div.
<simple-fit id="simpleFitElement"
vertical-align="bottom"
horizontal-align="left"
auto-fit-on-attach
></simple-fit>
</div>
Contributing
If you want to send a PR to this element, here are the instructions for running the tests and demo locally:
Installation
git clone https://github.com/PolymerElements/iron-fit-behavior
cd iron-fit-behavior
npm install
npm install -g polymer-cli
Running the demo locally
polymer serve --npm
open http://127.0.0.1:<port>/demo/
Running the tests
polymer test --npm
Install
Framework Support
Browser Compatibility
Install with
Run the above npm command in your project folder.
If you have any issues installing, please
contact the author.
Release notes - Version 3.0.1
Dependencies
- @polymer/polymer#^3.0.0