Link is main component to create links for navigation, custom actions, switching tabs, open/close panels, etc.
<Link href="/about/">About</Link>
Renders to:
<a href="/about/" class="link">About</a>
<Link back>Back</Link>
Renders to:
<a href="#" class="link back">Back</a>
<Link href="/about/" animatePages={false} ignoreCache={true}>About</Link>
Renders to:
<a href="/about/" class="link" data-animate-pages="false" data-ignore-cache="true">About</a>
<Link href="http://google.com" external>Google</Link>
Renders to:
<a href="http://google.com" class="link external">Google</a>
<!-- Tabs -->
<Tabs>
<Tab id="tab-1" active>Tab 1</Tab>
<Tab id="tab-1">Tab 2</Tab>
</Tabs>
<!-- Switch Between Tabs -->
<Link tabLink="#tab-1">Show Tab 1</Link>
<Link tabLink="#tab-2">Show Tab 2</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>
Note, this requires tab routes to be configured.
<!-- Tabs -->
<Tabs>
<Tab routeTabId="tab-1">Tab 1</Tab>
<Tab routeTabId="tab-1">Tab 2</Tab>
</Tabs>
<!-- Switch Between Tabs -->
<Link routeTabLink="#tab-1" href="/tabs/">Show Tab 1</Link>
<Link routeTabLink="#tab-2" href="/tabs/tab-2/">Show Tab 2</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>
<Link openPanel="left">Open Left Panel</Link>
<Link closePanel>Close Panel</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>
<Link openPopup="#myPopup">Open Popup</Link>
<Link closePopup="#myPopup">Close Popup</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>
<Link iconF7="home" text="Home" color="red"></Link>
Renders to:
<a href="#" class="link color-red">
<i class="icon Icons">home</i>
<span>Home</span>
</a>
Prop | Type | Default | Description |
---|---|---|---|
noLinkClass | boolean | Removes "link" class | |
color | string | Link color. One of default colors | |
rippleColor | 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 | |||
tabLink | string/boolean | Enables tab link and specify CSS selector of the target tab (if specified as a string) | |
openPanel | string/boolean | Defines panel to open. Can be "left" or "right" | |
closePanel | boolean | Closes panel on click | |
openPopup | string/boolean | CSS selector of the popup to open on click | |
closePopup | string/boolean | CSS selector of the popup to close on click. Or boolean property to close currently opened popup | |
openPopover | string/boolean | CSS selector of the popover to open on click | |
closePopover | string/boolean | CSS selector of the popover to close on click. Or boolean property to close currently opened popover | |
openPicker | string/boolean | CSS selector of the picker to open on click | |
closePicker | string/boolean | CSS selector of the picker to close on click. Or boolean property to close currently opened picker | |
openLoginScreen | string/boolean | CSS selector of the login screen to open on click | |
closeLoginScreen | string/boolean | CSS selector of the login screen to close on click. Or boolean property to close currently opened login screen | |
openSortable | string/boolean | CSS selector of the Sortable list to open on click | |
closeSortable | string/boolean | CSS selector of the Sortable list to close on click. Or boolean property to close currently opened Sortable list | |
toggleSortable | 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 | |
noFastClick | 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 | |
animatePages | boolean | Disables pages animation | |
ignoreCache | boolean | Ignores caching | |
pageName | string | Name of the page to load | |
template | string | Template name to load | |
routeTabLink | string | Used for tab routes. Connects the link to a tab with the same value in its routeTabId so that when the tab is active, the link appears as active too |
|
Icon Properties | |||
iconOnly | boolean | Enable when used in navbar with icon only inside | |
iconBadge | string/number | Adds badge to the icon (intended to be used in Tabbar's icons) | |
iconSize | string/number | Icon size in px | |
icon | string | Custom icon class | |
iconF7 | string | Name of F7 Icons font icon | |
iconMaterial | string | Name of Material Icons font icon | |
iconFa | string | Name of Font Awesome font icon | |
iconIon | string | Name of Ionicons font icon | |
iconIfIos | 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 |
|
iconIfMaterial | 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 |