Resize

Table of Contents

Basic Usage

Set the initial height and width using normal styles.

<k-resize
style="height: 200px; width: 200px;"
>

Resize Me
</k-resize>

Resize Me

Set the minimum and maximum height and width using normal styles. The default min-height and min-width is 10rem and the default max-height and max-width is 100%.

<k-resize
style="min-height: 100px; height: 200px; max-height: 300px; min-width: 100px; width: 200px; max-width: 300px;"
>

Resize Me
</k-resize>

Resize Me

Resize Dimension

<k-resize
style="height: 200px; width: 200px;"
dimention="width"
>

Resize Width
</k-resize>

Resize Width

<k-resize
style="height: 200px; width: 200px;"
dimention="height"
>

Resize Height
</k-resize>

Resize Height

* Notes

Additional styles may be added to the example output (borders, spacing, colors) for demonstration.

JavaScript Reference

Constructor

Extends Component
new Resize()

Requirements

Attributes

resizing: string

Indicates which handle is currently being used to resize the element.

dimention: string

Specifies which dimension to resize. Can be "width" or "height".

Properties

resizing: string

Indicates which handle is currently being used to resize the element.

Methods

render(force): Promise

Renders the component. If force is true, the component will be re-rendered even if it has already been rendered.