f7TabLayout problem
Opened this issue · 5 comments
Hi，DivadNojnarg
I'm learning f7TabLayout Example; I used renderUI to repackage the UI, the display result is very different from the original, there are 2 problems.
1, the table on the third page is only partially displayed and cannot be swiped down
2, the navbar appears at the top of the whole page;
Any solution? thank you！
My code is as follows:
library(shiny)
library(shinyMobile)
library(shinyWidgets)
shinyApp(
ui = f7Page(
title = "Tab layout",
f7TabLayout(
tags$head(
tags$script(
"$(function(){
$('#tapHold').on('taphold', function () {
app.dialog.alert('Tap hold fired!');
});
});
"
)
),
panels = tagList(
f7Panel(title = "Left Panel", side = "left", theme = "light", "Blabla", effect = "cover"),
f7Panel(title = "Right Panel", side = "right", theme = "light", "Blabla", effect = "cover")
),
navbar = f7Navbar(
title = "Tabs",
hairline = FALSE,
shadow = TRUE,
leftPanel = TRUE,
rightPanel = TRUE
),
uiOutput('ui1'))),
server = function(input, output) {
output$ui1 <- renderUI({
f7Tabs(
animated = T,
# swipeable = TRUE,
f7Tab(
theme = "light",
tabName = "Tab1",
icon = f7Icon("envelope"),
active = TRUE,
f7Shadow(
intensity = 10,
hover = TRUE,
f7Card(
title = "Card header",
f7Stepper(
"obs1",
"Number of observations",
min = 0,
max = 1000,
value = 500,
step = 100
),
plotOutput("distPlot1"),
footer = tagList(
f7Button(inputId = "tapHold", label = "My button"),
f7Badge("Badge", color = "green")
)
)
)
),
f7Tab(
tabName = "Tab2",
icon = f7Icon("today"),
active = FALSE,
f7Shadow(
intensity = 10,
hover = TRUE,
f7Card(
title = "Card header",
f7Select(
inputId = "obs2",
label = "Distribution type:",
choices = c(
"Normal" = "norm",
"Uniform" = "unif",
"Log-normal" = "lnorm",
"Exponential" = "exp"
)
),
plotOutput("distPlot2"),
footer = tagList(
f7Button(label = "My button", href = "https://www.google.com"),
f7Badge("Badge", color = "orange")
)
)
)
),
f7Tab(
tabName = "Tab3",
icon = f7Icon("cloud_upload"),
active = FALSE,
f7Shadow(
intensity = 10,
hover = TRUE,
f7Card(
title = "Card header",
f7SmartSelect(
inputId = "variable",
label = "Variables to show:",
c("Cylinders" = "cyl",
"Transmission" = "am",
"Gears" = "gear"),
multiple = TRUE,
selected = "cyl"
),
tableOutput("data"),
footer = tagList(
f7Button(label = "My button", href = "https://www.google.com"),
f7Badge("Badge", color = "green")
)
)
)
)
)
})
output$distPlot1 <- renderPlot({
dist <- rnorm(input$obs1)
hist(dist)
})
output$distPlot2 <- renderPlot({
dist <- switch(
input$obs2,
norm = rnorm,
unif = runif,
lnorm = rlnorm,
exp = rexp,
rnorm
)
hist(dist(500))
})
output$data <- renderTable({
mtcars[, c("mpg", input$variable), drop = FALSE]
}, rownames = TRUE)
}
)
Hi,
The issue is coming from the renderUI where you generate the tabs. Is there a reason for this?
Taking the simple example from the documentation, which runs fine:
library(shiny)
library(shinyMobile)
library(shinyWidgets)
shinyApp(
ui = f7Page(
title = "Tab layout",
f7TabLayout(
tags$head(
tags$script(
"$(function(){
$('#tapHold').on('taphold', function () {
app.dialog.alert('Tap hold fired!');
});
});
"
)
),
panels = tagList(
f7Panel(title = "Left Panel", side = "left", theme = "light", "Blabla", effect = "cover"),
f7Panel(title = "Right Panel", side = "right", theme = "dark", "Blabla", effect = "cover")
),
navbar = f7Navbar(
title = "Tabs",
hairline = FALSE,
shadow = TRUE,
leftPanel = TRUE,
rightPanel = TRUE
),
f7Tabs(
animated = FALSE,
swipeable = TRUE,
f7Tab(
tabName = "Tab1",
icon = f7Icon("envelope"),
active = TRUE,
f7Shadow(
intensity = 10,
hover = TRUE,
f7Card(
title = "Card header",
f7Stepper(
"obs1",
"Number of observations",
min = 0,
max = 1000,
value = 500,
step = 100
),
plotOutput("distPlot1"),
footer = tagList(
f7Button(inputId = "tapHold", label = "My button"),
f7Badge("Badge", color = "green")
)
)
)
),
f7Tab(
tabName = "Tab2",
icon = f7Icon("today"),
active = FALSE,
f7Shadow(
intensity = 10,
hover = TRUE,
f7Card(
title = "Card header",
f7Select(
inputId = "obs2",
label = "Distribution type:",
choices = c(
"Normal" = "norm",
"Uniform" = "unif",
"Log-normal" = "lnorm",
"Exponential" = "exp"
)
),
plotOutput("distPlot2"),
footer = tagList(
f7Button(label = "My button", href = "https://www.google.com"),
f7Badge("Badge", color = "orange")
)
)
)
),
f7Tab(
tabName = "Tab3",
icon = f7Icon("cloud_upload"),
active = FALSE,
f7Shadow(
intensity = 10,
hover = TRUE,
f7Card(
title = "Card header",
f7SmartSelect(
inputId = "variable",
label = "Variables to show:",
c("Cylinders" = "cyl",
"Transmission" = "am",
"Gears" = "gear"),
multiple = TRUE,
selected = "cyl"
),
tableOutput("data"),
footer = tagList(
f7Button(label = "My button", href = "https://www.google.com"),
f7Badge("Badge", color = "green")
)
)
)
)
)
)
),
server = function(input, output) {
output$distPlot1 <- renderPlot({
dist <- rnorm(input$obs1)
hist(dist)
})
output$distPlot2 <- renderPlot({
dist <- switch(
input$obs2,
norm = rnorm,
unif = runif,
lnorm = rlnorm,
exp = rexp,
rnorm
)
hist(dist(500))
})
output$data <- renderTable({
mtcars[, c("mpg", input$variable), drop = FALSE]
}, rownames = TRUE)
}
)If you had to dynamically add/remove tabs to be able to programmatically create them, which is possible, you would have to leverage some tabs related server functions like shinyMobile::insertF7Tab, shinyMobile::removeF7Tab:
library(shiny)
library(shinyMobile)
shinyApp(
ui = f7Page(
title = "Insert a tab Before the target",
f7TabLayout(
navbar = f7Navbar(
title = "insertF7Tab",
hairline = FALSE,
shadow = TRUE,
leftPanel = TRUE,
rightPanel = TRUE
),
f7Tabs(
animated = TRUE,
id = "tabs",
f7Tab(
tabName = "Tab1",
icon = f7Icon("airplane"),
active = TRUE,
"Tab 1",
f7Button(inputId = "add", label = "Add tabs")
),
f7Tab(
tabName = "Tab2",
icon = f7Icon("today"),
active = FALSE,
f7Button(inputId="stay", label = "Stay"),
"Tab 2"
)
)
)
),
server = function(input, output, session) {
observeEvent(input$stay, {
f7Toast("Please stay")
})
observeEvent(input$add, {
insertF7Tab(
id = "tabs",
position = "after",
target = "Tab1",
tab = f7Tab (
# Use multiple elements to test for accessor function
f7Text(inputId = "my_text", label ="Enter something", placeholder = "What?"),
f7Text(inputId = "my_other", label ="Else:", placeholder = "Else ?"),
tabName = paste0("tabx_", input$go),
"Test2",
icon = f7Icon("app_badge")
),
select = TRUE
)
})
}
)Hi , DivadNojnarg
thank you very much, shinyMobile::insertF7Tab, shinyMobile::removeF7Tab is a good solution.
but, I must use renderUI, because The content of each tab is generate from the server,thank you very much!
If I must use renderUI, is there any suggestion?
You don’t need renderUI because insertF7Tab can be used from the server, allowing you to create your tab from the server, for any tab.
great ,I will test insertF7Tab in my app,thank you very much!