Skip to contents

Basic functions

Page skeleton functions

f7Appbar() f7Back() f7Next()
Framework7 appbar
f7Item()
Framework7 body item
f7Items()
Framework7 item container
f7Navbar() updateF7Navbar()
Framework7 Navbar
f7Page()
Framework7 page container
f7Panel() updateF7Panel()
Framework7 panel
f7PanelMenu() f7PanelItem()
Framework7 sidebar menu
f7SubNavbar()
Framework7 sub navbar
f7Tab()
Create a Framework7 tab item
f7Tabs()
Create a Framework7 tabs
f7Toolbar()
Framework7 Toolbar

Authentication

UI skeletons for authentication purposes

f7Login() f7LoginServer() updateF7Login()
Framework7 login screen

Toward progressive web app

Tools to build a progressive web app

Inputs validation

Provide feedback when an input is missing, …

Grid functions

Rows, columns, flex, …

f7Col()
Framework7 column container
f7Flex()
Framework7 flex container
f7Row()
Framework7 row container

Tab Navigation

Next, back

f7Appbar() f7Back() f7Next()
Framework7 appbar

Layouts

Functions that create layouts

f7SingleLayout()
Framework7 single layout
f7SplitLayout()
Framework7 split layout
f7TabLayout()
Framework7 tab layout

Download/Upload

f7DownloadButton()
Create a download button
f7File()
File Upload Control

Inputs

slider, radio, checkboxes, …

f7AutoComplete() updateF7AutoComplete()
Framework7 autocomplete input
f7checkBox() f7checkBoxGroup() f7InsertTab() f7RemoveTab() f7ValidateInput() f7AddMessages() f7HideNavbar() f7ShowNavbar() f7Popover() f7PopoverTarget() f7ShowPreloader() hideF7Preloader() create_manifest()
Deprecated functions
f7Checkbox() updateF7Checkbox()
Framework7 checkbox
f7CheckboxGroup()
Framework7 checkbox group
f7ColorPicker()
Create a Framework7 color picker input
f7DatePicker() updateF7DatePicker()
Framework7 date picker
f7Password()
Create an f7 password input
f7Picker() updateF7Picker()
Framework7 picker input
f7Radio() updateF7Radio()
Framework7 radio input
f7Select() updateF7Select()
Framework7 select input
f7Slider() updateF7Slider()
Framework7 range slider
f7Stepper() updateF7Stepper()
Framework7 stepper input
f7SmartSelect() updateF7SmartSelect()
Framework7 smart select
f7Text() updateF7Text()
Framework7 text input
f7TextArea() updateF7TextArea()
Framework7 text area input
f7Toggle() updateF7Toggle()
Framework7 toggle input

Update inputs

slider, radio, checkboxes, …

f7checkBox() f7checkBoxGroup() f7InsertTab() f7RemoveTab() f7ValidateInput() f7AddMessages() f7HideNavbar() f7ShowNavbar() f7Popover() f7PopoverTarget() f7ShowPreloader() hideF7Preloader() create_manifest()
Deprecated functions
insertF7Tab()
Framework7 tab insertion
f7Navbar() updateF7Navbar()
Framework7 Navbar
removeF7Tab()
Framework7 tab deletion
f7Accordion() f7AccordionItem() updateF7Accordion()
Framework7 accordion container
f7AutoComplete() updateF7AutoComplete()
Framework7 autocomplete input
f7Button() updateF7Button()
Framework7 action button
f7Card() f7SocialCard() f7ExpandableCard() updateF7Card()
Framework7 card
f7Checkbox() updateF7Checkbox()
Framework7 checkbox
f7DatePicker() updateF7DatePicker()
Framework7 date picker
f7Fab() updateF7Fab()
Framework7 floating action button (FAB)
f7Fabs() updateF7Fabs() f7FabMorphTarget()
Framework7 container for floating action button (FAB)
f7Gauge() updateF7Gauge()
Framework7 gauge
f7Login() f7LoginServer() updateF7Login()
Framework7 login screen
f7Messages() f7Message() updateF7Messages()
Framework7 messages container
f7MessageBar() updateF7MessageBar()
Framework7 message bar.
f7Panel() updateF7Panel()
Framework7 panel
f7Picker() updateF7Picker()
Framework7 picker input
f7Progress() updateF7Progress()
Framework7 progress bar
f7Select() updateF7Select()
Framework7 select input
f7Sheet() updateF7Sheet()
Framework7 sheet
f7Slider() updateF7Slider()
Framework7 range slider
f7SmartSelect() updateF7SmartSelect()
Framework7 smart select
f7Stepper() updateF7Stepper()
Framework7 stepper input
updateF7Tabs()
Update a Framework 7 tabsetPanel
f7Text() updateF7Text()
Framework7 text input
f7TextArea() updateF7TextArea()
Framework7 text area input
f7Toggle() updateF7Toggle()
Framework7 toggle input
updateF7VirtualList()
Update an f7VirtualList on the server side
updateF7App()
Update Framework7 configuration
updateF7Entity()
Update Framework7 entity

Searchbar and utilities

f7Found()
Utility to display an item when the search is successful.
f7NotFound()
Utility to display an item when the search is unsuccessful.
f7HideOnEnable()
Utility to hide a given tag when f7Searchbar is enabled.
f7HideOnSearch()
Utility to hide a given tag on search
f7Searchbar()
Framework 7 searchbar
f7SearchIgnore()
Utility to ignore an item from search.
f7SearchbarTrigger()
Framework 7 searchbar trigger

Cards

social cards, cards, …

Lists

Framework 7 lists

f7List()
Create a framework 7 contact list
f7ListGroup()
Create a framework 7 group of contacts
f7ListItem()
Create a Framework 7 contact item
f7ListIndex()
Create a Framework 7 list index
f7VirtualList() f7VirtualListItem()
Framework7 virtual list

Text containers

blocks to contain text

f7Block() f7BlockHeader()
Framework7 block
f7BlockFooter()
Framework7 block footer
f7BlockTitle()
Framework7 block title

Buttons

some are inputs

f7Button() updateF7Button()
Framework7 action button
f7Fab() updateF7Fab()
Framework7 floating action button (FAB)
f7Fabs() updateF7Fabs() f7FabMorphTarget()
Framework7 container for floating action button (FAB)
f7Link()
Framework7 link
f7Menu() f7MenuItem() f7MenuDropdown() f7MenuDropdownDivider() updateF7MenuDropdown()
Framework7 menu container
f7Segment()
Framework7 segmented button container
f7TabLink()
Special button/link to insert in the tabbar

Buttons Effects

FAB can morph into other HTML elements

f7FabClose()
Framework7 FAB close
f7Fabs() updateF7Fabs() f7FabMorphTarget()
Framework7 container for floating action button (FAB)

Modals, Popups…

Functions that trigger server actions

f7ActionSheet() updateF7ActionSheet()
Framework7 action sheet
f7Dialog()
Framework7 dialog window
f7Notif()
Framework7 notification
f7checkBox() f7checkBoxGroup() f7InsertTab() f7RemoveTab() f7ValidateInput() f7AddMessages() f7HideNavbar() f7ShowNavbar() f7Popover() f7PopoverTarget() f7ShowPreloader() hideF7Preloader() create_manifest()
Deprecated functions
addF7Popover() toggleF7Popover()
Add Framework7 popover
f7Popup()
Framework7 popup
f7Sheet() updateF7Sheet()
Framework7 sheet
f7Swipeout() f7SwipeoutItem()
Framework7 swipeout element
f7TapHold()
Framework7 tapHold module
f7Toast()
Framework7 toast
f7Tooltip() addF7Tooltip() updateF7Tooltip()
Framework7 tooltip

f7 elements

timelines, carousels, …

Metric elements

Gauges, progres, …

f7Gauge() updateF7Gauge()
Framework7 gauge
f7Progress() updateF7Progress()
Framework7 progress bar

Typography functions

Rows, columns, flex, …

f7Align()
Framework7 align utility
f7Float()
Framework7 float utility
f7Margin()
Framework7 margin utility
f7Padding()
Framework7 padding utility

Icons

icon wrapper function

f7Icon()
Framework7 icons

Loaders

Loading screens

CSS effects

shadows, …

f7Shadow()
Framework7 shadow effect
f7Skeleton()
Framework 7 skeleton effect

shinyMobile showcase

f7Gallery()
Launch the shinyMobile Gallery

Utils

colors, tools, …

createSelectOptions()
Create option html tag based on choice input
getF7Colors()
Function to get all colors available in shinyMobile