วิธีการตั้งค่าประเภทสไตล์รายการใน Tailwind

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

บทความนี้จะกล่าวถึงขั้นตอนการตั้งค่าประเภทสไตล์รายการใน Tailwind

วิธีการตั้งค่าประเภทสไตล์รายการใน Tailwind

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

• รายการดิสก์: ชั้นเรียนนี้จะจัดให้มีหัวข้อย่อยแบบกลมเป็นเครื่องหมายรายการ
• รายการทศนิยม: คลาสนี้จะให้เลขทศนิยมเป็นเครื่องหมายรายการ
• รายการไม่มี: คลาสนี้จะลบเครื่องหมายรายการออกจากรายการ

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

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

คำอธิบายของโค้ดข้างต้นมีดังนี้:

• เอ “

  ” องค์ประกอบถูกสร้างขึ้นด้วย “ เอ็กแอล ” ขนาดตัวอักษร และ “ ตัวหนา ” น้ำหนักตัวอักษร เนื้อหาข้อความขององค์ประกอบถูกวางไว้ตรงกลางโดยใช้เครื่องหมาย “ ศูนย์ข้อความ ' ระดับ.

• หลังจากการขึ้นบรรทัดใหม่ “
  ” องค์ประกอบถูกสร้างขึ้นและมาพร้อมกับ “ ดิ้น ' ระดับ. ซึ่งจะสร้างคอนเทนเนอร์ที่จะจัดแนวรายการย่อยในแนวนอน
• “ ปรับศูนย์ ” คลาสจะวางสิ่งของไว้ตรงกลางคอนเทนเนอร์
• “ พื้นที่-x-{ขนาด} ” คลาสจัดให้มีช่องว่างแนวนอนระหว่างรายการ
• “ bg-{สี}-{จำนวน} ” คลาสกำหนดพื้นหลังของคอนเทนเนอร์ให้เป็นสีที่ระบุ
• “ โค้งมน-lg ” คลาสทำให้มุมของคอนเทนเนอร์โค้งมน
• “ mx-4 ” คลาสจัดเตรียมระยะขอบแนวนอนให้กับคอนเทนเนอร์ดิ้น
• “ พี-2 ” คลาสจัดเตรียมการเสริมให้กับคอนเทนเนอร์ดิ้น
• จากนั้น องค์ประกอบรายการสามรายการจะถูกสร้างขึ้นและมาพร้อมกับประเภทสไตล์รายการที่แตกต่างกันโดยใช้เครื่องหมาย “ รายการ-{ประเภท} ' ระดับ.

เอาท์พุท:

จากผลลัพธ์ด้านล่าง จะเห็นได้ว่ารายการแรกใช้สัญลักษณ์แสดงหัวข้อย่อย รายการที่สองใช้ตัวเลขทศนิยม และรายการที่สามไม่ได้ใช้เครื่องหมายรายการใดๆ

การใช้คลาสสไตล์รายการกับตัวแปรสถานะใน Tailwind

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

นี่คือตัวอย่างของการใช้ประเภทสไตล์รายการที่มีสถานะ 'โฮเวอร์' ซึ่งผู้ใช้สามารถเปลี่ยนสไตล์มาร์กเกอร์ได้โดยการวางเมาส์เหนือบล็อกรายการ:

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

เอาท์พุท:

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

การใช้คลาสสไตล์รายการพร้อมเบรกพอยต์ใน Tailwind

เบรกพอยท์ใช้สำหรับการออกแบบเลย์เอาท์แบบตอบสนองสำหรับขนาดหน้าจอที่แตกต่างกัน เบรกพอยต์เริ่มต้น 5 รายการจาก Tailwind ได้แก่ sm, md, lg, xl และ 2xl ไวยากรณ์ต่อไปนี้ใช้ในการจัดเตรียมคลาสสไตล์ประเภทรายการที่มีเบรกพอยต์:

นี่คือตัวอย่างการใช้ประเภทสไตล์รายการด้วยเครื่องหมาย “ แพทยศาสตร์ ” เบรกพอยต์ โดยที่รูปแบบเครื่องหมายจะเปลี่ยนเมื่อขนาดหน้าจอถึงเบรกพอยต์ “md”:

ในโค้ดข้างต้น รายการจะมีเครื่องหมาย “ รายการดิสก์ ” คลาสเป็นสไตล์เริ่มต้น อย่างไรก็ตาม การใช้ “ md: รายการทศนิยม ” คลาสประเภทสไตล์รายการจะเปลี่ยนไปตามขนาดหน้าจอ “md”

เอาท์พุท:

ดังที่คุณเห็นในผลลัพธ์ด้านล่าง ประเภทสไตล์รายการจะเปลี่ยนจากดิสก์เป็นทศนิยมเมื่อขนาดหน้าจอถึง ' แพทยศาสตร์ ” เบรกพอยต์

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

บทสรุป

Tailwind มีคลาสประเภทสไตล์รายการที่กำหนดไว้ล่วงหน้า 3 คลาสสำหรับการเปลี่ยนสไตล์รายการขององค์ประกอบ “ รายการดิสก์ ” คลาสแสดงสัญลักษณ์แสดงหัวข้อย่อยสำหรับการแสดงรายการ “ รายการทศนิยม ” คลาสระบุตัวเลขสำหรับแสดงรายการสินค้า “ รายการไม่มี ” คลาสสร้างรายการที่ไม่ได้ใช้เครื่องหมายรายการใด ๆ บทความนี้มีขั้นตอนการตั้งค่าประเภทสไตล์รายการใน Tailwind