Resizer

import {Resizer} from 'cx/widgets';

Resizer is used to resize adjacent elements. In the background, Resizer uses the reference to one of the adjacent elements so it can measure their size. By default, Resizer uses the previous element sibling for size measurement. If we want to use the next element sibling instead, we can use the forNextElement flag.

When we move the Resizer, it either adds or subtracts the offset to the original size of the affected element. On double-click, the default size is set.

Width: not set

Resizer

<div class="widgets">
    <div style="width: 300px; height: 100px; display: flex;">
        <div style={{
            border: "1px solid gray",
            background: "lightgray",
            width: {expr: "{width} || '150px'"},
            boxSizing: "border-box",
            padding: 5
        }}>
            <span text-expr="{width} ? 'Width: ' + {width} + 'px' : 'Width: not set'" style="font-size: 11px;"/>
        </div>
        <Resizer size-bind="width" minSize={50} maxSize={250} />
        <div style={{
            border: "1px solid gray",
            background: "lightgray",
            flex: '1 1 0'
        }}/>
    </div>
</div>

Copied!Cx Fiddle

To use the Resizer, hover the space between two elements.

Please note that box-sizing should be set to border-box if elements which are being resized have borders.

Configuration

Property	Description	Type
defaultSize	Default size that will be set when the user double-clicks the resizer. Default size value is `null`.	number
forNextElement	Use the element after the resizer for size measurements.	boolean
horizontal	Make resizer horizontal.	boolean
maxSize	Maximum size of the element in pixels.	number
minSize	Minimum size of the element in pixels.	number
size	A binding for the new size which is in pixels.	number
baseClass	Base CSS class to be applied to the element. Default is 'resizer'.	string
class className	Additional CSS classes to be applied to the element. If an object is provided, all keys with a "truthy" value will be added to the CSS class list.	string/object
style	Style object applied to the wrapper div. Used for setting the dimensions of the element.	string/object

Documentation

Resizer