บทความนี้จะกล่าวถึงขั้นตอนการตั้งค่ารูปภาพสไตล์รายการของบล็อกรายการใน Tailwind
วิธีการตั้งค่าคลาสรูปภาพสไตล์รายการใน Tailwind
คลาสรูปภาพสไตล์รายการใช้สำหรับจัดเตรียมรูปภาพเป็นเครื่องหมายรายการใน Tailwind โดยค่าเริ่มต้น Tailwind จะให้เฉพาะ ' รายการภาพไม่มี ” คลาสที่สามารถใช้เพื่อลบเครื่องหมายรูปภาพที่ตั้งไว้ก่อนหน้านี้สำหรับรายการเท่านั้น
ไวยากรณ์
ไวยากรณ์สำหรับการใช้คลาสรูปภาพสไตล์รายการใน Tailwind มีดังนี้
< ul ระดับ = 'รายการภาพ - [url ({URL รูปภาพ})]' > < / ul >
ไวยากรณ์นี้ให้รูปภาพที่ระบุเป็นเครื่องหมายสำหรับองค์ประกอบรายการ
< ul ระดับ = 'รายการภาพไม่มี' > < / ul >
ไวยากรณ์นี้จะลบรูปภาพที่ตั้งค่าไว้ก่อนหน้านี้เป็นเครื่องหมายสำหรับองค์ประกอบรายการ
ลองใช้ไวยากรณ์ที่กำหนดไว้ข้างต้นเพื่อใช้รูปภาพเป็นเครื่องหมายในรายการที่ไม่เรียงลำดับ ในการสาธิตนี้ ผู้ใช้จะมีรูปภาพชื่อ “ handpointer.png ” ปรากฏอยู่ในโฟลเดอร์โปรเจ็กต์ Tailwind เดียวกัน ในกรณีที่รูปภาพนั้นปรากฏในโฟลเดอร์อื่น ผู้ใช้จะต้องระบุเส้นทางแบบเต็มไปยังคลาสรูปภาพสไตล์รายการ เราจะใช้รูปภาพนั้นเป็นเครื่องหมายรายการโดยใช้คลาส 'list-image'
< กอง ระดับ = 'ดิ้นชิดขอบ-ศูนย์' >
< ul ระดับ = ' รายการภายใน รายการภาพ - [url (handpointer.png)] space-y-2 ปัดเศษ-md bg-green-400 p-2' >
รายการตัวอย่าง
< ที่ >นี่คือรายการแรก< / ที่ >
< ที่ >นี่คือรายการที่สอง< / ที่ >
< ที่ >นี่คือรายการที่สาม< / ที่ >
< / ul >
< / กอง >
คำอธิบายของโค้ดข้างต้นมีดังนี้:
- เอ “ ” องค์ประกอบถูกสร้างขึ้นและมาพร้อมกับ “ ดิ้น ” คลาสที่จัดแนวรายการในแนวนอนในคอนเทนเนอร์
- “ ปรับศูนย์ ” คลาสจัดตำแหน่งรายการลูกให้อยู่ตรงกลางของคอนเทนเนอร์
- ต่อไป “
- มาพร้อมกับ “ รายการภายใน ” คลาสที่จะวางเครื่องหมายรายการที่ระบุไว้ในบล็อกรายการ
- “ รายการภาพ - [url ({URL รูปภาพ})] ” คลาสใช้สำหรับจัดเตรียมรูปภาพเป็นเครื่องหมายรายการให้กับองค์ประกอบ
- “ พื้นที่-y-{จำนวน} ” คลาสให้ช่องว่างแนวตั้งระหว่างรายการ
- “ โค้งมน-md ” คลาสทำให้มุมของบล็อกรายการปัดเศษ
- “ bg-{สี}-{จำนวน} ” คลาสใช้สำหรับกำหนดสีพื้นหลังให้กับบล็อกรายการ
- “ พี-2 ” คลาสจัดเตรียมเส้นขอบให้กับองค์ประกอบรายการ
- รายการสามรายการถูกสร้างขึ้นโดยใช้ ' <นั่น> ” แท็ก
เอาท์พุท:
จะเห็นได้ในผลลัพธ์ว่าภาพตัวชี้มือถูกตั้งค่าเป็นเครื่องหมายสำหรับรายการ:
การใช้ตัวแปรสถานะพร้อมคลาสรูปภาพสไตล์รายการใน Tailwind
Tailwind มีสถานะที่หลากหลาย เช่น โฮเวอร์ โฟกัส และใช้งาน ซึ่งช่วยในการสร้างการออกแบบเชิงโต้ตอบ หากต้องการใช้คลาสรูปภาพสไตล์รายการกับสถานะเหล่านี้ จะใช้ไวยากรณ์ต่อไปนี้:
< ul ระดับ = '{state}:list-image-{none หรือ URL ของรูปภาพ}' > < / ul >ลองใช้ไวยากรณ์ที่กำหนดไว้ข้างต้นเพื่อใช้คุณสมบัติรูปภาพสไตล์รายการด้วยเครื่องหมาย “ โฮเวอร์ ” ระบุใน Tailwind ในการสาธิตนี้ รายการจะได้รับรูปภาพเป็นเครื่องหมายรายการ อย่างไรก็ตาม การใช้ “ โฮเวอร์ ” สถานะ รูปภาพจะถูกลบออก
< กอง ระดับ = 'ดิ้นชิดขอบ-ศูนย์' >
< ul ระดับ = ' list-inside list-image-[url(handpointer.png)] hover:list-image-none space-y-2 ปัดเศษ-md bg-green-400 p-2' >
รายการตัวอย่าง
< ที่ >นี่คือรายการแรก< / ที่ >
< ที่ >นี่คือรายการที่สอง< / ที่ >
< ที่ >นี่คือรายการที่สาม< / ที่ >
< / ul >
< / กอง >ในโค้ดข้างต้น ' โฮเวอร์: รายการภาพไม่มี ” คลาสจะลบรูปภาพที่ตั้งไว้ก่อนหน้านี้เป็นเครื่องหมายรายการ
เอาท์พุท:
ในผลลัพธ์ด้านล่าง รูปภาพสไตล์รายการจะรีเซ็ตเป็น “ ไม่มี ” เมื่อผู้ใช้วางเคอร์เซอร์ของเมาส์ไว้เหนือมัน ด้วยเหตุนี้ รูปภาพที่ใช้เป็นเครื่องหมายรายการจึงถูกลบออก
การใช้เบรกพอยต์พร้อมคลาสรูปภาพสไตล์รายการใน Tailwind
เบรกพอยท์คือคำค้นหาสื่อที่ตั้งค่าไว้ล่วงหน้าสำหรับองค์ประกอบใน Tailwind ใช้เพื่อทำให้การออกแบบตอบสนองต่อหน้าจอขนาดต่างๆ เบรกพอยท์เหล่านี้ได้แก่ sm, md, lg, xl และ 2xl หากต้องการใช้คลาสรูปภาพสไตล์รายการที่มีเบรกพอยต์ จะใช้ไวยากรณ์ต่อไปนี้:
< ul ระดับ = '{breakpoint}:list-image-{none หรือ URL รูปภาพ}' > < / ul >ลองใช้ไวยากรณ์ที่กำหนดไว้ข้างต้นเพื่อเปลี่ยนเครื่องหมายรายการจาก ' ภาพ ' ถึง ' ไม่มี ” โดยใช้เบรกพอยต์ ในตัวอย่างนี้ เครื่องหมายรูปภาพจะถูกลบออกเมื่อขนาดหน้าจอเพิ่มความกว้างของ “ แพทยศาสตร์ ” เบรกพอยต์:
< กอง ระดับ = 'ดิ้นชิดขอบ-ศูนย์' >
< ul ระดับ = ' list-inside list-image-[url(handpointer.png)] md:list-image-none space-y-2 ปัดเศษ-md bg-green-400 p-2' >
รายการตัวอย่าง
< ที่ >นี่คือรายการแรก< / ที่ >
< ที่ >นี่คือรายการที่สอง< / ที่ >
< ที่ >นี่คือรายการที่สาม< / ที่ >
< / ul >
< / กอง >ในโค้ดข้างต้น ' md: รายการภาพไม่มี ” คลาสจะลบเครื่องหมายรายการรูปภาพเมื่อขนาดหน้าจอถึงขนาด “ แพทยศาสตร์ ” เบรกพอยต์
เอาท์พุท:
ในเอาต์พุตด้านล่าง เครื่องหมายรูปภาพจะถูกลบออกเมื่อขนาดหน้าจอถึงจุดพัก md:
นั่นคือทั้งหมดที่เกี่ยวกับการตั้งค่ารูปภาพสไตล์รายการใน Tailwind
บทสรุป
Tailwind มีคลาสรูปภาพสไตล์รายการที่กำหนดไว้ล่วงหน้า 2 คลาสสำหรับการลบหรือตั้งค่าเครื่องหมายรายการขององค์ประกอบให้กับรูปภาพ “ รายการภาพ - [url ({URL รูปภาพ})] ” คลาสให้ภาพที่ระบุเป็นเครื่องหมายรายการ “ รายการภาพไม่มี ” คลาสจะลบรูปภาพใด ๆ ที่ให้ไว้ก่อนหน้านี้เป็นเครื่องหมายรายการ บทความนี้มีขั้นตอนการตั้งค่าประเภทสไตล์รายการใน Tailwind