iron-fit-behavior
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
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- polymer#Polymer/polymer#1.9 - 2
- Released
- 2018-06-08
- Maturity
- IMPORTED
- License
- Other
Compatibility
- Framework
- Polymer 2.0+
- Polymer 3.0+ in 0.0.1
- Polymer 1.0+ in 0.8.0
- Browser
- Browser Independent
iron-fit-behavior - Vaadin Add-on Directory
Fits an element into another element<simple-fit>
below will be positioned within this div.
License
View on GitHub
View on NPM
Documentation
Online Demo
GitHub Homepage
iron-fit-behavior version 0.8.0
### Dependencies
Polymer/polymer#v0.8.0-rc.7
iron-fit-behavior version 0.8.1
### Dependencies
Polymer/polymer#v0.8.0-rc.7
iron-fit-behavior version 0.9.0
### Dependencies
Polymer/polymer#v0.9.0-rc.1
iron-fit-behavior version 0.9.1
### Dependencies
webcomponents/webcomponentsjs#^0.7.0
* Polymer/polymer#^0.9.0
iron-fit-behavior version 0.9.2
### Dependencies
Polymer/polymer#^0.9.0
iron-fit-behavior version 0.9.3
### Dependencies
Polymer/polymer#^0.9.0
iron-fit-behavior version 0.9.4
### Dependencies
Polymer/polymer#^0.9.0
iron-fit-behavior version 0.9.5
### Dependencies
* polymer#Polymer/polymer#^0.9.0
iron-fit-behavior version 1.0.0
### Dependencies
* polymer#Polymer/polymer#^1.0.0
iron-fit-behavior version 1.0.1
### Dependencies
* polymer#Polymer/polymer#^1.0.0
iron-fit-behavior version 1.0.2
### Dependencies
* polymer#Polymer/polymer#^1.0.0
iron-fit-behavior version 1.0.3
### Dependencies
* polymer#Polymer/polymer#^1.0.0
iron-fit-behavior version 1.0.4
### Dependencies
* polymer#Polymer/polymer#^1.0.0
iron-fit-behavior version 1.0.5
### Dependencies
* polymer#Polymer/polymer#^1.0.0
iron-fit-behavior version 0.0.1
### Dependencies
* @polymer/polymer#^1.2.5-npm-test.2
iron-fit-behavior version 0.0.3
### Dependencies
* @polymer/polymer#^1.2.5-npm-test.2
iron-fit-behavior version 1.0.6
### Dependencies
* polymer#Polymer/polymer#^1.0.0
iron-fit-behavior version 1.1.0
### Dependencies
* polymer#Polymer/polymer#^1.0.0
iron-fit-behavior version 1.1.1
### Dependencies
* polymer#Polymer/polymer#^1.0.0
iron-fit-behavior version 1.2.0
### Dependencies
* polymer#Polymer/polymer#^1.0.0
iron-fit-behavior version 1.2.1
### Dependencies
* polymer#Polymer/polymer#^1.0.0
iron-fit-behavior version 1.2.2
### Dependencies
* polymer#Polymer/polymer#^1.0.0
iron-fit-behavior version 1.2.3
### Dependencies
* polymer#Polymer/polymer#^1.0.0
iron-fit-behavior version 1.2.4
### Dependencies
* polymer#Polymer/polymer#^1.1.0
iron-fit-behavior version 1.2.5
### Dependencies
* polymer#Polymer/polymer#^1.1.0
iron-fit-behavior version 1.2.6
### Dependencies
* polymer#Polymer/polymer#^1.1.0
iron-fit-behavior version 2.0.0
### Dependencies
* polymer#Polymer/polymer#1.9 - 2
iron-fit-behavior version 1.2.7
### Dependencies
* polymer#Polymer/polymer#^1.1.0
iron-fit-behavior version 2.0.1
### Dependencies
* polymer#Polymer/polymer#1.9 - 2
iron-fit-behavior version 3.0.0-pre.1
### Dependencies
* @polymer/polymer#^3.0.0-pre.1
iron-fit-behavior version 2.1.0
### Dependencies
* polymer#Polymer/polymer#1.9 - 2
iron-fit-behavior version 3.0.0-pre.2
### Dependencies
* @polymer/polymer#^3.0.0-pre.1
iron-fit-behavior version 3.0.0-pre.3
### Dependencies
* @polymer/polymer#^3.0.0-pre.3
iron-fit-behavior version 3.0.0-pre.4
### Dependencies
* @polymer/polymer#^3.0.0-pre.4
iron-fit-behavior version 3.0.0-pre.6
### Dependencies
* @polymer/polymer#^3.0.0-pre.6
iron-fit-behavior version 3.0.0-pre.7
### Dependencies
* @polymer/polymer#^3.0.0-pre.7
iron-fit-behavior version 3.0.0-pre.8
### Dependencies
* @polymer/polymer#^3.0.0-pre.7
iron-fit-behavior version 2.1.1
### Dependencies
* polymer#Polymer/polymer#1.9 - 2
iron-fit-behavior version 3.0.0-pre.10
### Dependencies
* @polymer/polymer#^3.0.0-pre.10
iron-fit-behavior version 3.0.0-pre.11
### Dependencies
* @polymer/polymer#^3.0.0-pre.10
iron-fit-behavior version 3.0.0-pre.12
### Dependencies
* @polymer/polymer#3.0.0-pre.12
iron-fit-behavior version 2.2.0
### Dependencies
* polymer#Polymer/polymer#1.9 - 2
iron-fit-behavior version 3.0.0-pre.13
### Dependencies
* @polymer/polymer#^3.0.0-pre.13
iron-fit-behavior version 3.0.0-pre.14
### Dependencies
* @polymer/polymer#^3.0.0-pre.13
iron-fit-behavior version 3.0.0-pre.15
### Dependencies
* @polymer/polymer#^3.0.0-pre.13
iron-fit-behavior version 3.0.0-pre.16
### Dependencies
* @polymer/polymer#^3.0.0-pre.13
iron-fit-behavior version 3.0.0-pre.17
### Dependencies
* @polymer/polymer#^3.0.0-pre.13
iron-fit-behavior version 3.0.0-pre.18
### Dependencies
* @polymer/polymer#^3.0.0
iron-fit-behavior version 3.0.0-pre.19
### Dependencies
* @polymer/polymer#^3.0.0
iron-fit-behavior version 2.2.1
### Dependencies
* polymer#Polymer/polymer#1.9 - 2
iron-fit-behavior version 3.0.0-pre.20
### Dependencies
* @polymer/polymer#^3.0.0
iron-fit-behavior version 3.0.0-pre.21
### Dependencies
* @polymer/polymer#^3.0.0
iron-fit-behavior version 3.0.0-pre.22
### Dependencies
* @polymer/polymer#^3.0.0
iron-fit-behavior version 3.0.0-pre.23
### Dependencies
* @polymer/polymer#^3.0.0
iron-fit-behavior version 3.0.0-pre.24
### Dependencies
* @polymer/polymer#^3.0.0
iron-fit-behavior version 3.0.0-pre.25
### Dependencies
* @polymer/polymer#^3.0.0
iron-fit-behavior version 3.0.0-pre.26
### Dependencies
* @polymer/polymer#^3.0.0
iron-fit-behavior version 3.0.0
### Dependencies
* @polymer/polymer#^3.0.0
iron-fit-behavior version 3.0.1
### Dependencies
* @polymer/polymer#^3.0.0