對齊單選按鈕的選項和滑塊閃亮的應用

Question

問題

我想創造一個有幾個滑塊，繪圖輸出和單選按鈕的UI。使用滑塊可以選擇數值，使用單選按鈕可以選擇與滑塊相關的滑塊。

理想情況下，我會在每個滑塊（顯示無標籤）前面有一個單選按鈕，而不是單選按鈕組。我怎樣才能做到這一點？我想在css中調整一些？我用複選框（而不是複選框組雖然）和使用column做了類似的事情。但是單選按鈕在這種情況下更適合，因爲我想限制用戶只選擇一個元素。

現狀

(Radiobutton 1) 
(Radiobutton 2) 
[----Slider 1----] 
[----Slider 2----] 

理想的情況

(Radiobutton 1) [----Slider 1----] 
(Radiobutton 2) [----Slider 2----] 

代碼

library(shiny) 
app <- shinyApp(
    ui = bootstrapPage(
     radioButtons("slds.rb", label = "", choices = paste0("sld", 1:2)), 
     sliderInput("sld1", min = 0, max = 10, label = "y1", value = 5), 
     sliderInput("sld2", min = 0, max = 10, label = "y2", value = 5), 
     plotOutput('plot') 
    ), 
    server = function(input, output) { 
     output$plot <- renderPlot({ 
     plot(seq_len(input[[input$slds.rb]])) 
     }) 
    }) 
runApp(app) 

Answer 1

你可以做到這一點USI ng div函數（它將在HTML中創建<div>塊）與樣式display: inline-block;一起使用。所以你的用戶界面變成：

ui = bootstrapPage(
    div(style="display: inline-block;",radioButtons("slds.rb", label = "", choices = paste0("sld", 1:2),width = '100px')), 
    div(style="display: inline-block;",sliderInput("sld1", min = 0, max = 10, label = "y1", value = 5), 
             sliderInput("sld2", min = 0, max = 10, label = "y2", value = 5)), 
    plotOutput('plot') 
) 

這將CSS display: inline-block;應用到你的div區塊。

編輯：這只是讓他們並排...將它們對齊將需要手動調整padding和margin。