R Shiny 中的响应式 CSS 属性

Posted 2023-03-24

【中文标题】R Shiny 中的响应式 CSS 属性

【英文标题】：Reactive CSS properties in R Shiny

【发布时间】：2018-02-13 04:10:40

【问题描述】：

我想使用滑动条有选择地控制字体缩放。这可能吗？

我附上了一份 MRE，我相信它可以证明我的困境以及我想要实现的目标。

if(!require('pacman')) install.packages("pacman") # Ensures that pacman is installed for auto-installation
pacman::p_load(shiny, lipsum) # automatically installs and loads packages.

ui <- fluidPage( # Sidebar with a slider input for font size
    sidebarLayout(sidebarPanel(
        sliderInput("font_size", "Font Size:", min = 1, max = 200, value = 70
        )
    ),

    mainPanel(
        wellPanel(
            id = "textPanel",
            style = "overflow-y:scroll; max-height: 50vh; font-size: 70%",
            #style = paste0("overflow-y:scroll; max-height: 50vh; font-size: ",
            # output$text_size,"70%"),
        paste0(lipsum[2:10], collapse = "")))))

# Define server logic 
server <- function(input, output) 
    output$text_size = renderText(input$font_size)

# Run the application
shinyApp(ui = ui, server = server)

【参考方案1】：

您可以使用shinyjs 运行一些javascript 代码来更改任何CSS，在本例中为font-size。

library(shiny)
library(shinyjs)

ui <- fluidPage( 
  shinyjs::useShinyjs(),
  sidebarLayout(
    sidebarPanel(
      sliderInput("font_size", "Font Size:", min = 1, max = 200, value = 70)
    ),
    mainPanel(
      wellPanel(
        id = "textPanel",
        style = "overflow-y:scroll; max-height: 50vh; font-size: 70%",
      paste0("Hello", collapse = ""))
    )
  )
)

server <- function(input, output) 
  observeEvent(input$font_size, 
    runjs(paste0('$("#textPanel").css("font-size","', input$font_size, '%")'))
  )


shinyApp(ui = ui, server = server)