Tailwind CSS ให้ “ จัดรายการ ” ยูทิลิตี้เพื่อควบคุมตำแหน่งของรายการแบบยืดหยุ่นและแบบกริดตามขวางของคอนเทนเนอร์ มีคลาสยูทิลิตี้ต่างๆ เช่น “items-start”, “items-center”, “items-end”, “items-baseline” เป็นต้น นอกจากนี้ ผู้ใช้ยังสามารถใช้คุณสมบัติ hover ด้วย “items-
บทความนี้จะยกตัวอย่างวิธีการใช้โฮเวอร์กับยูทิลิตีรายการจัดเรียง” ใน Tailwind CSS
จะใช้การวางเมาส์เหนือยูทิลิตี 'จัดเรียงรายการ' ใน Tailwind ได้อย่างไร
หากต้องการวางเมาส์เหนือยูทิลิตี 'จัดเรียงรายการ' ใน Tailwind ให้สร้างโครงสร้าง HTML แล้วเพิ่ม ' โฉบ ” คลาสยูทิลิตี้ที่ต้องการ “ รายการ-
ไวยากรณ์
< องค์ประกอบ ระดับ = 'โฮเวอร์:รายการ-
แทนที่
ตัวอย่าง
ในตัวอย่างนี้ เราจะสร้าง flex container ด้วยคุณสมบัติ “ites-start” จากนั้นเราจะใช้ ' โฮเวอร์: ศูนย์รายการ ” ชั้นเรียนใน “ เอาต์พุต สำหรับการใช้เอฟเฟ็กต์โฮเวอร์กับยูทิลิตี 'จัดเรียงรายการ' ใน Tailwind ให้ใช้ ' โฉบ ” คลาสยูทิลิตี้ที่มีเฉพาะ “ รายการ-
< ร่างกาย >
< แผนก ระดับ = 'รายการแบบยืดหยุ่น-เริ่มโฮเวอร์: รายการ-กึ่งกลางจัดชิดขอบ-รอบศูนย์ข้อความ h-44 m-3 bg-pink-300 gap-4' >
< แผนก ระดับ = 'bg-pink-600 py-4 w-40' > 1 แผนก >
< แผนก ระดับ = 'bg-pink-600 py-12 w-40' > 2 แผนก >
< แผนก ระดับ = 'bg-สีชมพู-600 py-8 w-40' > 3 แผนก >
แผนก >
ร่างกาย >
ที่นี่:
จากหน้าเว็บด้านบน จะสังเกตได้ว่าการจัดตำแหน่งของรายการแบบยืดหยุ่นจะเปลี่ยนไปตามแกนตัดขวางของคอนเทนเนอร์เมื่อโฮเวอร์ บทสรุป