时间戳

首页 > 解决方案 > 从闪亮的反应输出修改 CSS

javascript - 从闪亮的反应输出修改 CSS

问题描述

我在 Shiny 中有一个 navbarPage，我在其中初始化了一个使用 css 隐藏的选项卡（我们称之为 tab1）。为此，我使用以下行：

    tags$head(tags$style(HTML("#tabs li a[data-value = 'tab1'] {display: none;}"))),

哪个完美。

现在，在服务器中，我想显示该选项卡以响应事件，但我不知道如何从 R 代码“更新/替换”该 css 属性（显示：无）。我看到使用 runjs() 可以完成，但我并不是真正的 js/css 专家。

如何修改服务器中该对象的 css 属性？

标签： javascriptcssshiny

解决方案

更新

我想我成功了。我的做法是：一开始就定义两个css样式。 display: none对于初始 tab2 navbar tabsetpanel 和display: inline-block !important一个名为“showtab”的新类。然后我使用shinyjs 将一个类添加到导航栏tabsetpanel 的tab2 中，它会覆盖（!important）tab2 的原始css 样式。

shinyjs 原始功能的问题是：（1）使用hide/时show，您可以在初始启动时看到 tab2，您不希望它出现。(2) 当使用您的 css 样式时，display: none样式参数更改为将导航栏页面中单词“tab2”的位置弄乱了。shinyjs::showshinyjqui::jqui_showstyle = inline

css <- "
#navbar li a[data-value = tab2] {
display: none;
}
.showtab {
display: inline-block !important;
}
"

# 

library(shiny)
library(shinyjs)

ui <- tagList(

  useShinyjs(),
  inlineCSS(css),

  navbarPage(
    "test navbarPage",
    id = "navbar",
    tabPanel(
      title = "tab1",
      actionButton("show", "Show tab2")
    ),

    tabPanel(
      title = "tab2"
    )
  )
)

server <- function(input, output, session) {

  observeEvent(input$show, {
    addClass(selector = "#navbar li a[data-value = tab2]",
                   class = 'showtab')
  })
}



shinyApp(ui = ui, server = server)

推荐阅读