CSS effects

knitr::opts_chunk$set(
  collapse = TRUE,
  comment = "#>"
)

With shinyEffects, you will be able to customize the style of any elements.

Set shadows and hover effects

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) { }
  )


Set zoom effect on any elements

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) { }
  )


Set pulse effect on any elements

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) { }
  )


Set shake effect on any elements (on hover)

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) { }
  )


Combine CSS effects

You can combine all the previous effects according to your needs.



Try the shinyEffects package in your browser

Any scripts or data that you put into this service are public.

shinyEffects documentation built on May 1, 2019, 6:29 p.m.