บทความนี้จะอธิบายการใช้งานการวางเมาส์เหนือ โฟกัส และสถานะอื่นๆ ที่มีคุณสมบัติตำแหน่งใน Tailwind
จะใช้ Hover, Focus และสถานะอื่น ๆ ด้วยคุณสมบัติตำแหน่งใน Tailwind ได้อย่างไร
การวางเมาส์เหนือ โฟกัส และสถานะอื่นๆ ใน Tailwind ใช้เพื่อจัดรูปแบบองค์ประกอบใน Tailwind โดยนำเสนออินเทอร์เฟซที่น่าดึงดูดและใช้งานง่ายและมอบประสบการณ์ที่น่าดึงดูดให้กับผู้ใช้ บางครั้ง คุณสมบัติของตำแหน่งจะถูกนำไปใช้เพื่อรักษาประสบการณ์ให้ได้มาตรฐานสูงสุด
วิธีที่ 1: การใช้ตัวแปรโฮเวอร์พร้อมคุณสมบัติตำแหน่ง
ตัวแปรโฮเวอร์ใช้เพื่อจัดสไตล์องค์ประกอบที่เลือกเมื่อผู้ใช้เลื่อนเคอร์เซอร์ไปเหนือองค์ประกอบที่เลือกนั้น “ ตำแหน่ง ” คุณสมบัติสามารถใช้ร่วมกับ “ โฮเวอร์ ” เพื่อกำหนดตำแหน่งก่อนและหลังการโฮเวอร์ คู่นี้ใช้เพื่อสร้างประสบการณ์ที่น่าดึงดูดให้กับผู้ใช้
ขั้นตอนที่ 1: เพิ่มคุณสมบัติโฮเวอร์พร้อมตำแหน่งใน HTML
ในโค้ดด้านล่าง คุณสมบัติโฮเวอร์จะถูกนำไปใช้พร้อมกับคุณสมบัติตำแหน่งบน “ ปุ่ม ' องค์ประกอบ:
< ร่างกาย >
< ปุ่ม ระดับ = 'ญาติ w-40 h-12 bg-blue-500 hover:absolute hover:translate-x-4 hover:translate-y-4 ' >
< พี ระดับ = 'ข้อความ-ข้อความสีขาว-ศูนย์' > เลื่อนฉัน < / พี >
< / ปุ่ม >
< / ร่างกาย >
ในรหัสนี้:
- “ ญาติ ” คลาสตั้งค่าปุ่มที่สัมพันธ์กับเพจหลัก
- “ w-40 ” ตั้งค่าความกว้างเป็น 40px
- “ ชั่วโมง-12 ” ตั้งค่าความสูงเป็น 12px
- “ บีจี-บลู-500 ” ตั้งค่าสีพื้นหลังเป็นสีน้ำเงิน
- “ โฮเวอร์: สัมบูรณ์ ” เปลี่ยนตำแหน่งสัมพัทธ์ของปุ่มเป็นค่าสัมบูรณ์เมื่อเคอร์เซอร์ของเมาส์เลื่อนไปเหนือปุ่มนั้น
- “ โฮเวอร์: แปล-x-4 ” เลื่อนปุ่ม 4px ไปทางขวาบนแกน x และในเวลาเดียวกัน 4px ลงด้วย “ โฮเวอร์: แปล-y-4 '.
- ข้อความถูกจัดกึ่งกลางโดย “ ศูนย์ข้อความ '.
ขั้นตอนที่ 2: การยืนยัน
ดูตัวอย่างหน้าเว็บที่สร้างโดยโค้ดด้านบนซึ่งมีลักษณะดังนี้:
ผลลัพธ์แสดงว่าองค์ประกอบถูกย้ายไปในทิศทางที่ถูกต้องและลดลง 4px
วิธีที่ 2: การใช้ Focus Variant พร้อมคุณสมบัติตำแหน่ง
รูปแบบโฟกัสใช้เพื่อจัดรูปแบบองค์ประกอบ HTML เพื่อดึงดูดความสนใจของผู้ใช้และให้ความสำคัญกับองค์ประกอบบางอย่าง ตำแหน่งยังสามารถนำไปใช้ร่วมกันเพื่อวางตำแหน่งออบเจ็กต์ที่สัมพันธ์หรือสัมบูรณ์กับเพจหลัก จะทำเพื่อให้ผู้ใช้มีส่วนร่วม
ขั้นตอนที่ 1: เพิ่มคุณสมบัติโฟกัสพร้อมตำแหน่งใน HTML
สร้างไฟล์ HTML และใช้คุณสมบัติโฟกัสในตำแหน่งที่เหมาะสม ตัวอย่างเช่น ตำแหน่งสัมพัทธ์จะถูกนำไปใช้กับช่องป้อนข้อมูลในโค้ดด้านล่าง:
< / ร่างกาย >
ในรหัสนี้:
- กำหนดตำแหน่งของ “ ป้อนข้อมูล ” องค์ประกอบสู่ “ ญาติ '.
- “ โฟกัส: แปล-x-4 ” เลื่อนปุ่ม 4px ไปทางขวาบนแกน x และในเวลาเดียวกัน 4px ลงด้วย “ โฟกัส: แปล-y-4 ” เมื่อผู้ใช้คลิกที่ช่องป้อนข้อมูล
- “ โฟกัส: โครงร่าง-2 ” สร้างโครงร่างรอบๆ กล่องข้อความเมื่อผู้ใช้คลิก
ขั้นตอนที่ 2: ตรวจสอบผลลัพธ์
ดูตัวอย่างหน้าเว็บที่สร้างด้วยโค้ดเพื่อสังเกตการเปลี่ยนแปลง:
ผลลัพธ์ด้านบนแสดงให้เห็นว่ามีการใช้สไตล์กับองค์ประกอบที่เลือกเมื่อได้รับการโฟกัส
การใช้ตัวแปรที่ใช้งานกับคุณสมบัติตำแหน่ง
ตัวแปรที่ใช้งานอยู่ใช้เพื่อจัดรูปแบบองค์ประกอบ HTML เพื่อกำหนดสถานะเมื่อผู้ใช้คลิกและกดปุ่มหรือองค์ประกอบอื่น ๆ ค้างไว้ คุณสมบัติตำแหน่งสามารถทำให้เอาต์พุตน่าสนใจยิ่งขึ้นสำหรับผู้ใช้ที่สร้างประสบการณ์แบบไดนามิกมากขึ้น
ขั้นตอนที่ 1: เพิ่มคุณสมบัติโฮเวอร์พร้อมตำแหน่งใน HTML
สร้างไฟล์ HTML และใช้ตัวแปรที่ใช้งานอยู่ร่วมกับคุณสมบัติตำแหน่ง ตัวอย่างเช่น คุณสมบัติเหล่านี้จะนำไปใช้กับปุ่มในตัวอย่างโค้ดด้านล่าง:
< ปุ่ม ระดับ = 'ญาติ w-48 h-12 bg-blue-500 ใช้งานอยู่: แปล-y-2 ใช้งานอยู่: bg-green-400' >
< ช่วง ระดับ = 'ข้อความ-สีขาว' >คลิกฉัน< / ช่วง >
< / ปุ่ม >
< / ร่างกาย >
ในโค้ดข้างต้น:
- กำหนดตำแหน่งของ “ ปุ่ม ” องค์ประกอบถึง “ ญาติ '.
- “ บีจี-บลู-500 ” ตั้งค่าสีพื้นหลังของปุ่มเป็นสีน้ำเงิน
- “ ใช้งานอยู่: แปล-y-2 ” ย้ายปุ่มลง 2px และเปลี่ยนสีของปุ่มเป็นสีเขียวโดย “ ใช้งานอยู่: bg-green-400 '.
ขั้นตอนที่ 2: ตรวจสอบผลลัพธ์
ดูตัวอย่างหน้าเว็บที่สร้างโดยโค้ดด้านบน และคลิกปุ่มค้างไว้เพื่อดูการเปลี่ยนแปลง:
GIF ด้านบนแสดงสไตล์ขององค์ประกอบปุ่มที่เลือกได้รับการเปลี่ยนแปลงเมื่อเปิดใช้งาน
เพียงเท่านี้คุณก็สามารถใช้โฮเวอร์ โฟกัส และสถานะอื่นๆ ที่มีคุณสมบัติตำแหน่งใน Tailwind ได้
บทสรุป
สามารถใช้โฮเวอร์ โฟกัส และสถานะอื่นๆ กับคุณสมบัติตำแหน่งได้โดยใช้คลาสที่กำหนดไว้ล่วงหน้าของโฮเวอร์ โฟกัส และสถานะอื่นๆ จากนั้นใช้แอตทริบิวต์คลาสตำแหน่ง เช่น “ แน่นอน , ' ญาติ ” และอื่นๆ ร่วมกัน บล็อกนี้ได้แสดงวิธีใช้โฮเวอร์ โฟกัส และสถานะอื่นๆ ด้วยอรรถประโยชน์ตำแหน่งใน Tailwind