บทความนี้จะกล่าวถึงขั้นตอนการใช้คุณสมบัติความสูงขั้นต่ำกับ Hover, Focus และสถานะอื่นๆ ใน Tailwind
บันทึก: หากต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับคลาสความสูงขั้นต่ำใน Tailwind โปรดอ่านสิ่งนี้ บทความ บนเว็บไซต์ของเรา
จะใช้คุณสมบัติความสูงขั้นต่ำกับ Hover, Focus และสถานะอื่น ๆ ใน Tailwind ได้อย่างไร
Tailwind จัดเตรียมตัวแปรสถานะเริ่มต้นที่สามารถให้กับคุณสมบัติการออกแบบได้ ตัวแปรสถานะเหล่านี้ได้แก่ 'โฮเวอร์', 'โฟกัส' และ 'ใช้งานอยู่' คำอธิบายของตัวแปรสถานะเหล่านี้มีดังนี้:
- “ โฮเวอร์ ” สถานะจะถูกทริกเกอร์เมื่อใดก็ตามที่เคอร์เซอร์ของเมาส์วางอยู่เหนือองค์ประกอบ
- “ จุดสนใจ สถานะ ” จะถูกทริกเกอร์เมื่อใดก็ตามที่องค์ประกอบอยู่ในโฟกัส
- “ คล่องแคล่ว สถานะ ” จะถูกทริกเกอร์เมื่อใดก็ตามที่องค์ประกอบถูกเปิดใช้งานหรือคลิก
ลองใช้คุณสมบัติความสูงขั้นต่ำกับแต่ละสถานะเหล่านี้ทีละรายการ
การใช้คุณสมบัติความสูงขั้นต่ำพร้อมสถานะโฮเวอร์
หากต้องการใช้ “ ความสูงขั้นต่ำ ” ที่มีตัวแปรสถานะโฮเวอร์ใน Tailwind จะใช้ไวยากรณ์ต่อไปนี้:
< กอง ระดับ = 'โฮเวอร์:min-h-{size}...' > < / กอง >
ลองใช้ไวยากรณ์ที่กำหนดไว้ข้างต้นในการสาธิต ในตัวอย่างนี้ เราจะเพิ่มความสูงขั้นต่ำขององค์ประกอบเมื่อใดก็ตามที่เคอร์เซอร์ของเมาส์เลื่อนไปเหนือองค์ประกอบ
< กอง ระดับ = 'min-h-fit โค้งมน-md bg-blue-700 ข้อความ-ศูนย์ข้อความ-สีขาว โฮเวอร์:min-h-หน้าจอ' > โฮเวอร์เพื่อเพิ่มขั้นต่ำ ความสูง < / กอง >คำอธิบายของโค้ดข้างต้นมีดังนี้:
- “ นาที-w-พอดี ” คลาสกำหนดขีดจำกัดความสูงขั้นต่ำเป็นความสูงที่ต้องการโดยองค์ประกอบ div เพื่อให้พอดีกับเนื้อหา
- “ โฮเวอร์: min-w-screen ” คลาสจะกำหนดขีดจำกัดความสูงขั้นต่ำเท่ากับ 100% ของขนาดหน้าจอ
- “ โค้งมน-md , ' bg-{สี}-{จำนวน} , ' ศูนย์ข้อความ ', และ ' ข้อความ-สีขาว ” คลาสมีหน้าที่รับผิดชอบต่อมุมโค้งมน สีพื้นหลัง ข้อความที่จัดกึ่งกลาง และสีข้อความสีขาวสำหรับองค์ประกอบ div ตามลำดับ มุมขององค์ประกอบ div โค้งมน
เอาท์พุท:
จากผลลัพธ์ด้านล่าง เห็นได้ชัดเจนว่าความสูงขั้นต่ำขององค์ประกอบจะเพิ่มขึ้นเป็น 100% ของขนาดหน้าจอเมื่อเคอร์เซอร์ของเมาส์เลื่อนอยู่เหนือองค์ประกอบนั้น
การใช้คุณสมบัติความสูงขั้นต่ำพร้อมสถานะโฟกัส
หากต้องการใช้ “ ความสูงขั้นต่ำ ” ที่มีสถานะโฟกัสใน Tailwind จะใช้ไวยากรณ์ต่อไปนี้:
< กอง ระดับ = 'โฟกัส:min-h-{size}...' > < / กอง >ลองใช้ไวยากรณ์ที่กำหนดไว้ข้างต้นในการสาธิต ในตัวอย่างนี้ ความสูงขั้นต่ำของฟิลด์อินพุตจะเพิ่มขึ้นเมื่อผู้ใช้เพ่งความสนใจไปที่ฟิลด์นั้น
< ป้อนข้อมูล ตัวยึดตำแหน่ง = 'มุ่งเน้นไปที่ช่องป้อนข้อมูลนี้' ระดับ = 'min-h-0 h-fit w-48 ปัดเศษ-md bg-gray-200 โฟกัสตรงกลางข้อความ: min-h- [35%]' >< / ป้อนข้อมูล >คำอธิบายของโค้ดข้างต้นมีดังนี้:
- หนึ่ง ' ป้อนข้อมูล ” ถูกสร้างขึ้นพร้อมกับข้อความบางส่วนในแอตทริบิวต์ตัวยึดตำแหน่ง
- มีการจำกัดความสูงขั้นต่ำไว้ที่ 0px โดยใช้เครื่องหมาย “ นาที-h-0 ' ระดับ. ดังนั้น นักพัฒนาจึงตั้งค่าความสูงเริ่มต้นขององค์ประกอบให้เท่ากับความสูงที่ต้องการเพื่อให้พอดีกับเนื้อหาโดยใช้เครื่องหมาย “ H-พอดี ' ระดับ.
- “ โฟกัส: นาที-ชั่วโมง-[35%] ” คลาสจะเพิ่มขีดจำกัดความสูงขั้นต่ำของฟิลด์อินพุตเมื่อผู้ใช้โฟกัสไปที่มัน
เอาท์พุท:
จากเอาต์พุตด้านล่างจะเห็นได้ชัดว่าความสูงของฟิลด์อินพุตเพิ่มขึ้นเมื่อผู้ใช้เพ่งความสนใจไปที่ฟิลด์นั้น เนื่องจากขีดจำกัดความสูงขั้นต่ำจะเพิ่มจาก 0px เป็น 35% ของความสูงของหน้าจอ
การใช้คุณสมบัติความสูงขั้นต่ำพร้อมสถานะแอ็กทีฟใน Tailwind
หากต้องการใช้ “ ความสูงขั้นต่ำ ” คุณสมบัติที่มีตัวแปรสถานะแอ็คทีฟใน Tailwind จะใช้ไวยากรณ์ต่อไปนี้:
< กอง ระดับ = 'ใช้งานอยู่: min-h-{size}...' > < / กอง >ลองใช้ไวยากรณ์ที่กำหนดไว้ข้างต้นในการสาธิต ในตัวอย่างนี้ ความสูงขั้นต่ำของปุ่มจะเพิ่มขึ้นเมื่อผู้ใช้คลิกอย่างแข็งขัน
< ปุ่ม ระดับ = 'min-h-0 h-fit w-48 ปัดเศษ-md bg-blue-300 ศูนย์ข้อความใช้งาน: min-h- [35%]' > คลิกเพื่อเพิ่ม ความสูง < / ปุ่ม >ปุ่มถูกสร้างขึ้นโดยจำกัดความสูงขั้นต่ำที่ 0px อย่างไรก็ตาม การใช้ “ ใช้งานอยู่: นาที-ชั่วโมง-[35%] ” ขีดจำกัดความสูงขั้นต่ำจะเพิ่มขึ้นจาก 0px เป็น 35% ของขนาดหน้าจอทุกครั้งที่คลิกปุ่ม
เอาท์พุท:
จะเห็นได้ในผลลัพธ์ต่อไปนี้ว่าความสูงขั้นต่ำของปุ่มจะเพิ่มขึ้นเมื่อผู้ใช้คลิก
นั่นคือทั้งหมดที่เกี่ยวกับการใช้คุณสมบัติความสูงขั้นต่ำกับ Tailwind โฮเวอร์ โฟกัส และสถานะอื่นๆ ใน Tailwind
บทสรุป
ตัวแปรสถานะ เช่น โฮเวอร์ โฟกัส และใช้งานอยู่ใน Tailwind ช่วยให้ผู้ใช้สร้างเลย์เอาต์การออกแบบแบบไดนามิกได้ หากต้องการใช้คลาสความสูงขั้นต่ำกับตัวแปรสถานะใน Tailwind ให้ ' โฮเวอร์: min-h-{value} , ' โฟกัส:min-h-{value} ', และ ' ใช้งานอยู่: min-h-{value} ” มีการใช้คลาส บทความนี้ได้ระบุขั้นตอนการใช้โฮเวอร์ โฟกัส และสถานะอื่นๆ ที่มีคลาสความสูงขั้นต่ำใน Tailwind