Leave Yamada UI a star

Star
Yamada UIYamada UIv1.6.4

Resizable

Resizable is accessible resizable panel groups and layouts with keyboard support.

Source@yamada-ui/resizable

Props

ResizableProps

colorScheme

Description

The visual color appearance of the component.

Type

"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"

Default

"gray"

containerRef

Description

Ref for resizable container element.

Type

type ONLY_FOR_FORMAT = | ((instance: HTMLDivElement | null) => void) | MutableRefObject<HTMLDivElement | null>

controlRef

Description

Ref of the resizable item callback.

Type

RefObject<ResizableGroupControl>

direction

Description

The direction of the resizable.

Type

ResizableDirection

Default

horizontal

groupProps

Description

Props for resizable component.

Type

ResizableGroupProps

isDisabled

Description

If true, the resizable trigger will be disabled.

Type

boolean

keyboardStep

Description

Unit to resize by keyboard operation.

Type

number

Default

10

onLayout

Description

The callback invoked when resizable items are resized.

Type

PanelGroupOnLayout

size

Description

The size of the Resizable.

Type

string

storage

Description

A callback that gets and sets a value in custom storage.

Type

PanelGroupStorage

storageKey

Description

Key of value saved in storage. By default, it is saved to local storage.

Type

string

variant

Description

The variant of the Resizable.

Type

"border" | "spacer" | "unstyled"

Default

"border"

ResizableItemProps

as

Type

keyof HTMLElementTagNameMap

collapsedSize

Description

The collapsed size of the resizable item.

Type

number

collapsible

Description

If true, the resizable item can be collapsed.

Type

boolean

Default

false

containerProps

Description

Props for resizable item container element.

Type

Omit<HTMLUIProps, "as"> & ResizableItemProps

controlRef

Description

Ref of the resizable item callback.

Type

RefObject<ResizableItemControl>

defaultSize

Description

The initial size of the resizable item.

Type

number

id

Description

id assigned to resizable item element.

Type

string

innerRef

Description

Ref for resizable item inner element.

Type

type ONLY_FOR_FORMAT = | ((instance: HTMLDivElement | null) => void) | MutableRefObject<HTMLDivElement | null>

maxSize

Description

The maximum allowed value of the resizable item.

Type

number

minSize

Description

The minimum allowed value of the resizable item.

Type

number

onCollapse

Description

The callback invoked when resizable item are collapsed.

Type

() => void

onExpand

Description

The callback invoked when resizable item are expanded.

Type

() => void

onResize

Description

The callback invoked when resizable item are resized.

Type

(size: number, prevSize: number | undefined) => void

order

Description

Order for the resizable item.

Type

number

ResizableTriggerIconProps

size

Deprecated

Description

The CSS font-size property.

Deprecated

Use fontSize instead.

Type

UIValue<number | "small" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "large" | "medium" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | ... 17 more ... | "xs">

ResizableTriggerProps

as

Type

keyof HTMLElementTagNameMap

icon

Description

The resizable trigger icon to use.

Type

ReactElement<any, string | JSXElementConstructor<any>>

iconProps

Description

Props for resizable trigger icon component.

Type

HTMLUIProps

id

Description

id assigned to resizable trigger element.

Type

string

isDisabled

Description

If true, the resizable trigger will be disabled.

Type

boolean

Default

false

Edit this page on GitHub

PreviousReorderNextDockable