繁体   English   中英

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

[英]How to set style for a conditional panel in Shiny

我有以下条件面板:

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>

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

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

条件面板使用 jQuery show 和 hide 方法,它们具有将 display 属性设置为none的功能,用于hideshowblock或元素在 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)

为面板添加一个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
}

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM