-
Get Started
-
Events
-
Router / Navigation
-
Components
- App / Core
- Accordion / Collapsible
- Action Sheet / Actions
- Autocomplete
- Badge
- Block / Content Block
- Button
- Calendar / Datepicker
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Data Table
- Dialog
- Elevation
- Floating Action Button / FAB
- Form Data / Storage
- Gauge
- Grid / Layout Grid
- Icons
- Infinite Scroll
- Inputs / Form Inputs
- Lazy Load
- Link
- List View
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Notification
- Page
- Panel / Side Panels
- Photo Browser
- Picker
- Popover
- Popup
- Preloader
- Progressbar
- Pull to Refresh
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable List
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Timeline
- Toast
- Toggle
- Toolbar / Tabbar
- Tooltip
- Video Intelligence (vi)
- View / Router
- Virtual List
-
Framework7 Icons
-
Styling
-
Dom7
-
Template7
-
Fast Clicks
-
Utilities
-
Plugins API
-
Lazy Modules
-
Custom Build
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>