36 lines
1004 B
YAML
36 lines
1004 B
YAML
name: Resizer
|
|
purpose: Resize a sibling or assigned target element by dragging a horizontal or vertical handle.
|
|
|
|
attributes:
|
|
vertical: Resize height instead of width.
|
|
min: Minimum size in pixels. Default is 10.
|
|
max: Maximum size in pixels. Default is 1000.
|
|
|
|
properties:
|
|
target: Target element. Defaults to the previous sibling.
|
|
|
|
binding:
|
|
behavior: '$bind or a bind event sets the target size in pixels.'
|
|
|
|
events:
|
|
resizing:
|
|
detail: "{ oldSize, newSize }"
|
|
resize:
|
|
detail: "{ oldSize, newSize }"
|
|
change:
|
|
detail: Final size in pixels.
|
|
|
|
rules:
|
|
- MouseMover is an internal dependency and is loaded automatically.
|
|
|
|
examples:
|
|
horizontal_and_vertical: |
|
|
<div id="sidebar" style="width:240px"></div>
|
|
<Resizer min="160" max="480" $bind="State.sidebarWidth" $onchange="State.sidebarWidth = event.detail"></Resizer>
|
|
|
|
<div id="bottomPanel" style="height:240px"></div>
|
|
<Resizer vertical min="120" max="480" $.target="bottomPanel"></Resizer>
|
|
|
|
tests:
|
|
- Resizer.test.html
|