-
Get Started
-
React Components
- App
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button / FAB
- Gauge
- 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 React 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:
Link
/F7Link
Link Properties
Prop | Type | Default | Description |
---|---|---|---|
<Link> properties | |||
noLinkClass | boolean | Removes "link" class | |
tabLink | string boolean |
Enables tab link and specify CSS selector of the target tab (if specified as a string) | |
tabLinkActive | boolean | Makes this tab link active | |
text | string | Link text | |
noFastClick | boolean | Disables fast click | |
badge | string number |
Badge count | |
badgeColor | string | Badge color. One of the default colors | |
iconOnly | boolean | Enable when used in navbar/toolbar with icon only inside | |
tooltip | string | Link tooltip text to show on link hover/press | |
<Link> Smart Select related properties | |||
smartSelect | boolean | false | Enables Smart Select behavior |
smartSelectParams | object | Object with Smart Select Parameters | |
<Link> icon related properties | |||
iconSize | string number |
Icon size in px | |
iconColor | string | Icon color. One of the default colors | |
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 | |
iconIos | 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 |
|
iconMd | 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 |
|
iconBadge | string number |
Adds badge to the icon (intended to be used in Tabbar's icons) | |
<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 |
target | string | Value of link target attribute, e.g. _blank , _self , etc. |
|
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) |
|
reloadCurrent | boolean | Reloads new page instead of the currently active one | |
reloadPrevious | boolean | Replace the previous page in history with the new one from route | |
reloadAll | boolean | Load new page and remove all previous pages from history and DOM | |
animate | boolean | Disables pages animation | |
ignoreCache | boolean | Ignores caching | |
routeTabId | string | Routable Tab id | |
routeProps | object | Object with additional props that will be passed to target route component | |
<Link> action related properties | |||
panelOpen | string boolean |
Defines panel to open. Can be left or right |
|
panelClose | boolean | Closes panel on click | |
actionsOpen | string boolean |
CSS selector of the action sheet to open on click | |
actionsClose | string boolean |
CSS selector of the action sheet to close on click. Or boolean property to close currently opened action sheet | |
popupOpen | string boolean |
CSS selector of the popup to open on click | |
popupClose | string boolean |
CSS selector of the popup to close on click. Or boolean property to close currently opened popup | |
popoverOpen | string boolean |
CSS selector of the popover to open on click | |
popoverClose | string boolean |
CSS selector of the popover to close on click. Or boolean property to close currently opened popover | |
sheetOpen | string boolean |
CSS selector of the sheet modal to open on click | |
sheetClose | string boolean |
CSS selector of the sheet modal to close on click. Or boolean property to close currently opened sheet modal | |
loginScreenOpen | string boolean |
CSS selector of the login screen to open on click | |
loginScreenClose | string boolean |
CSS selector of the login screen to close on click. Or boolean property to close currently opened login screen | |
sortableEnable | string boolean |
CSS selector of the Sortable list to open on click | |
sortableDisable | string boolean |
CSS selector of the Sortable list to close on click. Or boolean property to close currently opened Sortable list | |
sortableToggle | string boolean |
CSS selector of the Sortable list to toggle on click. Or boolean property to toggle currently opened/closed Sortable list | |
searchbarEnable | string boolean |
CSS selector of the Expandable Searchbar to be enabled on click. Or boolean property to enable the first found Searchbar | |
searchbarDisable | string boolean |
CSS selector of the Expandable Searchbar to be disabled on click. Or boolean property to disable the first found Searchbar | |
searchbarToggle | string boolean |
CSS selector of the Expandable Searchbar to toggle on click. Or boolean property to toggle the first found Searchbar | |
searchbarClear | string boolean |
CSS selector of the Expandable Searchbar to clear on click. Or boolean property to clear the first found Searchbar |
Link Events
Event | Description |
---|---|
<Link> events | |
click | Event will be triggered after click on a link |
Examples
Navigation Link
<Link href="/about/">About</Link>
Back Navigation Link
<Link back>Back</Link>
With Router Parameters
<Link href="/about/" animate={false} ignoreCache={true}>About</Link>
External Link
<Link href="http://google.com" external>Google</Link>
Tab Link
{/* Tabs */}
<Tabs>
<Tab id="tab-1" tabActive>Tab 1</Tab>
<Tab id="tab-1">Tab 2</Tab>
</Tabs>
{/* Switch Between Tabs */}
<Link tabLink="#tab-1" tabLinkActive>Show Tab 1</Link>
<Link tabLink="#tab-2">Show Tab 2</Link>
Routable Tabs
{/* Tabs */}
<Tabs>
<Tab id="tab-1"></Tab>
<Tab id="tab-2"></Tab>
</Tabs>
{/* Switch Between Tabs */}
<Link tabLink routeTabId="tab-1" href="/tabs/">Show Tab 1</Link>
<Link tabLink routeTabId="tab-2" href="/tabs/tab-2/">Show Tab 2</Link>
Open And Close Panel
<Link panelOpen="left">Open Left Panel</Link>
<Link panelClose>Close Panel</Link>
Open and Close Popup
<Link popupOpen="#my-popup">Open Popup</Link>
<Link popupClose="#my-popup">Close Popup</Link>
With Icon & Color
<Link iconF7="home" text="Home" color="red"></Link>