组件 · 布局
Resizable 可调整分栏
用于用户调整侧栏、编辑区与预览区比例；组合 PanelGroup、Panel、Handle，尺寸按百分比设置，保留明确容器高度与键盘操作。
何时使用
适合编辑器、预览区、侧栏等需要用户调整空间比例的布局。固定比例展示可直接使用 Flex。当前实现包装实际安装的 react-resizable-panels 3.0.6，不是 Ant Design Splitter API。
引入
从 @selrux/ui/resizable 引入 ResizablePanelGroup、ResizablePanel、ResizableHandle。Props 类型由同一公开入口导出。示例的布局与文本分别使用 @selrux/ui/flex、@selrux/ui/typography，按钮使用 @selrux/ui/button。
在有明确宽高的容器中按 Panel → Handle → Panel 顺序放入 PanelGroup。direction 必填，值为 horizontal 或 vertical。垂直分栏必须获得可计算的高度；示例使用固定 blockSize，应用可改为父级明确高度。
尺寸由底层面板组管理；defaultSize 是初始值，不是受控 size。onLayout 接收百分比数组，Panel 的 onResize(size, prevSize) 接收实际尺寸及可空的上次尺寸。基础示例通过改变 React key 重建布局以应用预设，会重置子树状态；复杂业务应先评估状态保存策略。
演练场
代码演示
水平分栏
垂直分栏
尺寸约束与折叠
侧栏占比：30%；范围 20–60%，可折叠到 0%
禁用手柄
API
ResizableHandle
主题化拖动手柄。
ts
(props: ResizableHandleProps) => JSX.Element| 属性 | 类型 | 可选 | 默认值 / 证据 | 说明 | 来源 |
|---|---|---|---|---|---|
| withHandle | boolean | 是 | 未声明；见说明/约束 | 是否渲染可视拖动手柄装饰。 | headless: @selrux/headless/dist/types/components/resizable/resizable-props.d.ts |
| className | string | 是 | 未声明；见说明/约束 | react-native: @types/react/index.d.ts | |
| aria-label | string | 是 | 未声明；见说明/约束 | Defines a string value that labels the current element. | react-native: @types/react/index.d.ts |
| disabled | boolean | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelResizeHandle.d.ts | |
| hitAreaMargins | { coarse: number; fine: number; } | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelResizeHandle.d.ts | |
| id | null | string | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelResizeHandle.d.ts | |
| onBlur | () => void | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelResizeHandle.d.ts | |
| onClick | () => void | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelResizeHandle.d.ts | |
| onDragging | (isDragging: boolean) => void | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelResizeHandle.d.ts | |
| onFocus | () => void | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelResizeHandle.d.ts | |
| onPointerDown | () => void | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelResizeHandle.d.ts | |
| onPointerUp | () => void | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelResizeHandle.d.ts | |
| tagName | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelResizeHandle.d.ts |
其余 270 个 React 原生属性按继承汇总；关键原生属性已展开。
ResizableHandleProps
带样式手柄。
ts
HHandle| 属性 | 类型 | 可选 | 默认值 / 证据 | 说明 | 来源 |
|---|---|---|---|---|---|
| withHandle | boolean | 是 | 未声明；见说明/约束 | 是否渲染可视拖动手柄装饰。 | headless: @selrux/headless/dist/types/components/resizable/resizable-props.d.ts |
| className | string | 是 | 未声明；见说明/约束 | react-native: @types/react/index.d.ts | |
| aria-label | string | 是 | 未声明；见说明/约束 | Defines a string value that labels the current element. | react-native: @types/react/index.d.ts |
| disabled | boolean | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelResizeHandle.d.ts | |
| hitAreaMargins | { coarse: number; fine: number; } | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelResizeHandle.d.ts | |
| id | null | string | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelResizeHandle.d.ts | |
| onBlur | () => void | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelResizeHandle.d.ts | |
| onClick | () => void | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelResizeHandle.d.ts | |
| onDragging | (isDragging: boolean) => void | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelResizeHandle.d.ts | |
| onFocus | () => void | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelResizeHandle.d.ts | |
| onPointerDown | () => void | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelResizeHandle.d.ts | |
| onPointerUp | () => void | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelResizeHandle.d.ts | |
| tagName | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelResizeHandle.d.ts |
其余 270 个 React 原生属性按继承汇总；关键原生属性已展开。
ResizablePanel
主题化面板。
ts
(props: ResizablePanelProps) => JSX.Element| 属性 | 类型 | 可选 | 默认值 / 证据 | 说明 | 来源 |
|---|---|---|---|---|---|
| onClick | MouseEventHandler<HTMLObjectElement | HTMLElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLButtonElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLInputElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement> | 是 | 未声明；见说明/约束 | react-native: @types/react/index.d.ts | |
| className | string | 是 | 未声明；见说明/约束 | react-native: @types/react/index.d.ts | |
| aria-label | string | 是 | 未声明；见说明/约束 | Defines a string value that labels the current element. | react-native: @types/react/index.d.ts |
| collapsedSize | number | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/Panel.d.ts | |
| collapsible | boolean | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/Panel.d.ts | |
| defaultSize | number | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/Panel.d.ts | |
| id | string | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/Panel.d.ts | |
| maxSize | number | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/Panel.d.ts | |
| minSize | number | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/Panel.d.ts | |
| onCollapse | () => void | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/Panel.d.ts | |
| onExpand | () => void | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/Panel.d.ts | |
| onResize | (size: number, prevSize: number | undefined) => void | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/Panel.d.ts | |
| order | number | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/Panel.d.ts | |
| tagName | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/Panel.d.ts |
其余 274 个 React 原生属性按继承汇总；关键原生属性已展开。
ResizablePanelGroup
主题化可调整面板组。
ts
(props: ResizablePanelGroupProps) => JSX.Element| 属性 | 类型 | 可选 | 默认值 / 证据 | 说明 | 来源 |
|---|---|---|---|---|---|
| direction | "horizontal" | "vertical" | 否 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelGroup.d.ts | |
| onClick | MouseEventHandler<keyof HTMLElementTagNameMap> | 是 | 未声明；见说明/约束 | react-native: @types/react/index.d.ts | |
| className | string | 是 | 未声明；见说明/约束 | react-native: @types/react/index.d.ts | |
| aria-label | string | 是 | 未声明；见说明/约束 | Defines a string value that labels the current element. | react-native: @types/react/index.d.ts |
| autoSaveId | null | string | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelGroup.d.ts | |
| id | null | string | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelGroup.d.ts | |
| keyboardResizeBy | null | number | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelGroup.d.ts | |
| onLayout | null | ((layout: number[]) => void) | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelGroup.d.ts | |
| storage | { getItem(name: string): string | null; setItem(name: string, value: string): void; } | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelGroup.d.ts | |
| tagName | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelGroup.d.ts |
其余 274 个 React 原生属性按继承汇总；关键原生属性已展开。
ResizablePanelGroupProps
带样式面板组。
ts
Omit<React.HTMLAttributes<keyof HTMLElementTagNameMap>, "id"> & { autoSaveId?: string | null; className?: string; direction: Direction; id?: string | null; keyboardResizeBy?: number | null; onLayout?: PanelGroupOnLayout | null; storage?: PanelGroupStorage; style?: React.CSSProperties; tagName?: keyof HTMLElementTagNameMap; dir?: "auto" | "ltr" | "rtl" | undefined; } & { children?: React.ReactNode | undefined; }| 属性 | 类型 | 可选 | 默认值 / 证据 | 说明 | 来源 |
|---|---|---|---|---|---|
| direction | "horizontal" | "vertical" | 否 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelGroup.d.ts | |
| onClick | MouseEventHandler<keyof HTMLElementTagNameMap> | 是 | 未声明；见说明/约束 | react-native: @types/react/index.d.ts | |
| className | string | 是 | 未声明；见说明/约束 | react-native: @types/react/index.d.ts | |
| aria-label | string | 是 | 未声明；见说明/约束 | Defines a string value that labels the current element. | react-native: @types/react/index.d.ts |
| autoSaveId | null | string | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelGroup.d.ts | |
| id | null | string | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelGroup.d.ts | |
| keyboardResizeBy | null | number | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelGroup.d.ts | |
| onLayout | null | ((layout: number[]) => void) | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelGroup.d.ts | |
| storage | { getItem(name: string): string | null; setItem(name: string, value: string): void; } | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelGroup.d.ts | |
| tagName | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/PanelGroup.d.ts |
其余 274 个 React 原生属性按继承汇总；关键原生属性已展开。
ResizablePanelProps
带样式面板。
ts
Omit<React.HTMLAttributes<HTMLObjectElement | HTMLElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLButtonElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLInputElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement>, "id" | "onResize"> & { className?: string; collapsedSize?: number | undefined; collapsible?: boolean | undefined; defaultSize?: number | undefined; id?: string; maxSize?: number | undefined; minSize?: number | undefined; onCollapse?: PanelOnCollapse; onExpand?: PanelOnExpand; onResize?: PanelOnResize; order?: number; style?: object; tagName?: keyof HTMLElementTagNameMap | undefined; } & { children?: React.ReactNode | undefined; }| 属性 | 类型 | 可选 | 默认值 / 证据 | 说明 | 来源 |
|---|---|---|---|---|---|
| onClick | MouseEventHandler<HTMLObjectElement | HTMLElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLButtonElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLInputElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement> | 是 | 未声明；见说明/约束 | react-native: @types/react/index.d.ts | |
| className | string | 是 | 未声明；见说明/约束 | react-native: @types/react/index.d.ts | |
| aria-label | string | 是 | 未声明；见说明/约束 | Defines a string value that labels the current element. | react-native: @types/react/index.d.ts |
| collapsedSize | number | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/Panel.d.ts | |
| collapsible | boolean | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/Panel.d.ts | |
| defaultSize | number | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/Panel.d.ts | |
| id | string | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/Panel.d.ts | |
| maxSize | number | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/Panel.d.ts | |
| minSize | number | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/Panel.d.ts | |
| onCollapse | () => void | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/Panel.d.ts | |
| onExpand | () => void | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/Panel.d.ts | |
| onResize | (size: number, prevSize: number | undefined) => void | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/Panel.d.ts | |
| order | number | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/Panel.d.ts | |
| tagName | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | 是 | 未声明；见说明/约束 | dependency-business: react-resizable-panels/dist/declarations/src/Panel.d.ts |
其余 274 个 React 原生属性按继承汇总；关键原生属性已展开。
defaultSize、minSize、maxSize、collapsedSize、keyboardResizeBy 的单位是百分比数值，不接收 px 字符串。示例明确提供全部初始比例并使总和为 100；最小值与最大值应允许整体布局达到 100%。
collapsible 允许面板收缩到 collapsedSize；折叠值应小于 minSize。条件渲染面板时设置稳定 id 与 order。autoSaveId 启用持久化，storage 需提供同步 getItem(name) / setItem(name, value)；SSR 应显式设置初始尺寸并自行验证持久化恢复。
withHandle 只控制手柄视觉标记，disabled 控制手柄交互。hitAreaMargins 提供 coarse/fine 两种输入的命中范围；扩大命中范围不改变分隔线宽度。未知默认值在 API 中保持“未声明”，不能由可选属性推断 false。
当前 UI Props 未公开底层 imperative ref 类型，不推荐深层 import 或把 ref、orientation、size、Splitter.Panel 当作当前 API。类型来源路径只用于追溯，不是应用导入路径。
无障碍
为每个 Handle 提供具体 aria-label。启用的手柄可用 Tab 聚焦，水平使用左/右、垂直使用上/下方向键；Home/End 调整到约束边界。相邻前置面板允许折叠时 Enter 可折叠/展开。保留可见焦点，禁用手柄不参与调整。
拖拽以外还应给出适合业务的点击调整入口。基础示例提供恢复与平均分配按钮；键盘步长明确设置为 5%。此样板的桌面/窄屏检查不代表所有辅助技术或触摸设备已验证。
文档快照：edbed4e3949112ae4797ba611a523984