shinyMobile has 3 skins:
It automatically detects if the app is running with android or iOS and accordingly adapt the layout. It is of course possible to apply the iOS skin on android and inversely, even though not recommended.
shinyMobile also provides 2 themes, namely light and dark. While framework7 allows to apply dark or light theme not only at the global level but at the “widget level”, shinyMobile does not support that feature, to improve the overall consistency. Only panels can have a color independent of the global theme.
shinyMobile brings 3 out of the box layouts:
f7SingleLayout: develop simple apps (best choice for iOS/android Apps)
f7TabLayout: develop complex multi-tabbed Apps (best choice for iOS/android Apps)
f7SplitLayout: for tablets and desktop with a sidebar, navbar and a main panel
shinyMobile has its own custom input widgets with unique design for each skin (iOS/android/aurora):
f7Stepper(): equivalent to
f7Button(): similar to
f7Button()with ability to be gathered in a
It also has custom update functions to act on the server side:
Finally, it also provides tools to dynamically update widgets on the server side like cards, accordions, tabs, panels and more:
This choice is crucial when you are developing an App. It depends on the complexity of your visualizations and content. If your plan is to develop a simple graph or table, you should go for the
f7SingleLayout() option. For more complex design, the best is
f7SplitLayout() is specific for tablets and desktop apps.
f7SingleLayout( ..., navbar, toolbar = NULL, panels = NULL, appbar = NULL )
While only the navbar is mandatory, other components such as the toolbar are optionnal for the
f7TabLayout( ..., navbar, panels = NULL, appbar = NULL )
The … argument requires
f7Tabs(..., id = NULL, swipeable = FALSE, animated = TRUE). The id argument is mandatory if you want to exploit the
f7Tabs() expect to have
f7Tab(..., tabName, icon = NULL, active = FALSE) passed inside.
It is the main skeleton of the template.
f7Page( ..., options = list( theme = c("ios", "md", "auto", "aurora"), dark = TRUE, filled = FALSE, color = "#007aff", touch = list( tapHold = TRUE, tapHoldDelay = 750, iosTouchRipple = FALSE ), iosTranslucentBars = FALSE, navbar = list( iosCenterTitle = TRUE, hideNavOnPageScroll = TRUE ), toolbar = list( hideNavOnPageScroll = FALSE ), pullToRefresh = FALSE ), title = NULL, preloader = FALSE, loading_duration = 3, allowPWA = FALSE )
This is an option if you decide not to embed a
f7SubNavbar(). The toolbar is the rigth place to add
f7Badge()… Its position is controlled with the position parameter (either top or bottom).
Panels are also called sidebars.
f7Panel() is the corresponding function.
Although the App has a theme option,
f7Panel() has an independent theme option. For instance, it is definitely possible to create a dark
f7Panel() while the page theme is light, and conversely. Its behaviour is controlled via the effect argument:
The resizable argument allows to dynamically resize the panel.
Note that for the moment, there is no option to control the width of each panel.
As stated previously for the
f7Panel() may also be considered as a sidebar. In that case, we may include
f7PanelMenu(). Finally do not forget to set up the
f7Navbar() so that panels are allowed!
This is probably the most important element of the template:
options = list( theme = c("ios", "md", "auto", "aurora"), dark = TRUE, filled = FALSE, color = "#007aff", touch = list( tapHold = TRUE, tapHoldDelay = 750, iosTouchRipple = FALSE ), iosTranslucentBars = FALSE, navbar = list( iosCenterTitle = TRUE, hideNavOnPageScroll = TRUE ), toolbar = list( hideNavOnPageScroll = FALSE ), pullToRefresh = FALSE )
As stated above, you may choose between 3 skins and 2 color themes. There is a third option called filled that allows to fill the navbar and toolbar if enabled. The color options simply changes the color of elements such as buttons, panel triggers, tabs triggers, … shinyMobile brings a lot of different colors. hideOnPageScroll allow to hide/show the navbar and toolbar which is useful to focus on the content. The tapHold parameter ensure that the “long-press” feature is activated. Framework7 has many more options which can be passed through this options parameter