如何在 Shiny 中为条件面板设置样式

Question

我有以下条件面板：

conditionalPanel
(condition = 'input.show_p =="1"',
    fluidRow(
      box(width =12,
          actionLink(inputId = "p_name", label = "Path"),
          HTML("/"),
          conditionalPanel(condition = 'input.show_l == "1"',
            actionLink(inputId = "l_name", label = "Path"),
            HTML("/")
          )
      )
   )
)

正如我在生成的 html 中看到的，我发现最里面的条件面板被转换为带有display: block 的 div，如下所示：

<div data-display-if="input.show_l == &quot;1&quot;" data-ns-prefix="" style="display: block;">
    <a id="pl_name" href="#" class="action-button shiny-bound-input"> LM </a>
                        /
</div>

问题是 如何在 R 中将其更改为 display: inline？或者换句话说，如何在 R Shiny 中设置条件面板的样式？

Answer 1

如果您想使用 CSS 类选择器，可以使用 conditionalPanel(…) %>% tagAppendAttributes(class = "inline") 将类添加到 conditionalPanel，然后将 .inline {display: inline-block;} 添加到您的 CSS。

Answer 2

样式可以像添加大多数其他元素一样添加到条件面板中，使用带有有效 css 字符串的样式参数。

条件面板使用 jQuery 的 show 和 hide 方法，它们具有将 display 属性设置为 none 的功能，hide 和 show 到 block 或元素在 jQuery 之前的任何值操纵它。这最后一部分的意思是，我们可以将display 设置为inline-block，它会像常规样式一样被保留。

一个简短的版本是这样的：

library(shiny)

ui <- fluidPage(
    actionButton("show_p", "Toggle"),
    "Some text to wrap the", 
    conditionalPanel(condition = 'input.show_p % 2', id="nice", style="display: inline-block;", "hidden"),
    "conditional panel."
)

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

shinyApp(ui, server)

Answer 3

为面板添加id，然后在custom.css引用文件中修改：

# in shiny dashboard
tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "custom.css"))

#...

conditionalPanel
(condition = 'input.show_p =="1"',
  fluidRow(
    box(width =12,
        actionLink(inputId = "p_name", label = "Path"),
        HTML("/"),
        conditionalPanel(condition = 'input.show_l == "1"', id="pl_panel"
          actionLink(inputId = "l_name", label = "Path"),
          HTML("/")
        )
    )
  )
)

如您所知，修改引用的样式文件 (custom.css)：

#pl_panel
{
    display: inline-block
}