React Resizable Panels

هذا المشروع عبارة عن نظام من المكونات والأدوات لإدارة تخطيطات العرض المقسم في تطبيقات React. يوفر نظام لوحة قابل لتغيير الحجم ينظم المحتوى في مناطق أفقية ورأسية مع حدود قابلة للسحب.

يتضمن النظام أداة تخطيط واجهة مستخدم قابلة للطي لتبديل رؤية اللوحات لزيادة مساحة الشاشة المتاحة. يدعم تداخل اللوحات المتكرر، مما يسمح بتنظيم التخطيطات كأشجار حيث تحتوي اللوحات على مجموعات أخرى من اللوحات القابلة لتغيير الحجم.

تغطي المكتبة بناء التخطيط من خلال استخدام قيود أبعاد اللوحة، مما يتيح تحديد الأحجام الدنيا والقصوى. يدير تقسيم إطار العرض الديناميكي ويوفر آليات لبناء شبكات ومناطق محتوى قابلة للتعديل.

Features

Resizable Layout Construction - Provides components to create user interfaces with adjustable content areas resized via draggable boundaries.
Draggable and Resizable React Components - Offers a set of React components for building adjustable split-view layouts with boundary constraints.
Resizable Layout Panels - Organizes content into horizontal or vertical panels that are adjustable by dragging boundaries.
Dynamic Viewport Partitioning - Provides a system for dividing the screen into multiple customizable regions that users can resize.
Recursive Nesting - Supports recursive nesting of panels, allowing for complex, tree-structured split-view layouts.
Resizable Panel Systems - Manages horizontal and vertical content areas with configurable minimum and maximum dimensions.
React Application Development - Enables the construction of complex, flexible grid and panel layouts within React applications.
Collapsible Panels - Includes a tool for toggling the visibility of panels to maximize available workspace.
Drag-to-Resize Calculations - Calculates panel size changes by tracking mouse and touch movement relative to draggable boundaries.
Dimension Constraints - Sets minimum and maximum dimensions for content areas to ensure layout consistency.
Screen Percentage Sizing - Tracks panel sizes as percentages to maintain proportional layouts across different window sizes.
CSS-Driven Panel Sizing - Updates panel dimensions by modifying CSS variables to minimize runtime overhead and DOM updates.
Sizing Constraints - Implements minimum and maximum size limits to constrain panel dimensions during resizing.
Data Visualization Libraries - Components for creating resizable layout panels.

سجل النجوم

bvaughnreact-resizable-panels

Name: bvaughn/react-resizable-panels
Author: bvaughn

View on GitHub

5,302 نجوم218 تفرعاتTypeScriptMIT4 مشاهداتreact-resizable-panels.vercel.app

React Resizable Panels

Features

Resizable Layout Construction - Provides components to create user interfaces with adjustable content areas resized via draggable boundaries.
Draggable and Resizable React Components - Offers a set of React components for building adjustable split-view layouts with boundary constraints.
Resizable Layout Panels - Organizes content into horizontal or vertical panels that are adjustable by dragging boundaries.
Dynamic Viewport Partitioning - Provides a system for dividing the screen into multiple customizable regions that users can resize.
Recursive Nesting - Supports recursive nesting of panels, allowing for complex, tree-structured split-view layouts.
Resizable Panel Systems - Manages horizontal and vertical content areas with configurable minimum and maximum dimensions.
React Application Development - Enables the construction of complex, flexible grid and panel layouts within React applications.
Collapsible Panels - Includes a tool for toggling the visibility of panels to maximize available workspace.
Drag-to-Resize Calculations - Calculates panel size changes by tracking mouse and touch movement relative to draggable boundaries.
Dimension Constraints - Sets minimum and maximum dimensions for content areas to ensure layout consistency.
Screen Percentage Sizing - Tracks panel sizes as percentages to maintain proportional layouts across different window sizes.
CSS-Driven Panel Sizing - Updates panel dimensions by modifying CSS variables to minimize runtime overhead and DOM updates.
Sizing Constraints - Implements minimum and maximum size limits to constrain panel dimensions during resizing.
Data Visualization Libraries - Components for creating resizable layout panels.

بدائل مفتوحة المصدر لـ React Resizable Panels

مشاريع مفتوحة المصدر مشابهة، مرتبة حسب عدد الميزات المشتركة مع React Resizable Panels.

chakra-ui/zag
chakra-ui/zag
5,121عرض على GitHub
Zag is a headless UI state machine library that provides unstyled component logic to ensure consistent behavior across different rendering engines. It functions as a toolkit for modeling complex user interface interactions using statecharts, decoupling the underlying logic and accessibility attributes from visual styling. The library is framework-agnostic, utilizing specialized adapters to bridge its state machine logic with various JavaScript libraries such as React, Solid, Vue, and Svelte. This approach allows developers to maintain a single interaction model while applying any CSS or styli
TypeScripta11yaccessibilityagnostic
عرض على GitHub5,121
mui/base-ui
mui/base-ui
8,711عرض على GitHub
Base UI is a headless component library and unstyled framework providing accessible interface primitives. It decouples behavioral logic and state management from the visual layer, allowing developers to implement complex UI patterns while maintaining total control over the final styling. The library implements WAI-ARIA design patterns to ensure all primitives support standard keyboard navigation and screen reader accessibility. It provides a suite of low-level building blocks that handle the internal mechanics of interface elements without bundling any CSS. The framework covers a broad range
TypeScriptaccessibilitydesign-systemreact
عرض على GitHub8,711
bokuweb/react-rnd
bokuweb/react-rnd
4,278عرض على GitHub
react-rnd is a JavaScript UI interaction library and React component used to create elements that are both draggable and resizable within a browser window. It functions as a constraint-based layout component that wraps DOM elements to enforce boundaries, grid snapping, and aspect ratio locks during manual adjustments. The library allows for the definition of custom interaction handles to act as the primary triggers for dragging and resizing actions. It supports axis restrictions, boundary limits, and the ability to round position and dimension values to specified pixel increments. The system
TypeScriptcomponentdragdraggable
عرض على GitHub4,278
bailicangdu/react-pxq
bailicangdu/react-pxq
7,507عرض على GitHub
react-pxq is a React Redux boilerplate and state-driven UI framework designed for building single-page applications. It functions as a starter project template that combines a client-side routing system with global state management to synchronize data across a component hierarchy. The project implements a code-split web application architecture that uses lazy loading to reduce initial bundle sizes. It integrates a navigation system that maps URL paths to components without triggering full page reloads. The framework covers centralized state management through a global store and action-based
JavaScriptreact
عرض على GitHub7,507

عرض جميع البدائل الـ 30 لـ React Resizable Panels

الأسئلة الشائعة

ما هي وظيفة bvaughn/react-resizable-panels؟

ما هي الميزات الرئيسية لـ bvaughn/react-resizable-panels؟

الميزات الرئيسية لـ bvaughn/react-resizable-panels هي: Resizable Layout Construction, Draggable and Resizable React Components, Resizable Layout Panels, Dynamic Viewport Partitioning, Recursive Nesting, Resizable Panel Systems, React Application Development, Collapsible Panels.

ما هي البدائل مفتوحة المصدر لـ bvaughn/react-resizable-panels؟

تشمل البدائل مفتوحة المصدر لـ bvaughn/react-resizable-panels: chakra-ui/zag — Zag is a headless UI state machine library that provides unstyled component logic to ensure consistent behavior across… mui/base-ui — Base UI is a headless component library and unstyled framework providing accessible interface primitives. It decouples… hiteshchoudhary/chai-aur-react — This project is an educational course and a collection of frontend projects designed to teach the core concepts and… bokuweb/react-resizable-and-movable — This project is a React UI interaction library and component geometry manager. It provides a set of tools for creating… bokuweb/react-rnd — react-rnd is a JavaScript UI interaction library and React component used to create elements that are both draggable… bailicangdu/react-pxq — react-pxq is a React Redux boilerplate and state-driven UI framework designed for building single-page applications.…