リンク

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変数

以下は、関連する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;
}