Using Fomantic UI JavaScript elements [Advanced]

Appsilon

2024-04-05

Using Fomantic UI JavaScript elements [Advanced]

Some Fomantic UI elements require to run a specific JS code when DOM document is ready. There are at least 2 options to do this:

  1. Use shinyjs
library(shinyjs)
...
jsCode <- " # Fomantic UI componts JS "
...
ui <- function() {
  shinyUI(
    semanticPage(
      title = "Your page title",
      shinyjs::useShinyjs(),
      # Your UI code
    )
  )
}
server <- shinyServer(function(input, output) {
  runjs(jsCode)
  # Your Shiny logic
})
shinyApp(ui = ui(), server = server)
  1. Use shiny::tags$script()
...
jsCode <- "
$(document).ready(function() {
  # Semantic UI components JS code, like:
  #$('.rating').rating('setting', 'clearable', true);
  #$('.disabled .rating').rating('disable');
})
...
"

ui <- function() {
  shinyUI(
    semanticPage(
      title = "My page",
      tags$script(jsCode),
      # Your UI code
    )
  )
}
...
server <- shinyServer(function(input, output) {
  # Your Shiny logic
})

shinyApp(ui = ui(), server = server)