ข้ามไปเนื้อหา
แบรนด์ที่แสดง
ธีม: ตามระบบ
คอมโพเนนต์ทั้งหมด

Arrow link

ลิงก์ในเนื้อหาที่ขีดเส้นใต้หนาขึ้นและลูกศรขยับเมื่อชี้

ui/link.tsxServer safe

ในเนื้อหา

เส้นใต้หนาขึ้นและลูกศรก้าวไปข้างหน้าเมื่อชี้ ลิงก์ภายนอกใช้ลูกศรทแยงและเปิดแท็บใหม่พร้อมบอกโปรแกรมอ่านหน้าจอ
อ่านบันทึกทั้งหมดlearn.aswinology.com (เปิดในแท็บใหม่)นโยบายความเป็นส่วนตัว
tsx
<ArrowLink href="/notes">อ่านบันทึกทั้งหมด</ArrowLink>
<ArrowLink href="https://learn.aswinology.com" external>learn.aswinology.com</ArrowLink>
<ArrowLink href="/privacy" subtle plain>นโยบายความเป็นส่วนตัว</ArrowLink>

ในย่อหน้า

คอร์สนี้ต่อยอดจาก พื้นฐาน Prompting ถ้ายังไม่เคยเรียน แนะนำให้เริ่มที่นั่นก่อน หรือดู บันทึกการทดลอง (เปิดในแท็บใหม่) เพื่อเห็นตัวอย่างจริง

Props

PropTypeDefaultคำอธิบาย
externalbooleanfalseลูกศรทแยง เปิดแท็บใหม่ rel=noopener
subtlebooleanfalseไม่มีเส้นใต้จนกว่าจะชี้ ใช้ในรายการหนาแน่นและส่วนท้าย
plainbooleanfalseไม่แสดงลูกศร
asElementType"a"เช่น Link ของ Next.js

ใช้เมื่อไร

ควรทำ

  • ข้อความลิงก์บอกปลายทางได้ด้วยตัวเอง
  • ใช้ Button เมื่อเป็นการกระทำ ใช้ลิงก์เมื่อพาไปที่อื่น

ไม่ควรทำ

  • เขียนว่า คลิกที่นี่
  • ใช้สี accent เป็นสีข้อความลิงก์บนพื้นสว่าง ใช้ accent-text แทน