# Resize

Table of Contents

###### Examples

Basic Usage
Resize Dimension

###### JavaScript Reference

Constructor
Requirements
Attributes
Properties
Methods

### 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

- Component

### 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.