Skip to contents

Basic functions

Page skeleton functions

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
f7DefaultOptions()
shinyMobile app default options

Authentication

UI skeletons for authentication purposes

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

Toward progressive web app

Tools to build a progressive web app

preview_mobile()
Allow to preview a given app on different devices.

Inputs validation

Provide feedback when an input is missing, …

validateF7Input()
Framework7 input validation

Grid functions

Rows, columns, flex, …

f7Grid()
Framework7 grid container

Layouts

Functions that create layouts

f7MultiLayout()
Framework7 multi pages layout
f7SingleLayout()
Framework7 single layout
f7SplitLayout()
Framework7 split layout
f7TabLayout()
Framework7 tab layout

Download/Upload

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

Tab Navigation

Next, back

f7Back()
Framework7 back button
f7Next()
Framework7 next button

Inputs

slider, radio, checkboxes, …

f7AutoComplete() updateF7AutoComplete()
Framework7 autocomplete input
f7Checkbox() updateF7Checkbox()
Framework7 checkbox
f7CheckboxGroup() f7CheckboxChoice()
Framework7 checkbox group
f7ColorPicker()
Create a Framework7 color picker input
f7DatePicker() updateF7DatePicker()
Framework7 date picker
f7Form() updateF7Form()
Creates an input form
f7Text() updateF7Text() f7TextArea() updateF7TextArea() f7Password()
Framework7 text input
f7Picker() updateF7Picker()
Framework7 picker input
f7Radio() updateF7Radio() f7RadioChoice()
Framework7 radio input
f7Select() updateF7Select()
Framework7 select input
f7Slider() updateF7Slider()
Framework7 range slider
f7Stepper() updateF7Stepper()
Framework7 stepper input
f7SmartSelect() updateF7SmartSelect()
Framework7 smart select
f7Toggle() updateF7Toggle()
Framework7 toggle input

Update inputs

slider, radio, checkboxes, …

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() f7Segment()
Framework7 action button
f7Card() 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)
f7Form() updateF7Form()
Creates an input form
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() f7TextArea() updateF7TextArea() f7Password()
Framework7 text input
f7Toggle() updateF7Toggle()
Framework7 toggle input
updateF7VirtualList()
Update an f7VirtualList on the server side
updateF7App()
Update Framework7 configuration
updateF7Entity()
Update Framework7 entity
updateF7Routes()
Update routes on the server

Searchbar and utilities

Cards

social cards, cards, …

Lists

Framework 7 lists

f7List()
Create a framework 7 list view
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
f7Treeview()
Create a Framework 7 Treeview layout
f7TreeviewItem()
Create a Framework 7 Treeview item
f7TreeviewGroup()
Create a Framework 7 group for treeview items

Text containers

blocks to contain text

Buttons

some are inputs

f7Button() updateF7Button() f7Segment()
Framework7 action button
f7Fab() updateF7Fab()
Framework7 floating action button (FAB)
f7Fabs() updateF7Fabs() f7FabMorphTarget()
Framework7 container for floating action button (FAB)
f7Link()
Framework7 link
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
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, …

f7Accordion() f7AccordionItem() updateF7Accordion()
Framework7 accordion container
f7Badge()
Framework7 badge
f7Chip()
Framework7 chips
f7Messages() f7Message() updateF7Messages()
Framework7 messages container
f7MessageBar() updateF7MessageBar()
Framework7 message bar.
f7PhotoBrowser()
Framework7 photo browser
f7Swiper() f7Slide()
Framework7 swiper
f7Table()
Framework7 table
f7Timeline() f7TimelineItem()
Framework7 timeline

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, …

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
add_shinyMobile_deps()
shinyMobile dependencies utils