【React】Ant Design社区扩展库之分割面板:react-resizable-panels

主角:react-resizable-panels
简介:来之Ant Design官方文档社区精选组件

1、效果

分割面板应用效果

2、环境

  • react-resizable-panels: ^2.0.16
  • next: 14.1.3
  • react: ^18

3、安装

# npm
npm install react-resizable-panels

# yarn
yarn add react-resizable-panels

# pnpm
pnpm add react-resizable-panels

# bun
bun add react-resizable-panels

4、组件概述

  • PanelGroup: 布局容器
  • PanelResizeHandle: 分割线控件,无自带样式,使用classNamestyle属性自定义
  • Panel: 面板容器,其下可嵌套任何元素

5、基础用法

// file: app/test/page.tsx
"use client"

import { Card } from "antd"

// 引入基础组件
import { 
	Panel, 
	PanelGroup, 
	PanelResizeHandle
} from "react-resizable-panels";

// 给边线来点小样式
const PanelResizeHandleStyle = {
    outline: 'none',
    flex: '0 0 .25rem',
    justifyContent: 'stretch',
    alignItems: 'stretch',
    transition: 'background-color .2s linear',
    display: 'flex'
}

const TestView = function () {

    return (
        <>
            <PanelGroup direction="horizontal">
                <Panel>
                    <Card>Card Panel 1</Card>
                </Panel>
                <PanelResizeHandle style={PanelResizeHandleStyle} />
                <Panel>
                    <Card>Card Panel 1</Card>
                </Panel>
            </PanelGroup>;
        </>
    )
}

export default TestView;

6、组件Props

6.1、PanelGroup Props

属性类型描述
autoSaveId?string用于自动保存组排列的唯一 ID localStorage
childrenReactNode任意 React 元素
className?string附加到根元素的类名
direction“horizontal”“vertical”
id?string组ID;回落到useId未提供时
onLayout?(sizes: number[]) => void当组布局更改时调用
storage?PanelGroupStorage自定义存储API;默认为localStorage
style?CSSProperties附加到根元素的 CSS 样式
tagName?string = “div”根元素的 HTML 元素标签名称

①:存储API必须定义以下同步方法:

  • getItem: (name:string) => string
  • setItem: (name: string, value: string) => void

用于手动调整大小的命令式 API:

方法描述
getId(): string获取面板组的 ID
getLayout(): number[]获取面板组的当前布局( [1 - 100, ...])。
setLayout(layout: number[])将面板组大小调整为指定布局( [1 - 100, ...])

6.2、Panel Props

属性类型描述
childrenReactNode任意 React 元素
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?() => void面板折叠时调用
onExpand?() => void面板展开时调用
onResize?(size: number) => void调整面板大小时调用;size参数是 1-100 之间的数值。1
order?number小组内小组的顺序;对于具有条件渲染面板的组来说是必需的
style?CSSProperties附加到根元素的 CSS 样式
tagName?string = “div”根元素的 HTML 元素标签名称

6.3、PanelResizeHandle Props

属性类型描述
children?ReactNode自定义拖动UI;可以是任意 React 元素
className?string附加到根元素的类名
hitAreaMargins?{ coarse: number = 15; fine: number = 5; }在确定可调整大小的手柄点击检测时允许这么多余量
disabled?boolean禁用拖动手柄
id?string调整句柄 ID 的大小(组内唯一);回落到useId未提供时
onDragging?(isDragging: boolean) => void当组布局更改时调用
style?CSSProperties附加到根元素的 CSS 样式
tagName?string = “div”根元素的 HTML 元素标签名称

7、持久布局与 SSR 结合使用

默认情况下,该库用于localStorage保留布局。对于服务器渲染,当默认布局(在服务器上渲染)替换为持久布局(在 中localStorage)时,这可能会导致闪烁。
避免这种闪烁的方法是使用 cookie 来持久化布局,如下所示:

服务器组件

import ResizablePanels from "@/app/ResizablePanels";
import { cookies } from "next/headers";

export function ServerComponent() {
  const layout = cookies().get("react-resizable-panels:layout");

  let defaultLayout;
  if (layout) {
    defaultLayout = JSON.parse(layout.value);
  }

  return <ClientComponent defaultLayout={defaultLayout} />;
}

客户端组件

"use client";

import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";

export function ClientComponent({
  defaultLayout = [33, 67],
}: {
  defaultLayout: number[] | undefined;
}) {
  const onLayout = (sizes: number[]) => {
    document.cookie = `react-resizable-panels:layout=${JSON.stringify(sizes)}`;
  };

  return (
    <PanelGroup direction="horizontal" onLayout={onLayout}>
      <Panel defaultSize={defaultLayout[0]}>{/* ... */}</Panel>
      <PanelResizeHandle className="w-2 bg-blue-800" />
      <Panel defaultSize={defaultLayout[1]}>{/* ... */}</Panel>
    </PanelGroup>
  );
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/536761.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

python 如何向上取整

python向上取整 方法&#xff1a; Python match.ceil函数 ceil(x)函数是向上取整&#xff0c;即取大于等于x的最接近整数。 import math math.ceil(float(1)/2)

品牌软文怎么写?媒介盒子分享

品牌软文是品牌传播的主要方式。高质量的品牌软文能够帮助企业塑造正面的品牌形象&#xff0c;提高品牌知名度和影响力&#xff0c;扩大目标消费者范围。接下来媒介盒子就和大家聊聊&#xff1a;如何写好品牌软文。 一、 确立品牌独特点 品牌独特性是品牌能够与行业内其他品牌…

Offline RL : Efficient Planning in a Compact Latent Action Space

ICLR 2023 paper Intro 采用Transformer架构的Planning方法对马尔可夫序列重构,(et. TT)在面对高维状态动作空间&#xff0c;容易面对计算复杂度高的问题。本文提出TAP算法&#xff0c;基于Transformer的VQ-VAE&#xff0c;利用提取的状态动作在隐空间的低微特征进行Planning…

【LAMMPS学习】八、基础知识(2.4)恒温器

8. 基础知识 此部分描述了如何使用 LAMMPS 为用户和开发人员执行各种任务。术语表页面还列出了 MD 术语&#xff0c;以及相应 LAMMPS 手册页的链接。 LAMMPS 源代码分发的 examples 目录中包含的示例输入脚本以及示例脚本页面上突出显示的示例输入脚本还展示了如何设置和运行各…

【JavaWeb】Day38.MySQL概述——数据库设计-DQL(一)

数据库设计——DQL 介绍 DQL英文全称是Data Query Language(数据查询语言)&#xff0c;用来查询数据库表中的记录。 查询关键字&#xff1a;SELECT 查询操作是所有SQL语句当中最为常见&#xff0c;也是最为重要的操作。在一个正常的业务系统中&#xff0c;查询操作的使用频次…

2024妈妈杯Mathorcup数学建模竞赛选题建议

关于十四届妈妈杯题目点击链接加入群聊【2024年第十四届MathorCup数学建模】&#xff1a;http://qm.qq.com/cgi-bin/qm/qr?_wv1027&kNol416eFZyg4AFPHCZsYfGkLnEnZ8H36&authKeyo9lIFgRfnk2U%2FfYYg1AlFJd5I456CSA2M6nlvJX2qcUockIKuMHj%2BhKMP6RnPeo1&noverify0&a…

在Ubuntu上搭建Prometheus + Grafana监控系统

1.Prometheus 部署 从官网下载页面找到最新的二进制文件下载 cd ~ curl -LO https://github.com/prometheus/prometheus/releases/download/v2.51.1/prometheus-2.51.1.linux-amd64.tar.gz将文件解压到指定目录 tar xf prometheus-2.51.1.linux-amd64.tar.gz -C /usr/local为…

每天学点儿Python(5) -- 序列索引和切片

Python中&#xff0c;序列是指一块可存放多个值的连续内存空间&#xff0c;这些值按一定顺序排列&#xff0c;可通过每个值所在位置的编号&#xff08;称为索引&#xff09;访问它们。它类似于C/C中的数组或字符串&#xff0c;但又比数组或字符串强大很多 序列类型包括字符串、…

挖掘未来:私有LTE/5G网络驱动智慧矿山的自动化

私有LTE/5G网络为世界上一些最偏远的角落提供无线连接。如果没有无线通信网络&#xff0c;各行业就无法满足增加产量、降低运营成本和减少环境破坏的需求。 在本案例研究中&#xff0c;我们着眼于自动化如何改变无线网络的动态。智慧矿山要求运营商无缝集成多个系统和应用程序…

Keil #include “stm32f10x.h“报错

给我的提示 我看到懵逼了&#xff0c;我就一直在网上找各种方法&#xff0c;发现都不行&#xff0c;我就想没有找到&#xff0c;我挨个挨个去找它想要的&#xff0c;发现是有的 我就想这不是有吗&#xff0c;怎么会找不到呢 我就又想是我路径写错了&#xff1f;我就看了一下路…

【深度学习】Fine-Grained Face Swapping via Regional GAN Inversion高保真换脸范式

文章目录 代码介绍实践效果 帮助、问询 代码 https://github.com/e4s2022/e4s 介绍 Fine-Grained Face Swapping via Regional GAN Inversion 提出一种新的高保真换脸范式&#xff0c;能够保留期望的微妙几何和纹理细节。从微观面部编辑的角度重新思考换脸任务&#xff0c;基…

npm创建Vue3项目

npm创建Vue3项目 1 创建Vue项目说明 2 安装3 运行 1 创建Vue项目 创建最新版的Vue项目&#xff0c;已经不推荐使用CLI构建方式了。参考如下即可。 npm create vuelatest如果发现一直动不了&#xff0c;切换网络试一下&#xff0c;个人热点尝试一下。 按下图的选项按需引入自…

[STM32+HAL]DengFOC移植之闭环位置控制

一、源码来源 DengFOC官方文档 二、HAL库配置 1、开启硬件IIC低速模式 低速更稳定 2、PWM波开启 三、keil填写代码 1、AS5600读取编码器数值 #include "AS5600.h" #include "math.h"float angle_prev0; int full_rotations0; // full rotation trac…

OSCP靶场--Hawat

OSCP靶场–Hawat 考点(目录扫描zip文件下载java代码审计web1的sql注入写到web2的webshel) 1.nmap扫描 ## ┌──(root㉿kali)-[~/Desktop] └─# nmap 192.168.158.147 -sV -sC -Pn --min-rate 2500 -p- Starting Nmap 7.92 ( https://nmap.org ) at 2024-04-11 07:18 EDT …

性能优化-01

当看到性能指标时&#xff0c;你会首先想到什么呢&#xff1f;我相信 “高并发” 和 “响应快” 一定是最先出现在你脑海里的两个词&#xff0c;而它们也正对应着性能优化的两个核心指标—— “吞吐” 和 “延时” 。这两个指标是从应用负载的视角来考察性能&#xff0c;直接影…

python爬虫----BeautifulSoup(第二十天)

&#x1f388;&#x1f388;作者主页&#xff1a; 喔的嘛呀&#x1f388;&#x1f388; &#x1f388;&#x1f388;所属专栏&#xff1a;python爬虫学习&#x1f388;&#x1f388; ✨✨谢谢大家捧场&#xff0c;祝屏幕前的小伙伴们每天都有好运相伴左右&#xff0c;一定要天天…

组合数学<1>——组合数学基础

今天我们聊聊组合数学。(本期是给刚刚学习组合数学的同学看的&#xff0c;dalao们可以自行忽略) 建议:不会求逆元的出门左转数论<2>&#xff0c;不会数论的出门右转数论<1>。 加乘原理 加乘原理小学奥数就有。 总的来说:加法原理:分类;乘法原理:分步 比如说&a…

景芯2.5GHz A72训练营dummy添加(一)

景芯A72做完布局布线之后导出GDS&#xff0c;然后进行GDS merge&#xff0c;然后用Calibre对Layout添加Dummy。在28nm以及之前的工艺中&#xff0c;Dummy metal对Timing的影响不是很大&#xff0c;当然Star RC也提供了相应的解决方案&#xff0c;可以考虑Dummy metal来抽取RC。…

【Vector-Map-路径规划(0)】卷首语

因为城市NOA 的开发过程中&#xff0c;十字路口这类场景非常不好处理&#xff0c;个人对路径规划没有什么基础&#xff0c;只知道深度优先&#xff0c;广度优先&#xff0c;A*&#xff0c;Dijkstra等算法&#xff0c;不知道在矢量地图中如何使用&#xff1f;因此花几天时间读几…

【LangChain系列】2. 一文全览LangChain数据连接模块:从文档加载到向量检索RAG,理论+实战+细节

本文学习 LangChain 中的 数据连接&#xff08;Retrieval&#xff09; 模块。该模块提供文档加载、切分&#xff0c;向量存储、检索等操作的封装。最后&#xff0c;结合RAG基本流程&#xff0c;我们将利用LangChain实现RAG的基本流程。 0. 模块介绍 在前面文章中我们已经讲了…