บล็อกนี้จะให้แนวคิดในการกำหนดช่องว่างที่เท่ากันระหว่างองค์ประกอบต่างๆ ใน Tailwind
จะกำหนดช่องว่างที่เท่ากันระหว่างหลายองค์ประกอบใน Tailwind ได้อย่างไร
ผู้ใช้สามารถกำหนดช่องว่างที่เท่ากันระหว่างองค์ประกอบได้โดยใช้ปุ่ม “ ช่องว่าง-{x/y}-{ขนาด} ” คลาสยูทิลิตี้ ผู้ใช้สามารถเพิ่มช่องว่างบนแกน x หรือ y ได้โดยระบุค่าจำนวนเต็ม ยูทิลิตี้การเว้นวรรคเป็นสิ่งจำเป็นเนื่องจากทำให้หน้าเว็บน่าสนใจ หากหน้าเว็บไม่มีระยะห่างที่เหมาะสมระหว่างองค์ประกอบต่างๆ ก็จะไม่ดึงดูดผู้ใช้
ลองใช้ตัวอย่างโค้ดเพื่อกำหนดช่องว่างที่เท่ากันระหว่างองค์ประกอบตาราง
วิธีที่ 1: การกำหนดพื้นที่บนแกน X
พื้นที่เท่ากันที่กำหนดบนแกน x ทำให้มีระยะห่างเท่ากันทางด้านขวาและซ้ายขององค์ประกอบ ในการกำหนดช่องว่างบนแกน x ให้ใช้ไวยากรณ์ต่อไปนี้:
ช่องว่าง - - x - - { ขนาด }
ขนาดสามารถเป็นค่าจำนวนเต็มใดก็ได้
พิจารณาโค้ดด้านล่างเพื่อกำหนดพื้นที่เท่ากันบนแกน x:
< ร่างกาย >< กอง ระดับ = 'ตาราง mx-4 ตาราง-cols-4 พื้นที่-x-4' >
< กอง ระดับ = 'bg-green-400 h-16 โค้งมน-lg border-2 border-green-800' > 1 กอง >
< กอง ระดับ = 'bg-green-400 h-16 โค้งมน-lg border-2 border-green-800' > 2 กอง >
< กอง ระดับ = 'bg-green-400 h-16 โค้งมน-lg border-2 border-green-800' > 3 กอง >
< กอง ระดับ = 'bg-green-400 h-16 โค้งมน-lg border-2 border-green-800' > 4 กอง >
กอง >
ร่างกาย >
ในรหัสนี้:
- “ mx-4 ” เพิ่มระยะขอบ 4 px บนแกน x (ขวาและซ้าย)
- “ ตาราง ” คลาสสร้างตาราง
- “ ตาราง-cols-4 ” สร้าง 4 คอลัมน์ในตาราง
- “ อวกาศ-x-4 ” เพิ่มช่องว่าง 4px ระหว่างองค์ประกอบของตาราง
- “ บีจี-เขียว-400 ” ตั้งค่าสีพื้นหลังเป็นสีเขียว
- “ ชั่วโมง-16 ” ตั้งค่าความสูงเป็น 16px
- “ โค้งมน-lg ” ทำให้มุมโค้งมนและมีรัศมีขอบใหญ่
- “ ชายแดน-2 ” สร้างเส้นขอบ 2px รอบองค์ประกอบ
- “ ขอบเขียว-800 ” ทำให้ขอบเป็นสีเขียวเข้ม
เอาท์พุต
ดูตัวอย่างผลลัพธ์ที่สร้างโดยโค้ดด้านบน:
จะเห็นได้ว่ามีการกำหนดระยะห่าง 4px ระหว่างองค์ประกอบต่างๆ
วิธีที่ 2: การกำหนดพื้นที่บนแกน y
คุณสามารถกำหนดระยะห่างบนแกน y ได้คล้ายกับวิธีการข้างต้น โดยการเปลี่ยนแปลงเล็กน้อยในโค้ดด้านบน กำหนดช่องว่างตามแนวแกน y (บนและล่าง) ไวยากรณ์ของมันคือ:
สามารถใช้โค้ดด้านล่างเพื่อเพิ่มช่องว่างตามแกน y:
< ร่างกาย >< กอง ระดับ = 'mx-4 my-4 สเปซ-y-4' >
< กอง ระดับ = 'bg-green-400 h-16 โค้งมน-lg border-2 border-green-800' > 1 กอง >
< กอง ระดับ = 'bg-green-400 h-16 โค้งมน-lg border-2 border-green-800' > 2 กอง >
< กอง ระดับ = 'bg-green-400 h-16 โค้งมน-lg border-2 border-green-800' > 3 กอง >
< กอง ระดับ = 'bg-green-400 h-16 โค้งมน-lg border-2 border-green-800' > 4 กอง >
กอง >
ร่างกาย >
ในรหัสนี้:
- “ mx-4 ” เพิ่มระยะขอบ 4px ทางซ้ายและขวาขององค์ประกอบเพื่อทำให้เอาต์พุตมีความเหมาะสมยิ่งขึ้น
- “ ของฉัน-4 ” เพิ่มระยะขอบ 4px บนแกน y (บนและล่าง)
- “ สเปซ-y-4 ” เพิ่มพื้นที่ 4px บนแกน y (บนและล่าง)
เอาท์พุต
บันทึกโค้ดด้านบนและดูตัวอย่างหน้าเว็บที่สร้างขึ้นเพื่อดูระยะห่างเป็น:
นั่นคือทั้งหมดที่เกี่ยวกับการกำหนดช่องว่างที่เท่ากันระหว่างองค์ประกอบต่างๆ
บทสรุป
หากต้องการกำหนดช่องว่างที่เท่ากันระหว่างองค์ประกอบต่างๆ ใน Tailwind ผู้ใช้สามารถใช้คำสั่ง ' ช่องว่าง-{x/y}-{ขนาด} ” คลาสยูทิลิตี้และระบุค่าจำนวนเต็มเป็นขนาดตามความต้องการ ระยะห่างระหว่างองค์ประกอบที่เท่ากันทำให้เอาต์พุตสามารถปรับขนาดได้มากขึ้น และผู้ชมยังคงมีส่วนร่วมกับหน้าเว็บ โพสต์นี้ได้ให้วิธีการกำหนดช่องว่างที่เท่ากันระหว่างองค์ประกอบต่างๆ ใน Tailwind