v1.1.0 — Polymer 2 support

New Features

• <vaadin-split-layout> is now a hybrid element. It comes with both Polymer v1 and Polymer v2.0 support (issue #40).
• Pointer events are disabled on the content elements when the splitter handler is being dragged. This makes resizing faster and more reliable (issue #50).
• Added Google Maps integration example.

Changes since v1.0.0

• bb0bfff Update package.json
• eb406b1 Remove test-fixture from bower.json and bump WCT version
• a6fd6ea Add Polymer 2 badge
• 0e59009 Replace gemini-express by gemini-polyserve
• 7ba4b0b Add variants dependencies to bower.json, use polymer-cli for installing deps and testing
• 0e59009 Replace gemini-express by gemini-polyserve
• 7ba4b0b Add variants dependencies to bower.json
• abfdcce Add custom-elements resolution to bower-2.0.json
• 913fd51 Fix #50 by adding pointer-events: none to panels during resize
• 6440f7a Add Google Maps example
• cc54aa5 Use element-demo-resources for demo navigator
• c627815 Do not run visual tests for pull requests
• 4d9497b Fix visual tests for IE/Edge
• 436c955 Sync with Skeleton (PR#17)
• 6cf0791 Update package.json and bower.json
• ad87ab7 Improve build (Skeleton PR#13 sync)
• 37b7413 Set npm version to the latest stable
• eefc48b Remove Linux/android@5.1 from automated tests
• 4b02481 Fix CSS linter errors
• c92b2b7 Add stylelint and lint:css Gulp task
• f8bddd4 Fix typo
• d934eb1 Adding test to test slot attribute in handle
• 44e9e12 Update test-fixture with latest stable
• f6a1823 Update webcomponents badge URL (beta. -> www.)
• dd3ff49 Review suggestions
• 1f035c2 Enable all browser tests in 1.7
• 8d5d1a8 Import common.html from demo resources
• 887d0ff Run tests in travis for 2.0-preview
• 56355ce Polymer 1.7 still needs is="custom-style"
• dbd34d5 Adjust demo CSS
• 86f93a9 wrap is=custom-style with element
• fd69fc1 Enable tests in FF, Edge-14, Safari-10
• 3fb29f7 removing ::content selector fixes test in FF
• 01c4bce Fix fixture loading in FF
• 083fb73 Fix dependencies for travis. Temporary run tests only in chrome.
• f6974b8 Adding a helper task to quick run tests in local
• 8d77432 Enable wc-shadydom tests. Remove shadow wct hack
• 1ea943b Fix tests
• d2330d4 Use tags for 2.0
• fd3fe66 Update dependencies to 2.0-preview

polymer-cli is now used to easily handle both Polymer1 and Polymer2 versions:

• install dependencies (polymer install --variants)
• testing (polymer test)
• serving the component in dev environment (polymer serve)

v1.1.0-beta1

Changes since v1.1.0-alpha1

• 0e59009 Replace gemini-express by gemini-polyserve
• 7ba4b0b Add variants dependencies to bower.json

polymer-cli is now used to easily handle both Polymer1 and Polymer2 versions:

• install dependencies (polymer install --variants)
• testing (polymer test)
• serving the component in dev environment (polymer serve)

v1.1.0-alpha1 — Polymer v2.0 Support

Features

• <vaadin-split-layout> is now a hybrid element. It comes with both Polymer v1 and Polymer v2.0 support (issue #40).
• Pointer events are disabled on the content elements when the splitter handler is being dragged. This makes resizing faster and more reliable (issue #50).
• Added Google Maps integration example.

Changes since v1.0.0

• abfdcce Add custom-elements resolution to bower-2.0.json
• 913fd51 Fix #50 by adding pointer-events: none to panels during resize
• 6440f7a Add Google Maps example
• cc54aa5 Use element-demo-resources for demo navigator
• c627815 Do not run visual tests for pull requests
• 4d9497b Fix visual tests for IE/Edge
• 436c955 Sync with Skeleton (PR#17)
• 6cf0791 Update package.json and bower.json
• ad87ab7 Improve build (Skeleton PR#13 sync)
• 37b7413 Set npm version to the latest stable
• eefc48b Remove Linux/android@5.1 from automated tests
• 4b02481 Fix CSS linter errors
• c92b2b7 Add stylelint and lint:css Gulp task
• f8bddd4 Fix typo
• d934eb1 Adding test to test slot attribute in handle
• 44e9e12 Update test-fixture with latest stable
• f6a1823 Update webcomponents badge URL (beta. -> www.)
• dd3ff49 Review suggestions
• 1f035c2 Enable all browser tests in 1.7
• 8d5d1a8 Import common.html from demo resources
• 887d0ff Run tests in travis for 2.0-preview
• 56355ce Polymer 1.7 still needs is="custom-style"
• dbd34d5 Adjust demo CSS
• 86f93a9 wrap is=custom-style with element
• fd69fc1 Enable tests in FF, Edge-14, Safari-10
• 3fb29f7 removing ::content selector fixes test in FF
• 01c4bce Fix fixture loading in FF
• 083fb73 Fix dependencies for travis. Temporary run tests only in chrome.
• f6974b8 Adding a helper task to quick run tests in local
• 8d77432 Enable wc-shadydom tests. Remove shadow wct hack
• 1ea943b Fix tests
• d2330d4 Use tags for 2.0
• fd3fe66 Update dependencies to 2.0-preview

v1.0.0-beta1

Overview

<vaadin-split-layout> is a component with a split layout for two content elements with a draggable splitter between them.

<vaadin-split-layout>
  <div>First content element</div>
  <div>Second content element</div>
</vaadin-split-layout>

Features

• Touch resizing support with a large touch target area around the splitter handle in the middle of the splitter between the contents
• Provides horizontal and vertical split layouts with two content elements
• Supports any content elements, not only div
• Supports nesting and complex layout combinations
• Respects the sizes (width and height style properties) and the size limits (min-width, max-width) specified for the content elements
• When resized, notifies the nested elements with IronResizableBehavior
• Customizable styles for the splitter, replaceable splitter handle

Demos and documentation

• Demos
• Tutorials
• API docs

Changes since v1.0.0-alpha1

• Test fixes
• Added visual regression tests

v1.0.0

Overview

<vaadin-split-layout> is a component with a split layout for two content elements with a draggable splitter between them.

<vaadin-split-layout>
  <div>First content element</div>
  <div>Second content element</div>
</vaadin-split-layout>

Features

• Touch resizing support with a large touch target area around the splitter handle in the middle of the splitter between the contents
• Provides horizontal and vertical split layouts with two content elements
• Supports any content elements, not only div
• Supports nesting and complex layout combinations
• Respects the sizes (width and height style properties) and the size limits (min-width, max-width) specified for the content elements
• When resized, notifies the nested elements with IronResizableBehavior
• Customizable styles for the splitter, replaceable splitter handle

Demos and documentation

• Demos
• Tutorials
• API docs

No changes since v1.0.0-beta1

v1.0.0-alpha1

New Features

Customizing the Spliter

• mixins and templates can be used for customizing the splitter.

<style>
  .my-split-layout {
    --vaadin-split-layout-splitter: {
      background: var(--paper-indigo-500);
    };
  }
</style>
<vaadin-split-layout vertical class="my-split-layout">
  <iron-icon class="splitter-handle" icon="more-vert"></iron-icon>
  <div>First content element</div>
  <div>Second content element</div>
</vaadin-split-layout>

Notable Changes

• Don't depend on <iron-flex-layout>
• Don't depend on <iron-icon>
• Simplified styles
• Better documentation and demos.

Fixes

• Fixed examples in IE11
• Some CSS selector fixes
• Fix usability for touch devices.

0.1.0 - First release

First first release of vaadin-split-layout with an initial set of features:

• Horizontal mode
• Vertical mode
• Support for CSS sizes and min/max settings.
• Support for iron-resizable behavior
• Documentation and tests