react-resize-demo 2.0.0 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +48 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
一个现代化的 React 可调整大小面板组件库，支持水平和垂直方向的布局调整，具备完整的 TypeScript 支持和模块化架构。
|
|
4
4
|
|
|
5
|
+
**源码地址**: [https://gitee.com/zugechen/react-resize-demo](https://gitee.com/zugechen/react-resize-demo)
|
|
6
|
+
|
|
5
7
|
## ✨ 特性
|
|
6
8
|
|
|
7
9
|
- ✅ **双向布局**：支持水平和垂直方向的布局
|
|
@@ -120,6 +122,42 @@ import { ResizeAbleCore } from 'react-resize-demo/utils';
|
|
|
120
122
|
import type { VirtualConfig, ResizeDirection } from 'react-resize-demo/types';
|
|
121
123
|
```
|
|
122
124
|
|
|
125
|
+
## 🎮 运行 Demo
|
|
126
|
+
|
|
127
|
+
要查看和体验完整的 demo 示例（包括虚拟化模式、性能对比等），请从源码运行：
|
|
128
|
+
|
|
129
|
+
### 步骤
|
|
130
|
+
|
|
131
|
+
1. **Clone 源码仓库**
|
|
132
|
+
|
|
133
|
+
```bash
|
|
134
|
+
git clone https://gitee.com/zugechen/react-resize-demo.git
|
|
135
|
+
cd react-resize-demo
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
2. **安装依赖**
|
|
139
|
+
|
|
140
|
+
```bash
|
|
141
|
+
npm install
|
|
142
|
+
# 或
|
|
143
|
+
pnpm install
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
3. **启动 Demo**
|
|
147
|
+
|
|
148
|
+
```bash
|
|
149
|
+
npm run demo
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
这将启动一个开发服务器（默认端口 3000），你可以在浏览器中查看和测试所有功能示例。
|
|
153
|
+
|
|
154
|
+
### Demo 包含的内容
|
|
155
|
+
|
|
156
|
+
- ✅ 基础用法示例（水平/垂直布局）
|
|
157
|
+
- ✅ 虚拟化模式演示
|
|
158
|
+
- ✅ 性能对比测试
|
|
159
|
+
- ✅ 复杂内容场景演示
|
|
160
|
+
|
|
123
161
|
## 📖 API 文档
|
|
124
162
|
|
|
125
163
|
### ResizablePanelGroup
|
|
@@ -221,7 +259,7 @@ pnpm install
|
|
|
221
259
|
npm run build
|
|
222
260
|
```
|
|
223
261
|
|
|
224
|
-
###
|
|
262
|
+
### 运行 Demo（开发模式）
|
|
225
263
|
|
|
226
264
|
```bash
|
|
227
265
|
npm run demo
|
|
@@ -229,7 +267,7 @@ npm run demo
|
|
|
229
267
|
|
|
230
268
|
这将启动一个开发服务器，你可以在浏览器中查看和测试组件。
|
|
231
269
|
|
|
232
|
-
### 构建Demo
|
|
270
|
+
### 构建 Demo（生产模式）
|
|
233
271
|
|
|
234
272
|
```bash
|
|
235
273
|
npm run demo:build
|
|
@@ -247,6 +285,12 @@ npm run type-check
|
|
|
247
285
|
npm run lint
|
|
248
286
|
```
|
|
249
287
|
|
|
288
|
+
### 监听模式构建
|
|
289
|
+
|
|
290
|
+
```bash
|
|
291
|
+
npm run build:watch
|
|
292
|
+
```
|
|
293
|
+
|
|
250
294
|
## 💡 工作原理
|
|
251
295
|
|
|
252
296
|
组件通过拖拽器（ResizeHandle）来调整相邻面板的尺寸：
|
|
@@ -302,3 +346,5 @@ MIT
|
|
|
302
346
|
## 🤝 贡献
|
|
303
347
|
|
|
304
348
|
欢迎提交 Issue 和 Pull Request！
|
|
349
|
+
|
|
350
|
+
**源码仓库**: [https://gitee.com/zugechen/react-resize-demo](https://gitee.com/zugechen/react-resize-demo)
|