リンク

Link要素は、アプリのアクションを呼び出したり、ページ（ルート）間のナビゲーションに使用されます。

リンクのレイアウト

<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 Variables

Below is the list of related CSS variables (CSS custom properties).

: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;
}
.aurora {
  --f7-link-pressed-opacity: 0.3;
  --f7-link-hover-opacity: 0.65;
}