【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>);
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker学习笔记(二):在Linux中部署Docker(Centos7下安装docker、环境配置,以及镜像简单使用)

一、前言 记录时间 [2024-4-6] 前置文章&#xff1a;Docker学习笔记&#xff08;一&#xff09;&#xff1a;入门篇&#xff0c;Docker概述、基本组成等&#xff0c;对Docker有一个初步的认识 在上文中&#xff0c;笔者进行了Docker概述&#xff0c;介绍其历史、优势、作用&am…

功效系数=(指标值–本档标准值)÷(上档标准值–本档标准值)

这个公式用于计算一个指标值相对于标准值的相对位置&#xff0c;进而评估其在标准范围内的表现程度。让我具体解释一下&#xff1a; - **指标值 (Metric Value)**&#xff1a;这是要评估的实际数值&#xff0c;例如某个产品的销售额、某项工作的完成时间等。 - **本档标准值 …

《三》按钮---PushButton和信号槽机制

QPushButton按钮用法详解 按钮是 GUI 开发中最常用到的一种控件&#xff0c;作为一款著名的 GUI 开发框架&#xff0c;Qt 提供了很多种按钮&#xff0c;比如 QPushButton&#xff08;普通按钮&#xff09;、QRadioButton&#xff08;单选按钮&#xff09;、QToolButton&#x…

SSH登录到远程主机@openSSH

文章目录 abstractSSHOpenSSH 安装linuxwindows小结 相关软件windows上的ssh客户端linux上的ssh软件 建立ssh连接&#x1f60a;作为SSH客户端连接远程服务器的步骤使用图形化方式使用Windows内置SSH客户端&#xff08;命令行方式&#xff09; 注意事项FAQ&#x1f60a; 免密登录…

对LSTM的通俗易懂理解--可变权重

RNN的问题&#xff1a;长期依赖&#xff0c;即对短期的数据敏感&#xff0c;对比较远的长期数据不敏感&#xff0c;这是因为RNN隐藏状态权重在不同时刻是共享相同的&#xff0c;随着时间步的增加&#xff0c;梯度会指数级地衰减或者增长&#xff0c;导致梯度消失或者爆炸&#…

【黑马头条】-day06自媒体文章上下架-Kafka

文章目录 今日内容1 Kafka1.1 消息中间件对比1.2 kafka介绍1.3 kafka安装及配置1.4 kafka案例1.4.1 导入kafka客户端1.4.2 编写生产者消费者1.4.3 启动测试1.4.4 多消费者启动 1.5 kafka分区机制1.5.1 topic剖析 1.6 kafka高可用设计1.7 kafka生产者详解1.7.1 同步发送1.7.2 异…

配置vlan和vlan间路由、配置vlan的ip和vrrp、mstp和主次根

简单的通信实验 拓扑图&#xff1a; 1.配置vlan和链路聚合 Sw1 & sw2 undo info-center enable vlan batch 10 20 30 40 int eth-trunk 1 trunkport g 0/0/1 to 0/0/2 port link-type trunk port trunk allow-pass vlan 10 20 30 40 int g0/0/3 port link-type trunk p…

Spring Boot 经典面试题(五)

1.Spring Boot的事务管理是如何实现的&#xff1f; Spring Boot 使用 Spring Framework 中的事务管理功能来实现事务管理。Spring Framework 提供了几种不同的事务管理方式&#xff0c;其中最常用的是基于注解的声明式事务管理。 在 Spring Boot 中&#xff0c;你可以通过 Tr…

Unity 布局 HorizontalLayoutGroup 多行 换行

演示Gif&#xff1a; 现象: 子元素宽度不同&#xff0c;超出父元素后不会换行 GridLayout则是固定宽度也不能用&#xff0c; 需求 水平排版的同时&#xff0c;超出父级后换行 代码&#xff1a; 催更就展示[狗头]

Kafka消息队列架构与应用场景探讨:面试经验与必备知识点解析

本文将深入探讨Kafka的消息队列架构、应用场景,以及面试必备知识点与常见问题解析,助你在面试中展现出坚实的Kafka技术功底。 一、Kafka消息队列架构 1.分布式架构与角色分工解释Kafka的Broker、Producer、Consumer、Topic、Partition等核心概念,以及它们在分布式系统中的角…

Linux:Redis7.2.4的简单在线部署(1)

注意&#xff1a;我写的这个文章是以最快速的办法去搭建一个redis的基础环境&#xff0c;作用是为了做实验简单的练习&#xff0c;如果你想搭建一个相对稳定的redis去使用&#xff0c;可以看我下面这个文章 Linux&#xff1a;Redis7.2.4的源码包部署&#xff08;2&#xff09;-…

CSS 基础:设置背景的 5 个属性及简写 background 注意点

你好&#xff0c;我是云桃桃。 一个希望帮助更多朋友快速入门 WEB 前端的程序媛。大专生&#xff0c;一枚程序媛&#xff0c;感谢关注。回复 “前端基础题”&#xff0c;可免费获得前端基础 100 题汇总&#xff0c;回复 “前端工具”&#xff0c;可获取 Web 开发工具合集 263篇…

力扣经典150题第十六题:接雨水

目录 力扣经典150题第十六题&#xff1a;接雨水1. 题目描述2. 问题分析3. 解题思路4. 代码实现5. 时间复杂度分析6. 应用和扩展7. 总结8. 参考资料 力扣经典150题第十六题&#xff1a;接雨水 1. 题目描述 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按…

给你的Qt软件加个授权

写在前面 环境&#xff1a; Win11 64位 VS2019 Qt5.15.2 核心思路&#xff1a; 将授权相关信息加密保存到License.txt中&#xff0c;软件运行时获取并解密授权信息&#xff0c;判断是否在限制期限内即可。 加解密部分使用第三方openssl库进行&#xff0c;因此需要手动在…

家庭网络防御系统搭建-虚拟机安装siem/securityonion网络连接问题汇总

由于我是在虚拟机中安装的security onion&#xff0c;在此过程中&#xff0c;遇到很多的网络访问不通的问题&#xff0c;通过该文章把网络连接问题做一下梳理。如果直接把securityonion 安装在物理机上&#xff0c;网络问题则会少很多。 NAT无法访问虚拟机 security onion虚拟…

多目标跟踪 | 基于anchor-free目标检测+ReID的实时一阶多类多目标跟踪算法实现

项目应用场景 面向多目标检测跟踪场景&#xff0c;项目采用 anchor-free 目标检测ReID 的实时一阶段多类多目标跟踪算法实现&#xff0c;效果嘎嘎好。 项目效果 项目细节 > 具体参见项目 README.md (1) 类别支持 1~10 object classes are what we need non-interest-…

SpringCloud学习(9)-GateWay网关-自定义拦截器

GateWay Filter详细配置说明 gateway Filter官网:Spring Cloud Gateway 作用&#xff1a; 请求鉴权异常处理记录接口调用时长统计 过滤器类别 全局默认过滤器&#xff1a;官网&#xff1a;Spring Cloud Gateway&#xff0c;出厂默认已有的&#xff0c;直接用&#xff0c;作…

Qt栅格布局的示例

QGridLayout * layoutnew QGridLayout;for(int i0;i<10;i){for(int j0;j<6;j){QLabel *labelnew QLabel(this);label->setText(QString("%1行%2列").arg(i).arg(j));layout->addWidget(label,i,j);}}ui->widget->setLayout(layout); 这样写程序会崩…

【vue】v-bind动态属性绑定

v-bind 简写:value <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><styl…

NC65 查询默认密码(sql)

NC65 使用sql查询设置的默认密码&#xff08;如果系统设置有&#xff09;&#xff1a; select * from sm_user_defaultpwd