Link
Link element is used to call app actions and for navigation between pages (routes)
Link Layout
<a class="link" href="path/to/somewhere">Link Text</a>
If you use link with icon and text, then the following layout is recommended:
<a class="link" href="path/to/somewhere">
<i class="icon"></i>
<span>Link Text</span>
</a>
If you use link with icon only, then:
<a class="link icon-only" href="path/to/somewhere">
<i class="icon"></i>
</a>
Bypass Links Handler
It is possible to bypass F7 link handler (if you want to add custom logic to link, or want it to direct to external website). In this case we need additional external
class:
<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: var(--f7-link-highlight-black);
}
.theme-dark {
--f7-link-highlight-color: var(--f7-link-highlight-white);
}
当前内容版权归 Framework7 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 Framework7 .