Description Usage Arguments Details Examples
flipBox creates a box that flips from back to front and inversely
updateFlipBox programmatically toggles a flipBox from the server.
1 2 3 | flipBox(id, front, back, trigger = c("click", "hover"), width = 6)
updateFlipBox(id, session = shiny::getDefaultReactiveDomain())
|
id |
flipBox id. |
front |
ui for the front of the flip box |
back |
ui for the back of the flip box |
trigger |
How to trigger rotate effect. Either click or hover. Default to click. |
width |
flipbox width. Between 1 and 12. |
session |
Shiny session object. |
To access the state of the flipbox use the input alias input$<id>
.
For example, if your flipBox's id is myawesomeflipbox, you can access its state via
input$myawesomeflipbox
where TRUE corresponds to the front, FALSE to the back.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | if (interactive()) {
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
shinyApp(
ui = dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
fluidRow(
column(
width = 6,
uiOutput("active_side"),
flipBox(
id = "myflipbox",
trigger = "hover",
width = 12,
front = div(
class = "text-center",
h1("Flip on hover"),
img(
src = "https://image.flaticon.com/icons/svg/149/149076.svg",
height = "300px",
width = "100%"
)
),
back = div(
class = "text-center",
height = "300px",
width = "100%",
h1("Flip on hover"),
p("More information....")
)
)
),
column(
width = 6,
uiOutput("active_side_2"),
flipBox(
id = "myflipbox2",
width = 12,
front = div(
class = "text-center",
h1("Flip on click"),
img(
src = "https://image.flaticon.com/icons/svg/149/149076.svg",
height = "300px",
width = "100%"
)
),
back = div(
class = "text-center",
height = "300px",
width = "100%",
h1("Flip on click"),
p("More information....")
)
)
)
)
)
),
server = function(input, output, session) {
output$active_side <- renderUI({
side <- if (input$myflipbox) "front" else "back"
dashboardBadge(side, color = "blue")
})
output$active_side_2<- renderUI({
side <- if (input$myflipbox2) "front" else "back"
dashboardBadge(side, color = "blue")
})
}
)
}
if (interactive()) {
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
shinyApp(
ui = dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
actionButton("toggle", "Toggle flip box"),
uiOutput("active_side"),
flipBox(
id = "myflipbox",
front = div(
class = "text-center",
img(
src = "https://image.flaticon.com/icons/svg/149/149076.svg",
height = "300px",
width = "100%"
)
),
back = div(
class = "text-center",
height = "300px",
width = "100%",
h1("Details...."),
p("More information....")
)
)
)
),
server = function(input, output, session) {
output$active_side <- renderUI({
side <- if (input$myflipbox) "front" else "back"
dashboardBadge(side, color = "blue")
})
observeEvent(input$toggle, {
updateFlipBox("myflipbox")
})
}
)
}
|
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.