連結

連結元素用於呼叫應用程式動作和在頁面 (路由) 之間導覽

連結版面

<a class="link" href="path/to/somewhere">Link Text</a>

如果你使用具有圖示和文字的連結，建議採用以下版面

<a class="link" href="path/to/somewhere">
  <i class="icon"></i>
  <span>Link Text</span>
</a>

如果你僅使用具有圖示的連結，則

<a class="link icon-only" href="path/to/somewhere">
  <i class="icon"></i>
</a>

繞過連結處理器

可以繞過 F7 連結處理器 (如果你想在連結中加入自訂邏輯，或希望它導向外部網站)。在此情況下，我們需要額外的 external 類別

<a class="link external" href="http://google.com">Open Google</a>

CSS 變數

以下是相關 CSS 變數 (CSS 自訂屬性) 清單。

:root {
  --f7-link-highlight-black: rgba(0, 0, 0, 0.1);
  --f7-link-highlight-white: rgba(255, 255, 255, 0.15);
  --f7-link-highlight-color: rgba(var(--f7-theme-color-rgb), 0.15);
}
.ios {
  --f7-link-pressed-opacity: 0.3;
}