react plock
v3.4.0
React Plock เป็นแพ็คเกจ NPM ขนาดเล็กที่สั่นคลอนได้ง่าย ( น้อยกว่า 1KB GZIPPED ) ที่ช่วยให้คุณสร้างเค้าโครงก่ออิฐที่น่าทึ่งพร้อมประสบการณ์นักพัฒนาที่น่าทึ่ง ด้วย React Plock คุณสามารถสร้างเลย์เอาต์ที่ตอบสนองและปรับแต่งได้ซึ่งปรับให้เข้ากับขนาดหน้าจอและอุปกรณ์ที่แตกต่างกัน
npm install react-plockการใช้ Plock กับ V3 API ใหม่มันเป็นเค้กชิ้นหนึ่ง นี่คือตัวอย่างของวิธีการสร้างกริดก่ออิฐ คุณสามารถดูตัวอย่างของตัวอย่างนี้ได้โดยคลิกที่นี่
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 ตัวอย่างบางส่วนคือ ID และ 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 ] ,
} }
/ >
