リンク
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;
}