Basic Usage

Set the initial height and width using normal styles.

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

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 Dimension

<k-resize
  style="height: 200px; width: 200px;"
  dimension="width"
>
  Resize Width
</k-resize>

<k-resize
  style="height: 200px; width: 200px;"
  dimension="height"
>
  Resize Height
</k-resize>

* Notes

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

JavaScript Reference

Constructor

Extends ShadowComponent

new Resize()

Requirements

• ShadowComponent
• drag Utility Function

Properties

resizing: string

Indicates which handle is currently being used to resize the element. Values can be "side", "bottom", "corner", or empty string. Syncs with the resizing attribute.

dimension: string

Restricts resizing to a specific dimension. Possible values are "width" (horizontal only) or "height" (vertical only). If not specified, both dimensions can be resized. Syncs with the dimension attribute.

disabled: Boolean

When true, the resize handles can't capture pointer events — a drag can't start, and any in-progress drag handlers no-op. Handles fade to opacity: 0.4 as a visual cue. Syncs with the disabled attribute.

Slots

default

The main content area that will be resizable. Content automatically gets scroll behavior when it overflows the container.

Resize Handles

The resize component provides three types of handles:

• Side Handle: Allows horizontal resizing (width adjustment)
• Bottom Handle: Allows vertical resizing (height adjustment)
• Corner Handle: Allows diagonal resizing (both width and height)

CSS Custom Properties

The component respects the following CSS custom properties:

• --handle_size: Size of the resize handles (default: 1rem)
• --c_border: Border color of the container
• --c_highlight: Background color of active handles during resize
• --radius: Border radius of the container

Touch and Mouse Support

The component supports both mouse and touch interactions for resizing on desktop and mobile devices.

Behavior Notes

• During resize operations, pointer events on the main content are disabled to prevent interference
• The component enforces minimum dimensions of 10rem × 10rem and maximum dimensions of 100%
• Active resize handles are highlighted with the theme's highlight color
• Content automatically scrolls when it exceeds the container dimensions