反应-可逆小板
可调整面板组/放电的响应组件
import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
<PanelGroup autoSaveId="example" direction="horizontal">
<Panel defaultSize={25}>
<SourcesExplorer />
</Panel>
<PanelResizeHandle />
<Panel>
<SourceViewer />
</Panel>
<PanelResizeHandle />
<Panel defaultSize={25}>
<Console />
</Panel>
</PanelGroup>
如果你喜欢这个项目的话,.. 成为提案人 或 ☕ 给我买杯咖啡
道具
PanelGroup
| 道具 | 类型 | 说明 |
|---|---|---|
autoSaveId | ?string | 用于通过自动保存组安排的独特 id localStorage |
children | ReactNode | 任意反应元素 |
className | ?string | 要附加到根元素的类名 |
direction | "horizontal" | "vertical" | 团体定向 |
disablePointerEventsDuringResize | ?boolean = false | 禁用内部指针事件 Panels 调整大小时 2个 |
id | ?string | 组 ID; 返回到 useId 未提供时 |
onLayout | ?(sizes: number[]) => void | 当组布局改变时调用 |
storage | ?PanelGroupStorage | 自定义存储 API; 默认为 localStorage 1个 |
style | ?CSSProperties | 要附加到根元素的 CSS 样式 |
tagName | ?string = "div" | 根元素的 HTML 元素标签名称 |
1个: 存储 API 必须定义如下 同步 方法:
getItem: (name:string) => stringsetItem: (name: string, value: string) => void
2个: 这种行为默认被禁用, 因为它可以干扰滚动条样式, 但在边框中有用 Panel 包含一个 <iframe>
PanelGroup 组件还暴露了手动重塑的必需的 API :
| 方法 | 说明 |
|---|---|
setLayout(panelSizes: number[]) | 将面板组大小调整到指定的 面板大小 (单位:千美元)[1 - 100, ...]) (中文(简体) ). |
Panel
| 道具 | 类型 | 说明 |
|---|---|---|
children | ReactNode | 任意反应元素 |
className | ?string | 要附加到根元素的类名 |
collapsedSize | ?number=0 | 面板应该倒塌到这个大小 |
collapsible | ?boolean=false | 扩大规模后,小组应倒闭 minSize |
defaultSize | ?number | 面板的初始大小(1-100之间的数值) |
id | ?string | 面板 id( 组内的独特性); 回到 useId 未提供时 |
maxSize | ?number = 100 | 最大允许面板大小(1-100之间的数值);默认为 100 |
minSize | ?number = 10 | 面板最小允许大小(数值在1-100之间);默认为 10 |
onCollapse | ?(collapsed: boolean) => void | 当面板倒塌时呼叫; collapsed 反映新状态的布尔参数 |
onResize | ?(size: number) => void | 调整面板大小时调用; size 参数是1-100之间的数值. 1个 |
order | ?number | 集团内小组的顺序;有条件的小组所需 |
style | ?CSSProperties | 要附加到根元素的 CSS 样式 |
tagName | ?string = "div" | 根元素的 HTML 元素标签名称 |
1个: 如果有的话 Panel 有一个 onResize 调回, 调回 order 应当为所有人提供道具 Panel编号.
Panel 组件还暴露了手动重塑的必需的 API :
| 方法 | 说明 |
|---|---|
collapse() | 如果面板是 collapsible完全崩溃. |
expand() | 如果当前是面板 崩溃,将其扩展至最近的规模. |
getCollapsed(): boolean | 回返 true 如果面板是当前 崩溃 (单位:千美元)size === 0) (中文(简体) ). |
getSize(): number | 返回最近承诺的面板大小的百分比(1 - 100) (中文(简体) ). |
resize(percentage: number) | 将面板大小调整到指定的 百分比 (单位:千美元)1 - 100) (中文(简体) ). |
PanelResizeHandle
| 道具 | 类型 | 说明 |
|---|---|---|
children | ?ReactNode | 自定义拖曳 UI; 可以是任意反应元素 |
className | ?string | 要附加到根元素的类名 |
disabled | ?boolean | 禁用拖动手柄 |
id | ?string | 调整手柄 ID( 组内的独特性); 返回到 useId 未提供时 |
onDragging | ?(isDragging: boolean) => void | 当组布局改变时调用 |
style | ?CSSProperties | 要附加到根元素的 CSS 样式 |
tagName | ?string = "div" | 根元素的 HTML 元素标签名称 |