shinyMobile
shinyMobile copied to clipboard
Add capability to manipulate CSS for Split-Layout and Split-Tabs modes
I'm trying to integrating HTML
, CSS
into {shinyMobile
} and I've noticed you cannot edit CSS for the Split-Layout and Split-Tabs modes (however, you can with the Single-Layout mode.
To create a simple and reproducible example, I've taken corresponding HTML
and CSS
code from this CodePen example placing these files radio.css
and radio.html
into the www/
directory:
Then I create a simply app.R
:
library(shiny)
ui <- fluidPage(
includeHTML("www/radio.html"), # include HTML
includeCSS("www/radio.css"), # include CSS
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
When trying to do the same inside shinyMobile
the background remains black:
ui <- f7Page(
includeHTML("www/radio.html"), # include HTML
includeCSS("www/radio.css"), # include CSS
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
However, this doesn't work when I try it in Split-Layout (below) or Split-Tabs mode (the latter was tested but is not shown):
library(shiny)
library(shinyMobile)
shinyApp(
ui = f7Page(
title = "My app",
options = list(
theme = "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
),
f7SplitLayout(
sidebar = f7Panel(
title = "Sidebar",
side = "left",
theme = "light",
f7PanelMenu(
id = "menu",
f7PanelItem(
tabName = "tab1",
title = "Tab 1",
icon = f7Icon("equal_circle"),
active = TRUE
)
),
uiOutput("selected_tab"),
effect = "reveal"
),
navbar = f7Navbar(
title = "Split Layout",
hairline = FALSE,
shadow = TRUE
),
# main content
f7Items(
f7Item(
includeHTML("www/radio.html"), # include HTML
includeCSS("www/radio.css"), # include CSS
tabName = "tab1",
)
)
)
),
server = function(input, output, session) {
}
)