R Shiny 在单选按钮列表选项中添加分隔符答案

【问题标题】：R Shiny add separator into radio button list choicesR Shiny 在单选按钮列表选项中添加分隔符
【发布时间】：2015-09-05 10:25:43
【问题描述】：

我有这种单选按钮：

             radioButtons("test", "test:",
                          c("def" = "def",
                          "ghi" = "ghi",
                            "jkl" = "jkl")

但我想添加一个像tag$hr这样的分隔符来将def与其他分隔符分开。我试图制作两个这样的列表：

radioButtons("test", "test:",
c("def" = "def"),
tag$hr ,
radioButtons("test", "test:",
c("ghi" = "ghi",
"jkl" = "jkl")

但它不起作用。

谢谢！

【问题讨论】：

你试过玩css设置吗？在我看来，这会容易得多。现在，您正在创建两个具有相同名称的 radioButtons 元素。

标签： r radio-button shiny

【解决方案1】：

radioButtons("test1", "test:",
c("def" = "def"),selected = NULL),
tags$hr() ,
radioButtons("test2", "test:",
c("ghi" = "ghi",
"jkl" = "jkl"),selected = NULL)

您好，您想要两个单独的单选按钮吗？它是标签$ hr，而不是标签$ hr。此外，您应该为每个单选框指定唯一的名称。 test1 和 test2。

【讨论】：

您好，如果收音机有不同的名称，可以一次选择。

【解决方案2】：

根据我在 Shiny 应用程序开发方面的经验，我发现现代浏览器的“检查源代码”功能非常强大。它可以让您查看网站背后的 HTML/CSS/JS，然后您可以使用它来模拟您的工作。 Shiny 允许您将 HTML/CSS 直接插入到您的应用程序中。通过运行您提供的 radioButtons 命令，然后使用 Chrome 的开发人员功能，我能够看到构建单选按钮的确切 HTML。然后你可以直接在你的选项之间插入一个小时。我还在头部添加了一个名为 radio 的新 hr 类，因为默认情况下，hr 周围有一些填充，并且与输入框非常相似的灰色。您可能还希望能够在应用程序的其他地方使用常规小时。

可能有一种更简单的方法可以做到这一点，让更多的 HTML/CSS 专业人士可以与之交谈。希望这会有所帮助。

library(shiny)


ui <- fluidPage(
     tags$head(
          tags$style(HTML(
               "hr.radio {
                    border: 0;
                    border-top: 1px solid #8c8b8b;
                    padding-top: 1;
               }"
          ))
     ),


   titlePanel("New Radio Button Style"),


   sidebarLayout(
      sidebarPanel(HTML("
<div id='test' class='form-group shiny-input-radiogroup shiny-input-container shiny-bound-input'>
     <label class='control-label' for='test'>test</label>
<div class='shiny-options-group'>
     <div class='radio'>
          <label>
               <input type='radio' name='test' value='one' checked='checked'>
               <span>one</span>
          </label>
     </div>
     <hr class ='radio'>
     <div class='radio'>
          <label>
               <input type='radio' name='test' value='two'>
               <span>two</span>
          </label>
     </div>
     <hr class = 'radio'>
     <div class='radio'>
          <label>
               <input type='radio' name='test' value='three'>
               <span>three</span>
          </label>
     </div>
</div>
</div>")

      ),

      # You can see the input$test is still reacting with the radiobuttons
      mainPanel(
         textOutput("selection")
      )
   )
)


server <- function(input, output) {

   output$selection <- renderText({
      input$test
   })
}


shinyApp(ui = ui, server = server)

【讨论】：

【解决方案3】：

这里是 JavaScript/jQuery 解决方案。它找到包含def 单选按钮的div 元素，并在其后插入<hr>。

radioButtons("test", "test:",
             c("def" = "def",
               "ghi" = "ghi",
               "jkl" = "jkl")),
tags$head(tags$script(HTML("
                           $(document).ready(function(e) {
                              $('input[value=\"def\"]').parent().parent().after('<hr>');
                           })
                           ")))

【讨论】：