> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ResizeHandle

> Redimensionează un panou prin glisarea indicatorului sau folosind comenzile de la tastatură.

## Prezentare generală

`ResizeHandle` gestionează o dimensiune numerică și expune un separator care poate primi focalizarea. Aplicația aplică acea dimensiune panoului; mânerul nu redimensionează automat un alt element.

**Light**

[Exemplu ResizeHandle (light)](https://storybook.twenty.com/iframe.html?id=ui-layout-resizehandle--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Exemplu ResizeHandle (dark)](https://storybook.twenty.com/iframe.html?id=ui-layout-resizehandle--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-layout-resizehandle--display)

## Utilizare

Folosește `edge` pentru o margine a panoului sau `axis="y"` pentru redimensionarea pe înălțime în linie și `axis="x"` pentru redimensionarea pe lățime în linie. Atribuie mânerului un nume accesibil specific și utilizează `aria-controls` pentru a identifica panoul.

```tsx theme={null}
import { useId, useState } from 'react';
import { ResizeHandle } from 'twenty-ui/primitives/layout';
import { Card } from 'twenty-ui/primitives/surfaces';
import { Text } from 'twenty-ui/primitives/typography';

export const ResizableNotes = () => {
  const panelId = useId();
  const [height, setHeight] = useState(150);

  return (
    <Card.Root style={{ width: 300, maxWidth: '100%' }}>
      <Text
        id={panelId}
        style={{
          height,
          overflow: 'auto',
          padding: 16,
          boxSizing: 'border-box',
        }}
      >
        <Text
          style={{
            color: 'var(--t-font-color-primary)',
            fontWeight: 'var(--t-font-weight-medium)',
          }}
        >
          Record notes
        </Text>
        <Text style={{ marginTop: 8, lineHeight: 1.5 }}>
          Follow up with Morgan about the proposal. Share the revised timeline
          before Friday.
        </Text>
      </Text>
      <Text style={{ padding: 4 }}>
        <ResizeHandle
          axis="y"
          defaultValue={150}
          onValueChange={setHeight}
          min={50}
          max={500}
          aria-label="Resize notes height"
          aria-controls={panelId}
        />
      </Text>
    </Card.Root>
  );
};
```

Mânerul își gestionează propria valoare. `onValueChange` copiază cea mai recentă dimensiune în aspectul panoului fără a controla mânerul. `defaultValue` setează doar dimensiunea inițială.

## Stare controlată

```tsx theme={null}
import { useId, useState } from 'react';
import { ResizeHandle } from 'twenty-ui/primitives/layout';
import { Card } from 'twenty-ui/primitives/surfaces';
import { Text } from 'twenty-ui/primitives/typography';

export const ResizableNotes = () => {
  const panelId = useId();
  const [height, setHeight] = useState(150);

  return (
    <Card.Root style={{ width: 300, maxWidth: '100%' }}>
      <Text
        id={panelId}
        style={{
          height,
          overflow: 'auto',
          padding: 16,
          boxSizing: 'border-box',
        }}
      >
        <Text
          style={{
            color: 'var(--t-font-color-primary)',
            fontWeight: 'var(--t-font-weight-medium)',
          }}
        >
          Record notes
        </Text>
        <Text style={{ marginTop: 8, lineHeight: 1.5 }}>
          Follow up with Morgan about the proposal. Share the revised timeline
          before Friday.
        </Text>
      </Text>
      <Text style={{ padding: 4 }}>
        <ResizeHandle
          axis="y"
          value={height}
          onValueChange={setHeight}
          min={50}
          max={500}
          aria-label="Resize notes height"
          aria-controls={panelId}
        />
      </Text>
    </Card.Root>
  );
};
```

Aplicația gestionează valoarea și o poate actualiza din alte controale. Reflectați modificările în timp real în `value`; utilizați `onValueCommitted` pentru a salva dimensiunea finală. Păstrați separate `value` și `defaultValue` și mențineți același mod de gestionare pe toată durata de viață a componentei.

## Marginile și spațiile dintre panouri

`edge="left"`, `"right"`, `"top"` sau `"bottom"` determină atât axa, cât și direcția fizică de creștere. Mișcarea spre stânga mărește o margine stângă, mișcarea în sus mărește o margine superioară, iar opusul se aplică marginilor din dreapta și de jos. Acest comportament rămâne același în conținutul de la dreapta la stânga. Utilizați fie `edge`, fie `axis` și `direction`.

Cu `edge`, poziționarea are implicit valoarea `"edge"`. Plasați mânerul într-un panou cu `position: 'relative'` pentru a-l poziționa de-a lungul acelei margini. `placement="inline"` îl păstrează în fluxul normal. Utilizați `placement="gap"` între panourile surori și setați lățimea sau înălțimea acestuia prin `style` atunci când aspectul necesită un spațiu. Mânerele pentru spații nu au implicit nicio zonă de prindere vizibilă.

```tsx theme={null}
import { useId, useState } from 'react';
import { ResizeHandle } from 'twenty-ui/primitives/layout';
import { Card } from 'twenty-ui/primitives/surfaces';
import { Text } from 'twenty-ui/primitives/typography';

export const ResizableDetails = ({
  saveWidth,
}: {
  saveWidth: (value: number) => void;
}) => {
  const detailsId = useId();
  const [width, setWidth] = useState(380);

  return (
    <div style={{ display: 'flex', height: 200 }}>
      <Card.Root style={{ flex: 1 }}>
        <Text>Activity</Text>
      </Card.Root>
      <ResizeHandle
        edge="left"
        placement="gap"
        value={width}
        onValueChange={setWidth}
        onValueCommitted={saveWidth}
        min={280}
        max={800}
        style={{ width: 12 }}
        aria-label="Resize details"
        aria-controls={detailsId}
      />
      <Card.Root id={detailsId} style={{ width }}>
        <Text>Details</Text>
      </Card.Root>
    </div>
  );
};
```

**Light**

[Exemplu de margine a panoului ResizeHandle (light)](https://storybook.twenty.com/iframe.html?id=ui-layout-resizehandle-panels--documentation\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Exemplu de margine a panoului ResizeHandle (dark)](https://storybook.twenty.com/iframe.html?id=ui-layout-resizehandle-panels--documentation\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-layout-resizehandle-panels--documentation)

**Light**

[Exemplu de spațiu între panouri ResizeHandle (light)](https://storybook.twenty.com/iframe.html?id=ui-layout-resizehandle-panels--gap\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Exemplu de spațiu între panouri ResizeHandle (dark)](https://storybook.twenty.com/iframe.html?id=ui-layout-resizehandle-panels--gap\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-layout-resizehandle-panels--gap)

Aplicația gestionează aspectul, dimensiunea salvată, starea de restrângere și destinația focalizării atunci când restrângerea elimină mânerul. Utilizați `onActivate` pentru o acțiune opțională de restrângere.

## Tastatură și limite

Pentru `axis="y"`, Săgeată în jos mărește dimensiunea, iar Săgeată în sus o micșorează. Pentru `axis="x"`, Dreapta crește, iar Stânga scade în conținutul de la stânga la dreapta; direcțiile se inversează în [DirectionProvider](https://docs.twenty.com/ro/ui/primitives/layout/direction-provider.md) cu `direction="rtl"`.

Tastele săgeată folosesc `step`, care are implicit valoarea `10`. Home trece la `min`, iar End trece la `max`. Tastele apăsate împreună cu Alt, Control sau Meta sunt ignorate. Glisarea indicatorului utilizează deplasarea în pixeli și nu se aliniază la `step`. Ambele interacțiuni rămân în limite. Apăsările cu indicatorul nu mută focalizarea; utilizatorii tastaturii ajung la mâner cu Tab. `disabled` împiedică redimensionarea și elimină mânerul din ordinea de navigare cu Tab.

Orientarea separatorului descrie marginea de separare: orizontală pentru redimensionarea înălțimii și verticală pentru redimensionarea lățimii.

## Direcții fizice și zoom

Setați `direction="normal"` sau `direction="reverse"` atunci când creșterea dimensiunii trebuie să urmeze o direcție fizică fixă, indiferent de direcția textului. Normal crește odată cu mișcarea spre dreapta sau în jos. Invers crește odată cu mișcarea spre stânga sau în sus. Omiteți `direction` pentru a păstra comportamentul privind direcția textului descris mai sus.

`scale` acceptă un factor de zoom pozitiv sau o funcție care returnează unul. Mânerul îl eșantionează la apăsarea indicatorului și împarte mișcarea indicatorului la acea valoare. Pașii tastaturii rămân neschimbați.

## Ciclul de viață al gestului

`onValueChange` raportează valori în timp real. `onValueCommitted` raportează valoarea finală după o glisare reușită cu indicatorul sau o modificare efectivă de la tastatură. Tastele Home, End și săgeată confirmă imediat atunci când modifică dimensiunea.

`onResizeStart` primește primul candidat limitat după ce indicatorul depășește `dragThreshold`. Pragul este implicit `5` cu `edge` și `0` în caz contrar, măsurat în pixeli fizici. `onResizeEnd` primește `{ cancelled, value }` pentru o glisare începută. Escape, anularea indicatorului, pierderea capturii indicatorului și demontarea anulează gestul fără confirmare; dezactivarea mânerului îl anulează la următorul său eveniment al indicatorului. Anularea apelează `onValueChange` cu valoarea inițială, limitată la limitele curente. `onResizeEnd` primește acea valoare restaurată.

Furnizați `onActivate` pentru a gestiona un clic fără glisare, Enter sau Space. Depășirea pragului împiedică activarea prin clicul ulterior al indicatorului, chiar și atunci când indicatorul revine la poziția sa inițială.

Gestionarele native rulează înaintea interacțiunii mânerului. Apelarea `preventDefault()` în `onPointerDown` sau `onKeyDown` omite acea interacțiune. Prevenirea `onPointerMove` omite doar acea actualizare și menține gestul activ. Prevenirea `onPointerUp` anulează tragerea, restabilește valoarea limitată inițială și omite `onValueCommitted`. Anularea indicatorului și pierderea capturării încheie în continuare gestul.

## Mâner personalizat

`ref`, atribute native, `className`, `style` și gestionarele de evenimente native vizează rădăcina separatorului, implicit un `div`. Referința nu vizează panoul redimensionat sau mânerul vizibil.

`children` înlocuiește indicatorul de prindere vizibil, iar `children={null}` îl ascunde; nu înlocuiește comportamentul separatorului. `render` poate înlocui elementul rădăcină, iar referința vizează apoi acea înlocuire. Învelișurile personalizate trebuie să [redirecționeze props și ref furnizate](https://docs.twenty.com/ro/ui/primitives/overview#custom-components), astfel încât focalizarea, capturarea indicatorului, gestionarii de la tastatură și atributele de accesibilitate să ajungă la același element.

## Proprietăți

**axis** `"x" | "y"` (default: y without edge)

Pointer movement axis without `edge`: `y` for height or `x` for width.

**defaultValue** `number | (readonly string[] & number)` (default: 150)

Initial size when the handle owns its state.

**direction** `"normal" | "reverse"`

Physical increasing direction. Omit to follow the horizontal text direction; use `normal` or `reverse` for a fixed physical edge.

**disabled** `boolean` (default: false)

Disables resizing and removes the handle from the tab order.

**dragThreshold** `number` (default: 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.

**edge** `"bottom" | "left" | "right" | "top"`

Physical panel edge. Determines the movement axis and increasing direction, independently of text direction.

**max** `number` (default: 500)

Maximum allowed size.

**min** `number` (default: 50)

Minimum allowed size.

**onActivate** `(() =\> void)`

Called for a click without dragging, Enter, or Space.

**onResizeEnd** `((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.

**onResizeStart** `((value: number) =\> void)`

Called once with the first bounded drag value after the threshold is crossed.

**onValueChange** `((value: number) =\> void)`

Called with the bounded size during pointer or keyboard interaction and with the restored value on cancellation.

**onValueCommitted** `((value: number) =\> void)`

Called with the final size after a successful drag or an effective keyboard size change. Cancellation does not commit.

**placement** `"edge" | "gap" | "inline"` (default: 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.

**render** `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.

**scale** `number | (() =\> number)` (default: 1)

Pointer scale or resolver sampled at pointer down. Movement is divided by this positive scale; keyboard steps are unchanged.

**step** `number` (default: 10)

Keyboard arrow increment. Pointer movement uses the pixel delta.

**value** `number`

Current controlled size. Update it in `onValueChange` and apply it to the element being resized.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.