With shinyEffects, you will be able to customize the style of any elements.
Use the setShadow() function as shown below.
Code
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyEffects)
setShadow <- shinyEffects::setShadow
setPulse <- shinyEffects::setPulse
setShake <- shinyEffects::setShake
setZoom <- shinyEffects::setZoom
boxTag <- boxPlus(
title = "Closable box, with label",
closable = TRUE,
enable_label = TRUE,
label_text = 1,
label_status = "danger",
status = "warning",
solidHeader = FALSE,
collapsible = TRUE,
p("Box Content")
)
shinyApp(
ui = dashboardPagePlus(
header = dashboardHeaderPlus(
enable_rightsidebar = TRUE,
rightSidebarIcon = "gears"
),
sidebar = dashboardSidebar(),
body = dashboardBody(
setShadow(class = "box"),
setShadow(id = "my-progress"),
tags$h2("Add shadow to the box class"),
fluidRow(boxTag, boxTag),
tags$h2("Add shadow only to the first element using id"),
tagAppendAttributes(
verticalProgress(
value = 10,
striped = TRUE,
active = TRUE
),
id = "my-progress"
),
verticalProgress(
value = 50,
active = TRUE,
status = "warning",
size = "xs"
),
verticalProgress(
value = 20,
status = "danger",
size = "sm",
height = "60%"
)
),
rightsidebar = rightSidebar(),
title = "DashboardPage"
),
server = function(input, output) { }
)Use the setZoom() function as shown below. You can choose the zoom level via the “scale” argument. By default, the zoom is 5% bigger than the original element size ( which is widely enough).
Code
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyEffects)
setShadow <- shinyEffects::setShadow
setPulse <- shinyEffects::setPulse
setShake <- shinyEffects::setShake
setZoom <- shinyEffects::setZoom
boxTag <- boxPlus(
title = "Closable box, with label",
closable = TRUE,
enable_label = TRUE,
label_text = 1,
label_status = "danger",
status = "warning",
solidHeader = FALSE,
collapsible = TRUE,
p("Box Content")
)
shinyApp(
ui = dashboardPagePlus(
header = dashboardHeaderPlus(
enable_rightsidebar = TRUE,
rightSidebarIcon = "gears"
),
sidebar = dashboardSidebar(),
body = dashboardBody(
setZoom(class = "box"),
setZoom(id = "my-progress"),
tags$h2("Add zoom to the box class"),
fluidRow(boxTag, boxTag),
tags$h2("Add zoom only to the first element using id"),
tagAppendAttributes(
verticalProgress(
value = 10,
striped = TRUE,
active = TRUE
),
id = "my-progress"
),
verticalProgress(
value = 50,
active = TRUE,
status = "warning",
size = "xs"
),
verticalProgress(
value = 20,
status = "danger",
size = "sm",
height = "60%"
)
),
rightsidebar = rightSidebar(),
title = "DashboardPage"
),
server = function(input, output) { }
)Use the setPulse() function as shown below. You can choose the number of iterations (5 by default), as well as the pulse frequency (1 beat/s by default).
Code
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyEffects)
setShadow <- shinyEffects::setShadow
setPulse <- shinyEffects::setPulse
setShake <- shinyEffects::setShake
setZoom <- shinyEffects::setZoom
boxTag <- boxPlus(
title = "Closable box, with label",
closable = TRUE,
enable_label = TRUE,
label_text = 1,
label_status = "danger",
status = "warning",
solidHeader = FALSE,
collapsible = TRUE,
p("Box Content")
)
shinyApp(
ui = dashboardPagePlus(
header = dashboardHeaderPlus(
enable_rightsidebar = TRUE,
rightSidebarIcon = "gears"
),
sidebar = dashboardSidebar(),
body = dashboardBody(
setPulse(class = "box", duration = 1, iteration = 100),
setPulse(id = "my-progress", duration = 1, iteration = 100),
tags$h2("Add pulse animation to the box class"),
fluidRow(boxTag, boxTag),
tags$h2("Add pulse animation only to the first element using id"),
tagAppendAttributes(
verticalProgress(
value = 10,
striped = TRUE,
active = TRUE
),
id = "my-progress"
),
verticalProgress(
value = 50,
active = TRUE,
status = "warning",
size = "xs"
),
verticalProgress(
value = 20,
status = "danger",
size = "sm",
height = "60%"
)
),
rightsidebar = rightSidebar(),
title = "DashboardPage"
),
server = function(input, output) { }
)Use the setShake() function as shown below. You can choose the shake frequency (0.82/s by default).
Code
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyEffects)
setShadow <- shinyEffects::setShadow
setPulse <- shinyEffects::setPulse
setShake <- shinyEffects::setShake
setZoom <- shinyEffects::setZoom
boxTag <- boxPlus(
title = "Closable box, with label",
closable = TRUE,
enable_label = TRUE,
label_text = 1,
label_status = "danger",
status = "warning",
solidHeader = FALSE,
collapsible = TRUE,
p("Box Content")
)
shinyApp(
ui = dashboardPagePlus(
header = dashboardHeaderPlus(
enable_rightsidebar = TRUE,
rightSidebarIcon = "gears"
),
sidebar = dashboardSidebar(),
body = dashboardBody(
setShake(class = "box"),
setShake(id = "my-progress"),
tags$h2("Add shake to the box class"),
fluidRow(boxTag, boxTag),
tags$h2("Add shake only to the first element using id"),
tagAppendAttributes(
verticalProgress(
value = 10,
striped = TRUE,
active = TRUE
),
id = "my-progress"
),
verticalProgress(
value = 50,
active = TRUE,
status = "warning",
size = "xs"
),
verticalProgress(
value = 20,
status = "danger",
size = "sm",
height = "60%"
)
),
rightsidebar = rightSidebar(),
title = "Shake Effect"
),
server = function(input, output) { }
)Use the setBlur() and blurContainer() functions as shown below. You can choose the blur intensity (2px by default).
Code
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyEffects)
boxTag <- boxPlus(
title = "Closable box, with label",
closable = TRUE,
enable_label = TRUE,
label_text = 1,
label_status = "danger",
status = "warning",
solidHeader = FALSE,
collapsible = TRUE,
p("Box Content")
)
shinyApp(
ui = dashboardPagePlus(
header = dashboardHeaderPlus(
enable_rightsidebar = TRUE,
rightSidebarIcon = "gears"
),
sidebar = dashboardSidebar(),
body = dashboardBody(
setBlur(),
tags$h2("Add blur animation to the box class"),
fluidRow(blurContainer(boxTag), boxTag),
tags$h2("Add blur animation only to the first element using id"),
fluidRow(
blurContainer(
verticalProgress(
value = 10,
striped = TRUE,
active = TRUE
)
),
verticalProgress(
value = 50,
active = TRUE,
status = "warning",
size = "xs"
),
verticalProgress(
value = 20,
status = "danger",
size = "sm",
height = "60%"
)
)
),
rightsidebar = rightSidebar(),
title = "DashboardPage"
),
server = function(input, output) { }
)Use the setPersp() function as shown below. You can choose the perspective angle, depth, side and even decide whether to trigger it on hover.
Code
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyEffects)
boxTag <- boxPlus(
title = "Closable box, with label",
closable = TRUE,
enable_label = TRUE,
label_text = 1,
label_status = "danger",
status = "warning",
solidHeader = FALSE,
collapsible = TRUE,
p("Box Content")
)
shinyApp(
ui = dashboardPagePlus(
header = dashboardHeaderPlus(
enable_rightsidebar = TRUE,
rightSidebarIcon = "gears"
),
sidebar = dashboardSidebar(),
body = dashboardBody(
setPersp(id = "my-box-1", angle = 45),
setPersp(id = "my-box-2", angle = 45, side = "right", hover = TRUE),
tags$h2("Add Perspective effects"),
br(),
fluidRow(
tagAppendAttributes(boxTag[[2]], id = "my-box-1"),
tagAppendAttributes(boxTag[[2]], id = "my-box-2")
)
),
rightsidebar = rightSidebar(),
title = "DashboardPage"
),
server = function(input, output) { }
)