Resumen
ResizeHandle gestiona un tamaño numérico y expone un separador que puede recibir el foco. La aplicación aplica ese tamaño al panel; el controlador no cambia automáticamente el tamaño de otro elemento.
”Uso”
Usaedge para un límite de panel, o axis="y" para el cambio de tamaño de altura en línea y axis="x" para el cambio de tamaño de anchura en línea. Asigna al controlador un nombre accesible específico y usa aria-controls para identificar el panel.
onValueChange copia el tamaño más reciente al diseño del panel sin controlar el controlador. defaultValue solo establece el tamaño inicial.
Estado controlado
value; use onValueCommitted para guardar el tamaño final. Mantenga value y defaultValue separados y conserve el mismo modo de propiedad durante toda la vida útil del componente.
Bordes y espacios entre paneles
edge="left", "right", "top" o "bottom" determina tanto el eje como la dirección física de aumento. El movimiento hacia la izquierda aumenta un borde izquierdo, el movimiento hacia arriba aumenta un borde superior, y lo contrario se aplica a los bordes derecho e inferior. Este comportamiento se mantiene igual en contenido de derecha a izquierda. Use edge o bien axis y direction.
Con edge, la ubicación predeterminada es "edge". Coloque el controlador dentro de un panel con position: 'relative' para situarlo a lo largo de ese límite. placement="inline" lo mantiene en el flujo normal. Use placement="gap" entre paneles hermanos y establezca su ancho o altura mediante style cuando el diseño necesite un espacio. Los controladores de espacio no tienen un agarre visible de forma predeterminada.
onActivate para una acción opcional de contraer.
Teclado y límites
Paraaxis="y", Abajo aumenta el tamaño y Arriba lo disminuye. Para axis="x", Derecha aumenta e Izquierda disminuye en contenido de izquierda a derecha; las direcciones se invierten con DirectionProvider con direction="rtl".
Las teclas de flecha usan step, cuyo valor predeterminado es 10. Inicio se mueve a min y Fin se mueve a max. Se ignoran las teclas pulsadas con Alt, Control o Meta. El arrastre con el puntero usa el movimiento en píxeles y no se ajusta a step. Ambas interacciones se mantienen dentro de los límites. Las pulsaciones del puntero no mueven el foco; los usuarios de teclado llegan al controlador con Tab. disabled impide cambiar el tamaño y elimina el controlador del orden de tabulación.
La orientación del separador describe el borde divisorio: horizontal para cambiar el tamaño de la altura y vertical para cambiar el tamaño del ancho.
Direcciones físicas y zoom
Establezcadirection="normal" o direction="reverse" cuando el aumento de tamaño deba seguir una dirección física fija, independientemente de la dirección del texto. Normal aumenta con el movimiento hacia la derecha o hacia abajo. Inverso aumenta con el movimiento hacia la izquierda o hacia arriba. Omita direction para conservar el comportamiento de dirección del texto descrito anteriormente.
scale acepta un factor de zoom positivo o una función que devuelva uno. El controlador lo toma al presionar el puntero y divide el movimiento del puntero por ese valor. Los pasos del teclado permanecen sin cambios.
Ciclo de vida del gesto
onValueChange informa de valores en tiempo real. onValueCommitted informa del valor final después de un arrastre exitoso con el puntero o un cambio efectivo con el teclado. Las teclas Inicio, Fin y de flecha confirman inmediatamente cuando cambian el tamaño.
onResizeStart recibe el primer candidato dentro de los límites después de que el puntero supera dragThreshold. El umbral predeterminado es 5 con edge y 0 en caso contrario, medido en píxeles físicos. onResizeEnd recibe { cancelled, value } para un arrastre iniciado. Escape, la cancelación del puntero, la pérdida de captura del puntero y el desmontaje cancelan el gesto sin confirmar; deshabilitar el controlador lo cancela en su siguiente evento de puntero. La cancelación llama a onValueChange con el valor inicial, limitado a los límites actuales. onResizeEnd recibe ese valor restaurado.
Proporcione onActivate para gestionar un clic sin arrastrar, Intro o Espacio. Superar el umbral evita que el siguiente clic del puntero se active, incluso cuando el puntero vuelve a su posición inicial.
Los controladores nativos se ejecutan antes de la interacción del controlador. Llamar a preventDefault() en onPointerDown o onKeyDown omite esa interacción. Evitar onPointerMove omite solo esa actualización y mantiene activo el gesto. Evitar onPointerUp cancela el arrastre, restaura el valor limitado inicial y omite onValueCommitted. La cancelación del puntero y la pérdida de captura siguen finalizando el gesto.
Controlador personalizado
ref, los atributos nativos, className, style y los controladores de eventos nativos se dirigen al elemento raíz del separador, un div de forma predeterminada. El ref no se dirige al panel redimensionado ni al tirador visible.
children reemplaza el agarre visible y children={null} lo oculta; no reemplaza el comportamiento del separador. render puede reemplazar el elemento raíz y el ref se dirige entonces a ese reemplazo. Los contenedores personalizados deben reenviar las props y la ref proporcionadas para que el foco, la captura del puntero, los controladores de teclado y los atributos de accesibilidad lleguen al mismo elemento.
”Props”
"x" | "y"
predeterminado:"y without edge"
Pointer movement axis without
edge: y for height or x for width.number | (readonly string[] & number)
predeterminado:"150"
Initial size when the handle owns its state.
"normal" | "reverse"
Physical increasing direction. Omit to follow the horizontal text direction; use
normal or reverse for a fixed physical edge.boolean
predeterminado:"false"
Disables resizing and removes the handle from the tab order.
number
predeterminado:"5 with edge; 0 otherwise"
Physical pointer distance required before resizing starts. Movement below the threshold remains a click. Defaults to 5 with
edge and 0 otherwise."bottom" | "left" | "right" | "top"
Physical panel edge. Determines the movement axis and increasing direction, independently of text direction.
number
predeterminado:"500"
Maximum allowed size.
number
predeterminado:"50"
Minimum allowed size.
(() => void)
Called for a click without dragging, Enter, or Space.
((details: { cancelled: boolean; value: number; }) => void)
Called after a started drag ends, with its final value and whether it was cancelled. Cancellation restores the starting value within the current bounds.
((value: number) => void)
Called once with the first bounded drag value after the threshold is crossed.
((value: number) => void)
Called with the bounded size during pointer or keyboard interaction and with the restored value on cancellation.
((value: number) => void)
Called with the final size after a successful drag or an effective keyboard size change. Cancellation does not commit.
"edge" | "gap" | "inline"
predeterminado:"edge with edge; inline otherwise"
Layout mode:
inline stays in normal flow, edge positions the handle on the panel edge, and gap sits between panels. Defaults to edge when edge is set and inline otherwise.ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>
Allows you to replace the component’s HTML element
with a different tag, or compose it with another component.Accepts a
ReactElement or a function that returns the element to render.number | (() => number)
predeterminado:"1"
Pointer scale or resolver sampled at pointer down. Movement is divided by this positive scale; keyboard steps are unchanged.
number
predeterminado:"10"
Keyboard arrow increment. Pointer movement uses the pixel delta.
number
Current controlled size. Update it in
onValueChange and apply it to the element being resized.