f7Panel | R Documentation |
f7Panel
is a sidebar element. It may be used as a simple
sidebar or as a container for f7PanelMenu in case of
f7SplitLayout.
updateF7Panel
toggles an f7Panel from the server.
f7Panel(
...,
id = NULL,
title = NULL,
side = c("left", "right"),
theme = c("dark", "light"),
effect = c("reveal", "cover"),
resizable = FALSE
)
updateF7Panel(id, session = shiny::getDefaultReactiveDomain())
... |
Panel content. Slot for f7PanelMenu, if used as a sidebar. |
id |
Panel unique id. |
title |
Panel title. |
side |
Panel side: "left" or "right". |
theme |
Panel background color: "dark" or "light". |
effect |
Whether the panel should behave when opened: "cover" or "reveal". |
resizable |
Whether to enable panel resize. FALSE by default. |
session |
Shiny session object. |
David Granjon, dgranjon@ymail.com
if (interactive()) {
library(shiny)
library(shinyMobile)
shinyApp(
ui = f7Page(
title = "Panels",
f7SingleLayout(
navbar = f7Navbar(
title = "Single Layout",
hairline = FALSE,
shadow = TRUE,
leftPanel = TRUE,
rightPanel = TRUE
),
panels = tagList(
f7Panel(side = "left", id = "mypanel1"),
f7Panel(side = "right", id = "mypanel2")
),
toolbar = f7Toolbar(
position = "bottom",
icons = TRUE,
hairline = FALSE,
shadow = FALSE,
f7Link(label = "Link 1", href = "https://www.google.com"),
f7Link(label = "Link 2", href = "https://www.google.com")
),
# main content
f7Shadow(
intensity = 10,
hover = TRUE,
f7Card(
title = "Card header",
sliderInput("obs", "Number of observations", 0, 1000, 500),
h1("You only see me by opening the left panel"),
plotOutput("distPlot"),
footer = tagList(
f7Button(color = "blue", label = "My button", href = "https://www.google.com"),
f7Badge("Badge", color = "green")
)
)
)
)
),
server = function(input, output, session) {
observeEvent(input$mypanel2, {
state <- if (input$mypanel2) "open" else "closed"
f7Toast(
text = paste0("Right panel is ", state),
position = "center",
closeTimeout = 1000,
closeButton = FALSE
)
})
output$distPlot <- renderPlot({
if (input$mypanel1) {
dist <- rnorm(input$obs)
hist(dist)
}
})
}
)
}
# Toggle panel
if (interactive()) {
library(shiny)
library(shinyMobile)
shinyApp(
ui = f7Page(
title = "Update panel menu",
f7SingleLayout(
navbar = f7Navbar(
title = "Single Layout",
hairline = FALSE,
shadow = TRUE,
leftPanel = TRUE,
rightPanel = TRUE
),
panels = tagList(
f7Panel(side = "left", id = "mypanel1", theme = "light", effect = "cover"),
f7Panel(side = "right", id = "mypanel2", theme = "light")
),
toolbar = f7Toolbar(
position = "bottom",
icons = TRUE,
hairline = FALSE,
shadow = FALSE,
f7Link(label = "Link 1", href = "https://www.google.com"),
f7Link(label = "Link 2", href = "https://www.google.com")
)
)
),
server = function(input, output, session) {
observe({
print(
list(
panel1 = input$mypanel1,
panel2 = input$mypanel2
)
)
})
observe({
invalidateLater(2000)
updateF7Panel(id = "mypanel1")
})
}
)
}
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.