react plock
v3.4.0
React Plock عبارة عن حزمة NPM صغيرة القابلة للتجول في الأشجار ( أقل من 1 كيلو بايت Gzipped ) تتيح لك إنشاء تخطيطات مدهشة مدهشة مع تجربة مطور مذهلة. مع React Plock ، يمكنك بسهولة إنشاء تخطيطات مستجيبة وقابلة للتخصيص تتكيف مع أحجام وأجهزة الشاشة المختلفة.
npm install react-plockباستخدام Plock مع واجهات برمجة تطبيقات V3 الجديدة ، إنها قطعة من الكعكة. إليك مثال على كيفية إنشاء شبكة البناء. يمكنك حتى رؤية عرض توضيحي لهذا المثال بالنقر هنا.
import { Masonry } from 'react-plock' ;
const ImagesMasonry = ( ) => {
const items = [ ... imageUrls ] ;
return (
< Masonry
items = { items }
config = { {
columns : [ 1 , 2 , 3 ] ,
gap : [ 24 , 12 , 6 ] ,
media : [ 640 , 768 , 1024 ] ,
} }
render = { ( item , idx ) => (
< img key = { idx } src = { item } style = { { width : '100%' , height : 'auto' } } />
) }
/>
) ;
} ; يوفر React Plock خيارًا متوازنًا تخطيطًا يخلق شبكة بناء أكثر تناغمًا من الناحية البصرية من خلال النظر في ارتفاع كل عنصر. عند تمكينه باستخدام useBalancedLayout: true ، تقوم خوارزمية التخطيط بتوزيع العناصر عبر الأعمدة مع محاولة تقليل فروق الارتفاع بين الأعمدة.
يعد هذا مفيدًا بشكل خاص للمحتوى ذو المرتفعات المختلفة ، مثل الصور أو البطاقات ، حيث قد يخلق تخطيط البناء التقليدي أعمدة غير متساوية.
على عكس التصميم الافتراضي الذي يوزع العناصر بالتتابع ، يقيس التصميم المتوازن بشكل ديناميكي وضع العنصر لإنشاء نتيجة ممتعة أكثر جمالية.
< Masonry
items = { items }
config = { {
columns : [ 2 , 3 , 4 ] ,
gap : [ 16 , 16 , 16 ] ,
media : [ 640 , 768 , 1024 ] ,
useBalancedLayout : true , // Enable balanced layout
} }
render = { ( item ) => (
< img src = { item . url } alt = { item . alt } style = { { width : '100%' } } />
) }
/>إليك تعريف TypeScript لمكون البناء ، أدناه يمكنك العثور على تفسير أكثر تفصيلاً.
export type MasonryProps < T > = React . ComponentPropsWithoutRef < 'div' > & {
items : T [ ] ;
render : ( item : T , idx : number ) => React . ReactNode ;
config : {
columns : number | number [ ] ;
gap : number | number [ ] ;
media ?: number [ ] ;
useBalancedLayout ?: boolean ;
} ;
as ?: React . ElementType ;
} ; يقبل هذا الدعامة مجموعة عامة من العناصر ، وسيتم تمرير كل منها إلى خاصية العرض .
البناء تقديم الدعامة. إليك المكان الذي تحدد فيه أنماط كل بلاط الشبكة ، وتأخذ الوظيفة عنصر الحلقات الحالي والفهرس النسبي.
كائن التكوين الذي يتم استخدامه لتحديد عدد الأعمدة واستعلامات الوسائط والفجوات بين العناصر.
كما ترون ، من خلال استخدام React.ComponentPropsWithoutRef<"div"> يمكنك ببساطة تمرير كل خاصية متوفرة إلى DIV ، بعض الأمثلة هي معرف و className . سيكون الممتلكات الوحيدة التي سيتم الكتابة عليها هي style لأنه يستخدم داخليًا لتوليد البناء.
من فضلك ، لاحظ أنه في حالة تمرير صفيف إلى سمة الأعمدة لخاصية التكوين ، يجب أن يكون عدد العناصر مساوياً لعدد الوسائط ونقاط توقف الفجوة المقدمة!
// Correct: This will be responsive with 3 breakpoints.
< Masonry
{ ... otherProps }
config = { {
columns : [ 1 , 2 , 3 ] ,
gap : [ 12 , 16 , 20 ] ,
media : [ 640 , 768 , 1024 ] ,
} }
/>
// Correct: This will be responsive with 2 breakpoints.
< Masonry
{ ... otherProps }
config = { {
columns : [ 1 , 2 ] ,
gap : [ 2 , 4 ] ,
media : [ 640 , 1024 ] ,
} }
/ >
// Correct: This will be fixed with 4 columns in every screen size.
< Masonry
{ ... otherProps }
config = { {
columns : 4 ,
gap : 8
} }
/>
// NOT Correct: This will cause trouble in rendering.
< Masonry
{ ... otherProps }
config = { {
columns : [ 4 ] ,
media : [ 640 , 768 ] ,
} }
/ >
