หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

พื้นที่ตอบสนอง

ระบบเค้าโครงที่เข้าใจง่ายและเป็นรังได้ง่ายพื้นที่ตอบสนองช่วยให้คุณสามารถแบ่งหน้าหรือคอนเทนเนอร์ออกเป็นพื้นที่ยึดติดตั้งได้และปรับขนาดได้ช่วยให้คุณสามารถสร้างอินเทอร์เฟซผู้ใช้เดสก์ท็อป/มือถือในเบราว์เซอร์

แทนที่จะเป็นไลบรารีของส่วนประกอบ UI ที่มองเห็นได้ช่องว่างมีจุดประสงค์เพื่อเป็นบล็อกพื้นฐานที่นำกลับมาใช้ใหม่ได้สำหรับการวาง UI ซึ่งตอบสนองอย่างเรียบร้อยเพื่อดูการปรับขนาดพอร์ตทำให้คุณเติมส่วนประกอบใด ๆ ที่คุณต้องการ

  • ไม่มีสไตล์เพื่อให้ได้เลย์เอาต์ที่เรียบง่ายหรือซับซ้อน
  • ช่องว่างรู้วิธีการประพฤติตนที่เกี่ยวข้องซึ่งกันและกันและปรับขนาดตามนั้น
  • ช่องว่างไม่มีองค์ประกอบภาพใด ๆ กับพวกเขา (แม้กระทั่งช่องว่างหรือระยะขอบ) คุณสามารถเติมเต็มสิ่งที่คุณต้องการ

เวอร์ชัน 0.2.0 รีลีส - อ่านโน้ตรีลีสที่นี่

ดูเอกสารเต็มรูปแบบที่นี่

ช่องว่างระดับบนสุด

ใช้ที่ระดับสูงสุดของช่องว่างอื่น ๆ ทั้งหมด

<viewport />

พื้นที่นี้จะใช้เวลามากกว่าวิวพอร์ตของหน้าต่างเบราว์เซอร์ การปรับขนาดหน้าต่างเบราว์เซอร์จะปรับขนาดของพื้นที่นี้โดยอัตโนมัติและช่องว่างที่ซ้อนกันทั้งหมด

<แก้ไข />

พื้นที่นี้สามารถให้ความสูงและเลือกความกว้าง (โดยค่าเริ่มต้นจะมีขนาดถึง 100% ของภาชนะบรรจุ) ช่องว่างที่ซ้อนกันทั้งหมดจะอยู่ในพื้นที่ขนาดคงที่นี้

ช่องว่างที่ทอดสมอ

สิ่งเหล่านี้สามารถใช้ภายในช่องว่างระดับบนสุด <HiewPort /> และ <cide /> หรือซ้อนกันภายในช่องว่างอื่น ๆ

<ซ้าย /> และ <ขวา />

พื้นที่ที่ทอดสมอไปทางซ้ายหรือขวาของภาชนะ/พื้นที่พาเรนต์ ขนาดสามารถระบุได้เป็นพิกเซลหรือเป็นเปอร์เซ็นต์เพื่อกำหนดความกว้าง

<ด้านบน /> และ <ล่าง />

พื้นที่ที่ทอดสมออยู่ด้านบนหรือด้านล่างของคอนเทนเนอร์/พื้นที่ ขนาดสามารถระบุได้เป็นพิกเซลหรือเป็นเปอร์เซ็นต์เพื่อกำหนดความสูง

มีรุ่นที่ปรับขนาดได้เหล่านี้ที่เรียกว่า <leftresizable /> , <rightresizable /> , <topresizable /> และ <dottomresizable /> ซึ่งอนุญาตให้ช่องว่างจากขอบด้านนอกโดยการลากด้วยเมาส์

อื่น

<เติม />

พื้นที่ที่ใช้พื้นที่ว่างที่เหลืออยู่ในภาชนะบรรจุ/พื้นที่โดยคำนึงถึงช่องว่างที่ยึดใด ๆ ในทุกด้าน

<ตำแหน่ง />

พื้นที่ที่สามารถวางไว้ภายในพื้นที่พาเรนต์ไม่ว่าจะอยู่ด้านบนซ้ายความกว้างและความสูงหรือด้านบนซ้ายขวาและด้านล่าง

<เลเยอร์ />

เลเยอร์อนุญาตให้คุณสร้างเลเยอร์ภายในพื้นที่พาเรนต์ตัวอย่างเช่น: 

 < ViewPort >
	< Layer zIndex =" {0} " > < LeftResizable size =" 20% " /> // floating sidebar </ Layer >
	< Layer zIndex =" {1} " >
		< Fill />
	</ Layer >
</ ViewPort >

<เป็นศูนย์กลาง />

เน้นเนื้อหาของพื้นที่ในแนวนอนและแนวตั้ง

<centervertically />

เน้นเนื้อหาของพื้นที่ในแนวตั้ง

เริ่มต้น

ในการเริ่มต้นด้วยพื้นที่ตอบสนองที่คุณต้องการ: 

 npm install react - spaces -- save 
 import * as Spaces from "react-spaces" ;

ดูเอกสารเต็มรูปแบบที่นี่

การบริจาค

หากคุณพบว่าห้องสมุดนี้มีประโยชน์ให้พิจารณาบริจาคเงินเล็กน้อยเพื่อระดมทุนกาแฟสักถ้วย:

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด