連結
Link 元件讓您可以使用主題色彩和排版樣式來自訂錨點標籤。
簡介
Joy UI Link 元件取代了原生 HTML <a> 元素，並接受與 Typography 元件相同的 props，以及 MUI System props。
<Link />Playground
基礎
import Link from '@mui/joy/Link';
Joy UI Link 的行為類似於原生 HTML <a>，因此預設會以底線呈現，且在 hover 時沒有背景顏色。
下面的範例展示了 Link 可用的兩種基本狀態：預設和停用。別忘了永遠指定 href 值
層級
Link 元件隨附所有 Typography 層級可供選擇。
顏色
主題中包含的每個調色盤都可透過 color prop 使用。試試看將不同的顏色與不同的變體組合。
底線
使用 underline prop 來控制底線在 Link 元件上的行為。它有三個值：hover、always 和 none。
已停用
使用 disabled prop 來停用互動和焦點
Overlay prop
使用 overlay prop 將整個元件變成可點擊的連結。下面的範例展示如何將其與 Card 元件一起使用，以確保適當的可訪問性。
作為按鈕
若要將 Link 元件作為按鈕使用，請將 button 值指定給 component prop。這在兩種情況下很有用
- 連結沒有有意義的 href。
- 設計看起來更像按鈕而不是連結。
<Link
component="button"
onClick={() => {
// ...process something
}}
>
Do something
</Link>
與 Typography 一起使用
Link 元件可以作為 Typography 元件的子元件使用。在這種情況下，Link 將繼承其 Typography 父元件的排版層級比例，除非您在 Link 本身指定 level prop 的值。
標題
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Magna Aliqua。Maecenas sed enim ut sem viverra aliquet eget。
第三方路由函式庫
以下章節說明如何將 Link 元件與具有自己可比較元件的第三方工具整合。
Next.js Pages Router
以下是使用 Next.js 的 Link 元件 的範例
import NextLink from 'next/link';
import Link from '@mui/joy/Link';
<NextLink href="/docs" passHref>
<Link>Read doc</Link>
</NextLink>;
React Router
以下是使用 React Router 的 Link 元件 的範例。
import { Link as RouterLink } from 'react-router';
import Link from '@mui/joy/Link';
<Link component={RouterLink} to="/docs">
Read doc
</Link>;
安全性
當將 target="_blank" 與另一個網站頁面的連結一起使用時，Google Chrome 開發人員文件建議新增 rel="noopener" 或 rel="noreferrer"，以避免潛在的安全性問題。
rel="noopener"可防止新頁面存取window.opener屬性，並確保它在個別的進程中執行。若沒有這個，目標頁面可能會將您的頁面重新導向至惡意 URL。rel="noreferrer"具有相同的效果，但也會防止 Referer 標頭傳送至新頁面。請注意，移除 referrer 標頭會影響分析。
可訪問性
以下是一些確保連結元件可訪問性的提示，基於 WAI-ARIA Authoring Practices。
- 文案撰寫： 避免使用「點擊這裡」或「前往」等通用詞語作為行動呼籲。相反地，使用描述性文字來告知使用者點擊連結後會找到什麼。
- 設計： 為了良好的使用者體驗，連結應該從頁面上的文字中脫穎而出。保持預設的
underline="always"行為是個安全的選擇。 - Href： 如果連結沒有有意義的 href，應該使用
<button>元素呈現。
常見範例
展示如何使用 Link 元件和其他元件作為裝飾器來組合設計的範例。