html
<dom-module id="resizable-panel">
<template>
<style>
:host {
display: block;
width: 300px;
height: 200px;
resize: both;
overflow: auto;
}
</style>
<div>Resizable Panel Content</div>
</template>
<script>
class ResizablePanel extends Polymer.Element {
static get is() { return 'resizable-panel'; }
}
customElements.define(ResizablePanel.is, ResizablePanel);
</script>
</dom-module>
script
<script>
class ResizablePanel extends Polymer.mixinBehaviors([IronResizableBehavior], Polymer.Element) {
static get is() { return 'resizable-panel'; }
}
customElements.define(ResizablePanel.is, ResizablePanel);
</script>
script
<script>
class ResizablePanel extends Polymer.mixinBehaviors([IronResizableBehavior], Polymer.Element) {
static get is() { return 'resizable-panel'; }
ready() {
super.ready();
this.addEventListener('iron-resize', this._handleResize.bind(this));
}
_handleResize(event) {
console.log('Panel resized!');
}
}
customElements.define(ResizablePanel.is, ResizablePanel);
</script>
