Link Vue Component

Link is main component to create links for navigation, custom actions, switching tabs, open/close panels, etc.

Usage examples

Navigation Link

<f7-link href="/about/">About</f7-link>

Renders to:

<a href="/about/" class="link">About</a>

Back Navigation Link

<f7-link back>Back</f7-link>

Renders to:

<a href="#" class="link back">Back</a>

With Router Parameters

<f7-link href="/about/" :animate-pages="false" :ignore-cache="true">About</f7-link>

Renders to:

<a href="/about/" class="link" data-animate-pages="false" data-ignore-cache="true">About</a>

External Link

<f7-link href="http://google.com" external>Google</f7-link>

Renders to:

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

Tab Link

<!-- Tabs -->
<f7-tabs>
  <f7-tab id="tab-1" active>Tab 1</f7-tab>
  <f7-tab id="tab-1">Tab 2</f7-tab>
</f7-tabs>
<!-- Switch Between Tabs -->
<f7-link tab-link="#tab-1">Show Tab 1</f7-link>
<f7-link tab-link="#tab-2">Show Tab 2</f7-link>

Renders to:

<!-- Tabs -->
<div class="tabs">
  <div class="tab active" id="tab-1">Tab 1</div>
  <div class="tab" id="tab-2">Tab 2</div>
</div>
<!-- Switch Between Tabs -->
<a href="#" data-tab="#tab-1" class="tab-link">Show Tab 1</a>
<a href="#" data-tab="#tab-2" class="tab-link">Show Tab 2</a>

Route Tab Link

Note, this requires tab routes to be configured.

<!-- Tabs -->
<f7-tabs>
  <f7-tab route-tab-id="tab-1">Tab 1</f7-tab>
  <f7-tab route-tab-id="tab-1">Tab 2</f7-tab>
</f7-tabs>
<!-- Switch Between Tabs -->
<f7-link route-tab-link="#tab-1" href="/tabs/">Show Tab 1</f7-link>
<f7-link route-tab-link="#tab-2" href="/tabs/tab-2/">Show Tab 2</f7-link>

Renders to:

<!-- Tabs -->
<div class="tabs">
  <div class="tab active">Tab 1</div>
  <div class="tab">Tab 2</div>
</div>
<!-- Switch Between Tabs -->
<a href="#" class="tab-link">Show Tab 1</a>
<a href="#" class="tab-link">Show Tab 2</a>

Open and Close Panel

<f7-link open-panel="left">Open Left Panel</f7-link>
<f7-link close-panel>Close Panel</f7-link>

Renders to:

<a href="#" data-panel="left" class="link open-panel">Open Left Panel</a>
<a href="#" class="link close-panel">Close Panel</a>

Open and Close Popup

<f7-link open-popup="#my-popup">Open Popup</f7-link>
<f7-link close-popup="#my-popup">Close Popup</f7-link>

Renders to:

<a href="#" data-popup="#my-popup" class="link open-popup">Open Popup</a>
<a href="#" data-popup="#my-popup" class="link close-popup">Close Popup</a>

With Icon & Color

<f7-link icon-f7="home" text="Home" color="red"></f7-link>

Renders to:

<a href="#" class="link color-red">
  <i class="icon f7-icons">home</i>
  <span>Home</span>
</a>

Properties

Prop	Type	Default	Description
no-link-class	boolean		Removes "link" class
color	string		Link color. One of default colors
ripple-color	string		Link Touch-ripple color (affects only Material theme). One of default colors
theme	string		Link color theme. One of default colors
bg	string		Link background color. One of default colors
text	string		Link text
Badge Properties
badge	string/number		Badge count
badgeColor	string		Badge color. One of default colors
Control Links
tab-link	string/boolean		Enables tab link and specify CSS selector of the target tab (if specified as a string)
open-panel	string/boolean		Defines panel to open. Can be "left" or "right"
close-panel	boolean		Closes panel on click
open-popup	string/boolean		CSS selector of the popup to open on click
close-popup	string/boolean		CSS selector of the popup to close on click. Or boolean property to close currently opened popup
open-popover	string/boolean		CSS selector of the popover to open on click
close-popover	string/boolean		CSS selector of the popover to close on click. Or boolean property to close currently opened popover
open-picker	string/boolean		CSS selector of the picker to open on click
close-picker	string/boolean		CSS selector of the picker to close on click. Or boolean property to close currently opened picker
open-login-screen	string/boolean		CSS selector of the login screen to open on click
close-login-screen	string/boolean		CSS selector of the login screen to close on click. Or boolean property to close currently opened login screen
open-sortable	string/boolean		CSS selector of the Sortable list to open on click
close-sortable	string/boolean		CSS selector of the Sortable list to close on click. Or boolean property to close currently opened Sortable list
toggle-sortable	string/boolean		CSS selector of the Sortable list to toggle on click. Or boolean property to toggle currently opened/closed Sortable list
Navigation / Router Properties
href	string	#	URL of the page to load
view	string		CSS selector of the View to load the page
no-fast-click	boolean		Disables fast click
external	boolean		Enable to bypass Framework7's link click handler
back	boolean		Enables back navigation link
force	boolean		Force page to load and ignore previous page in history (use together with back prop)
reload	boolean		Reloads new page instead of the currently active one
animate-pages	boolean		Disables pages animation
ignore-cache	boolean		Ignores caching
page-name	string		Name of the page to load
template	string		Template name to load
route-tab-link	string		Used for tab routes. Connects the link to a tab with the same value in its route-tab-id so that when the tab is active, the link appears as active too
Icon Properties
icon-only	boolean		Enable when used in navbar with icon only inside
icon-badge	string/number		Adds badge to the icon (intended to be used in Tabbar's icons)
icon-size	string/number		Icon size in px
icon	string		Custom icon class
icon-f7	string		Name of F7 Icons font icon
icon-material	string		Name of Material Icons font icon
icon-fa	string		Name of Font Awesome font icon
icon-ion	string		Name of Ionicons font icon
icon-if-ios	string		Icon to be used in case of iOS theme is used. Consists of icon family and icon name divided by colon, e.g. f7:home or ion:home
icon-if-material	string		Icon to be used in case of Material theme is used. Consists of icon family and icon name divided by colon, e.g. material:home or fa:home