“ h-หน้าจอ ” คลาสใน Tailwind ใช้เพื่อกำหนดความสูงของวิวพอร์ตให้กับองค์ประกอบ HTML วิวพอร์ตเป็นอีกชื่อหนึ่งสำหรับขนาดหน้าจอของลูกค้า นักพัฒนาสามารถเลือกวิวพอร์ตทั้งหมดได้อย่างง่ายดายด้วยความช่วยเหลือนี้ “ h-หน้าจอ ” จากนั้นใช้คลาส Tailwind หลายคลาสตามลำดับ
บทความนี้จะกล่าวถึงขั้นตอนในการเพิ่มความสูงของวิวพอร์ตให้กับองค์ประกอบใน Tailwind โดยใช้คำสั่ง “ h-หน้าจอ ' ระดับ.
วิธีการตั้งค่าความสูงของวิวพอร์ตขององค์ประกอบโดยใช้คลาส 'h-screen' ใน Tailwind
หากองค์ประกอบถูกกำหนดความสูงของวิวพอร์ตโดยใช้เครื่องหมาย “ h-หน้าจอ ” มันจะปรับคุณสมบัติความสูงโดยอัตโนมัติตามหน้าจอของลูกค้า หากต้องการใช้ความสูงของวิวพอร์ตใน Tailwind ให้ปฏิบัติตามข้อกำหนดที่ให้ไว้ด้านล่างนี้
< กอง ระดับ = 'เอช-สกรีน' > สวัสดี < / กอง >
จากการสาธิตข้างต้นเป็นที่ชัดเจนว่า “ h-หน้าจอ ” ใช้ในแอตทริบิวต์ class ขององค์ประกอบพร้อมกับคลาส Tailwind อื่นๆ สำหรับการออกแบบเค้าโครง
มาสร้างแดชบอร์ดจำลองและกำหนดความสูงของวิวพอร์ตให้กับแถบด้านข้างของหน้าจอแดชบอร์ดกันดีกว่า
< กอง ระดับ = 'เฟล็กซ์' >
< กอง ระดับ = 'w-56 h-หน้าจอโค้งมน-lg bg-blue-600 ข้อความ-ศูนย์ ข้อความ-สีฟ้า-50 py-6 ข้อความ-2xl แบบอักษร-ตัวหนา' >แดชบอร์ด
< ul ระดับ = 'ข้อความ-lg py-8 space-y-7' >
< ที่ >ทีมงาน< / ที่ >
< ที่ >โครงการ< / ที่ >
< ที่ >รายงาน< / ที่ >
< ที่ >เอกสาร< / ที่ >
< / ul >
< / กอง >
< กอง ระดับ = 'ข้อความ-ศูนย์ text-3xl py-8 ps-5' >ยินดีต้อนรับสู่แดชบอร์ด!< / กอง >
< / กอง >
คำอธิบายของรหัส:
- ประการแรก “ กอง ” องค์ประกอบถูกสร้างขึ้นโดยมีคลาสของ “ ดิ้น ” คลาสนี้จัดวางสิ่งของที่อยู่ในแนวนอน
- ถัดไปสร้างอีก “ กอง ” โดยมีช่องว่างด้านบนและด้านล่าง 8px โดยใช้เครื่องหมาย “ ไพ-2 ” และจัดสรรความกว้างคงที่โดยใช้คำสั่ง “ w-56 ' ระดับ. จากนั้น ตั้งค่าความสูงขององค์ประกอบเป็นความสูงของวิวพอร์ตด้วยเครื่องหมาย “ h-หน้าจอ ' ระดับ. มุมภาชนะถูกตั้งค่าให้โค้งมน
- “ bg-{สี}-{จำนวน} ” ใช้เพื่อกำหนดสีพื้นหลังให้กับคอนเทนเนอร์ “ ศูนย์ข้อความ ” คลาสจัดเนื้อหาข้อความให้อยู่ตรงกลาง ตั้งค่าน้ำหนักแบบอักษรสำหรับข้อความเป็น “ ตัวหนา ” และขนาดตัวอักษรคือ “ 2xl '.
- ต่อไปเป็นรายการที่ไม่เรียงลำดับ “< ul >” ถูกสร้างขึ้นด้วยขนาดตัวอักษรขนาดใหญ่และมีเครื่องหมาย “ 48px ” margin-top โดยใช้คลาส tailwind “space-y”
- จากนั้น รายการสี่รายการจะถูกสร้างขึ้นโดยใช้เครื่องหมาย “< ที่ >” แท็ก
- อื่น ' กอง องค์ประกอบ ” ถูกสร้างขึ้นโดยมีช่องว่างภายในเริ่มต้น 32px จากบนลงล่างและ 20px โดยใช้เครื่องหมาย “ ไพ” และ “ปล ” ชั้นเรียน
ผลลัพธ์สำหรับโค้ดที่อธิบายข้างต้นมีดังนี้:
จากผลลัพธ์ข้างต้น เห็นได้ชัดว่าแถบด้านข้างแดชบอร์ดมีความสูงของวิวพอร์ตของหน้าจอ นั่นคือทั้งหมดเกี่ยวกับจุดประสงค์ของ “ h-หน้าจอ ” คลาสใน Tailwind
บทสรุป
“ h-หน้าจอ ” คลาสใน Tailwind ใช้เพื่อกำหนดความสูงของวิวพอร์ตให้กับองค์ประกอบ เช่น ความสูงของหน้าจอไคลเอนต์ ใช้ ' h-หน้าจอ ” องค์ประกอบจะสืบทอดความสูงของหน้าจอโดยอัตโนมัติ ในการใช้ความสูงของวิวพอร์ตใน Tailwind นั้น “ h-หน้าจอ ” คุณสมบัติจะต้องถูกส่งผ่านเป็นค่าสำหรับ “ ระดับ ” คุณลักษณะเช่น “< div class= “h-screen ”>”. บทความนี้ได้จัดให้มีขั้นตอนการใช้ “ h-หน้าจอ ” คลาสใน Tailwind