-
Get Started
-
Vue Components
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Item
- List Button
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Toggle
- Toolbar / Tabbar
- View
- Virtual List
Link Vue Component
Link is main component to create links for navigation, custom actions, switching tabs, open/close panels, etc.
Link Components
There are following components included:
f7-link
Link Properties
Prop | Type | Default | Description |
---|---|---|---|
<f7-link> properties | |||
no-link-class | boolean | Removes "link" class | |
tab-link | string boolean |
Enables tab link and specify CSS selector of the target tab (if specified as a string) | |
tab-link-active | boolean | Makes this tab link active | |
text | string | Link text | |
no-fast-click | boolean | Disables fast click | |
badge | string number |
Badge count | |
badge-color | string | Badge color. One of the default colors | |
icon-only | boolean | Enable when used in navbar/toolbar with icon only inside | |
icon-badge | string number |
Adds badge to the icon (intended to be used in Tabbar's icons) | |
<f7-link> icon related properties | |||
icon-size | string number |
Icon size in px | |
icon-color | string | Icon color. One of the default colors | |
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-md | string | Icon to be used in case of MD theme is used. Consists of icon family and icon name divided by colon, e.g. material:home or fa:home |
|
<f7-link> navigation/router related properties | |||
href | string boolean |
# | URL of the page to load. In case of boolean href="false" it won't add href tag |
view | string | CSS selector of the View to load the page | |
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-current | boolean | Reloads new page instead of the currently active one | |
reload-previous | boolean | Replace the previous page in history with the new one from route | |
reload-all | boolean | Load new page and remove all previous pages from history and DOM | |
animate | boolean | Disables pages animation | |
ignore-cache | boolean | Ignores caching | |
page-name | string | Name of the page to load | |
route-tab-id | string | Routable Tab id | |
<f7-link> action related properties | |||
panel-open | string boolean |
Defines panel to open. Can be left or right |
|
panel-close | boolean | Closes panel on click | |
actions-open | string boolean |
CSS selector of the action sheet to open on click | |
actions-close | string boolean |
CSS selector of the action sheet to close on click. Or boolean property to close currently opened action sheet | |
popup-open | string boolean |
CSS selector of the popup to open on click | |
popup-close | string boolean |
CSS selector of the popup to close on click. Or boolean property to close currently opened popup | |
popover-open | string boolean |
CSS selector of the popover to open on click | |
popover-close | string boolean |
CSS selector of the popover to close on click. Or boolean property to close currently opened popover | |
sheet-open | string boolean |
CSS selector of the sheet modal to open on click | |
sheet-close | string boolean |
CSS selector of the sheet modal to close on click. Or boolean property to close currently opened sheet modal | |
login-screen-open | string boolean |
CSS selector of the login screen to open on click | |
login-screen-close | string boolean |
CSS selector of the login screen to close on click. Or boolean property to close currently opened login screen | |
sortable-enable | string boolean |
CSS selector of the Sortable list to open on click | |
sortable-disable | string boolean |
CSS selector of the Sortable list to close on click. Or boolean property to close currently opened Sortable list | |
sortable-toggle | string boolean |
CSS selector of the Sortable list to toggle on click. Or boolean property to toggle currently opened/closed Sortable list |
Link Events
Event | Description |
---|---|
<f7-link> events | |
click | Event will be triggered after click on a link |
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="false" :ignore-cache="true">About</f7-link>
<!-- Renders to: -->
<a href="/about/" class="link" data-animate="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" tab-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" tab-link-active>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 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 tab-link-active">Show Tab 1</a>
<a href="#" data-tab="#tab-2" class="tab-link">Show Tab 2</a>
Routable Tabs
<!-- Tabs -->
<f7-tabs>
<f7-tab id="tab-1"></f7-tab>
<f7-tab id="tab-2"></f7-tab>
</f7-tabs>
<!-- Switch Between Tabs -->
<f7-link tab-link route-tab-id="tab-1" href="/tabs/">Show Tab 1</f7-link>
<f7-link tab-link route-tab-id="tab-2" href="/tabs/tab-2/">Show Tab 2</f7-link>
<!-- Renders to: -->
<!-- Tabs -->
<div class="tabs">
<div class="tab" id="tab-1"></div>
<div class="tab" id="tab-2"></div>
</div>
<!-- Switch Between Tabs -->
<a href="/tabs/" class="tab-link" data-route-tab-id="tab-1">Show Tab 1</a>
<a href="/tabs/tab-2/" class="tab-link" data-route-tab-id="tab-2">Show Tab 2</a>
Open And Close Panel
<f7-link panel-open="left">Open Left Panel</f7-link>
<f7-link panel-close>Close Panel</f7-link>
<!-- Renders to: -->
<a href="#" data-panel="left" class="link panel-open">Open Left Panel</a>
<a href="#" class="link panel-close">Close Panel</a>
Open and Close Popup
<f7-link popup-open="#my-popup">Open Popup</f7-link>
<f7-link popup-close="#my-popup">Close Popup</f7-link>
<!-- Renders to: -->
<a href="#" data-popup="#my-popup" class="link popup-open">Open Popup</a>
<a href="#" data-popup="#my-popup" class="link popup-close">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>