R Shiny aggiungere separatore in pulsanti di opzione scelte Lista

Question

ho questo tipo di pulsante di scelta:

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

Ma vorrei aggiungere un separatore come tag$hr per separare def dagli altri. Ho provato a fare due elenco come questo:

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

ma non funziona.

grazie!

Answer 1

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

Ciao, vuoi due pulsanti radio separati? è tag $ hr, non tag $ hr. inoltre, dovresti dare un nome univoco per ogni radio box. test1 e test2.

Answer 2

Nella mia esperienza con lo sviluppo di app Shiny ho trovato la funzione "Inspect Source" dei browser moderni incredibilmente potente. Ti consente di visualizzare HTML/CSS/JS dietro i siti Web e quindi puoi utilizzarlo per modellare il tuo lavoro. Shiny ti consente di inserire HTML/CSS direttamente nella tua app. Eseguendo il comando radioButtons fornito, quindi utilizzando la funzione di sviluppatore di Chrome, sono riuscito a visualizzare l'esatto codice HTML che ha generato i pulsanti radio. Quindi puoi inserire un'ora direttamente tra le tue opzioni. Ho anche aggiunto una nuova classe hr chiamata radio in testa perché di default hr ha un po 'di padding attorno ad esso ed è un grigio molto simile alla casella di input. Potresti anche voler utilizzare un hr regolare altrove nell'app.

Potrebbe esserci un modo più semplice per eseguire questa operazione a cui potrebbe rivolgersi un utente con un po 'più di un professionista HTML/CSS. Spero che questo ti aiuti.

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) 

Answer 3

Ecco la soluzione JavaScript/jQuery. Trova l'elemento div che contiene il pulsante di opzione def e inserisci uno <hr> dopo.

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>'); 
          }) 
          ")))