จะใช้ตัวเลขตามสัดส่วนและตารางใน Tailwind ได้อย่างไร

อย่างไรก็ตาม บทความนี้จะอธิบายรายละเอียดใน 2 ประเภทเฉพาะ ได้แก่ ตัวเลขตามสัดส่วนและตัวเลขตาราง สิ่งเหล่านี้ใช้เพื่อจัดรูปแบบค่าตัวเลขใน Tailwind และจัดเรียงและแสดงข้อมูลตัวเลขในลักษณะที่น่าสนใจต่อการออกแบบเอกสาร

บทความนี้จะอธิบายรายละเอียดเกี่ยวกับตัวเลขตามสัดส่วนและตารางใน Tailwind CSS โดยใช้โครงร่างต่อไปนี้

• วิธีใช้ตัวเลขตามสัดส่วนใน Tailwind CSS
• วิธีใช้ตัวเลขแบบตารางใน Tailwind CSS
• ความแตกต่างระหว่างตัวเลขตามสัดส่วนและตาราง

วิธีใช้ตัวเลขตามสัดส่วนใน Tailwind CSS

คลาสตัวเลขตามสัดส่วนจะกำหนดรูปแบบให้กับองค์ประกอบโดยที่ตัวเลขทุกตัวมีความกว้างไม่เท่ากัน

ไวยากรณ์

ไวยากรณ์สำหรับการใช้ตัวเลขสัดส่วนใน Tailwind มีดังนี้

ในไวยากรณ์ที่ให้ไว้ข้างต้น ' สัดส่วน-ตัวเลข ” จะต้องจัดให้มีคลาสให้กับองค์ประกอบเพื่อใช้ตัวเลขสัดส่วน

เรามาดูตัวอย่างเชิงปฏิบัติของตัวเลขสัดส่วนกัน

ในโค้ดที่ให้มาด้านล่าง สอง “ พี ” องค์ประกอบมีอยู่ใน “ กอง ” องค์ประกอบที่ใช้คลาสตัวเลขสัดส่วน:

คำอธิบายของรหัสที่ให้มาข้างต้นมีดังนี้:

• “ กอง ” องค์ประกอบใช้ “ สัดส่วน-ตัวเลข ” คลาสที่จะใช้คุณสมบัติตัวเลขตามสัดส่วนกับตัวเลข
• “ ศูนย์ข้อความ ” คลาสวางข้อความไว้ที่กึ่งกลางขององค์ประกอบ
• “ bg-{สี}-{จำนวน} ” คลาสมีหน้าที่รับผิดชอบสีพื้นหลังขององค์ประกอบ
• “ ข้อความ-xl ” คลาสให้ขนาดตัวอักษรใหญ่พิเศษสำหรับข้อความ
• ต่อไปสอง” พี ” องค์ประกอบถูกสร้างขึ้นโดยมีตัวเลขต่างกัน

เอาท์พุต

จะเห็นได้ในผลลัพธ์ว่าตัวเลขในวินาที “ พี ” องค์ประกอบมีความกว้างมากกว่าองค์ประกอบแรกเล็กน้อย นี่เป็นเพราะคลาสตัวเลขตามสัดส่วน:

วิธีใช้ตัวเลขแบบตารางใน Tailwind CSS

รูปภาพแบบตารางใน Tailwind จะกำหนดรูปแบบให้กับองค์ประกอบโดยที่ตัวเลขทุกตัวจะมีขนาดความกว้างเท่ากัน สิ่งนี้จะสร้างการแสดงตัวเลขเหมือนตารางแบบสมมาตร

ไวยากรณ์

ไวยากรณ์สำหรับการใช้ตัวเลขแบบตารางมีดังนี้:

ในไวยากรณ์ที่ให้ไว้ข้างต้น ' ตารางตัวเลข ” มีการกำหนดคลาสให้กับองค์ประกอบเพื่อใช้ตัวเลขแบบตาราง

มาดูกันว่า “ ตารางตัวเลข ” ส่งผลต่อค่าตัวเลขในเอกสาร HTML สำหรับการสาธิตครั้งนี้สอง” พี ” ที่มีค่าตัวเลขจะถูกสร้างขึ้นและอยู่ใน “ กอง ” องค์ประกอบที่ใช้คลาสตัวเลขแบบตาราง:

ในโค้ดข้างต้น ' ตารางตัวเลข ” ชั้นเรียนมีไว้เพื่อ “ กอง ” องค์ประกอบที่จะกำหนดรูปแบบของตัวเลขตารางให้กับเด็ก “ พี ” องค์ประกอบ

เอาท์พุท:

จะเห็นได้จากผลลัพธ์ข้างต้นว่าค่าตัวเลขในองค์ประกอบทั้งสองนั้นถูกจัดตำแหน่งอย่างสมบูรณ์เนื่องจากขนาดความกว้างของตัวเลขเท่ากัน

ข้อมูลโบนัส: ความแตกต่างระหว่างตัวเลขตามสัดส่วนและตารางใน Tailwind CSS

มาดูการสาธิตที่แยกความแตกต่างผลกระทบของคลาสตัวเลขแบบตารางและสัดส่วนกับค่าตัวเลขกัน ในการสาธิตนี้ องค์ประกอบต่างๆ จะได้รับการกำหนดคลาสตัวเลขตามสัดส่วนเป็นค่าเริ่มต้น ถัดไป เมื่อใช้สถานะโฮเวอร์ องค์ประกอบจะถูกกำหนดให้กับคลาสตัวเลขแบบตาราง:

จะเห็นได้จากโค้ดข้างต้นว่า “ กอง ” องค์ประกอบมาพร้อมกับ “ สัดส่วน-ตัวเลข ” ซึ่งจะเป็นแบบแผนเริ่มต้นที่ค่าตัวเลขจะตามมา

ในทำนองเดียวกันเนื่องจาก “ โฮเวอร์: ตารางตัวเลข ” ค่าตัวเลขจะเป็นไปตามรูปแบบตารางทุกครั้งที่ผู้ใช้เลื่อนเคอร์เซอร์เมาส์ไปเหนือองค์ประกอบ “div”

เอาท์พุต

ในผลลัพธ์ที่กำหนด ความกว้างของค่าตัวเลขจะเปลี่ยนไปเมื่อผู้ใช้วางเมาส์ไว้เหนือองค์ประกอบ สิ่งนี้จะให้ความแตกต่างที่มองเห็นได้ระหว่างตัวเลขตามสัดส่วนและตารางใน Tailwind:

นั่นคือทั้งหมดที่เกี่ยวกับตัวเลขตามสัดส่วนและตารางใน Tailwind

บทสรุป

หากต้องการใช้ตัวเลขสัดส่วนใน Tailwind จะต้อง “ สัดส่วน-ตัวเลข ” มีการใช้คลาส ตัวเลขตามสัดส่วนใช้แบบแผนโดยที่ค่าตัวเลขแต่ละค่ามีขนาดความกว้างต่างกัน หากต้องการใช้ตัวเลขแบบตารางใน Tailwind จะต้อง “ ตารางตัวเลข ” มีการใช้คลาส ตัวเลขแบบตารางใช้แบบแผนโดยที่ค่าตัวเลขทุกค่าจะมีขนาดความกว้างเท่ากัน บทความนี้ได้กล่าวถึงขั้นตอนการใช้ตัวเลขตามสัดส่วนและตารางใน Tailwind