Sáng bóng: Có thể tạo thanh trượt dọc không?

Question

Có khả năng tạo thanh trượt dọc trong Sáng bóng không? Về cơ bản tôi muốn một âm mưu, một thanh trượt dọc ở bên trái của nó, và một thanh trượt ngang bình thường bên dưới nó.

Answer 1

Tôi cũng đang tìm kiếm nó và tôi nghĩ rằng nó không được triển khai. Trong nhóm thảo luận sáng bóng có một câu hỏi tương tự từ tháng 11 năm 2014, và nó vẫn mở.

https://groups.google.com/forum/#!searchin/shiny-discuss/vertical$20slider

Tìm kiếm trên official gallery và các trang web, tôi couldn`t tìm thấy bất kỳ ví dụ về nó. Tất cả các thanh trượt đều nằm ngang. Luôn luôn.

Answer 2

Có nhiều cách để thực hiện thủ công. Bạn sẽ cần phải tạo một tuỳ chỉnh js.

Đây là một ứng dụng shinny điên nơi mà mọi thứ quay

#Libs 
    require(c('shiny')) 
    js<-"$(function() { 
     var $elie = $('div'); 
     rotate(25); 
     function rotate(degree) {   
      $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); 
      $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); 
      timer = setTimeout(function() { 
       rotate(++degree); 
      },100); 
     } 
    });" 


    renderInputs <- function(prefix) { 
     wellPanel(
     fluidRow(
      column(3, 
       sliderInput(paste0(prefix, "_", "n_obs"), "View a specific date", min = as.Date('1980-05-15'), max = Sys.Date(), value = as.Date('2000-01-01'), 
       #sliderInput("date_range", "Choose Date Range:", min = as.Date("2016-02-01"), max = Sys.Date(), value = c(as.Date("2016-02-25"), Sys.Date()) 
       ), 
       verbatimTextOutput("info") 
     ), 
      column(9, 
       plotOutput("plot1", 
          click = "plot_click", 
          dblclick = "plot_dblclick", 
          hover = "plot_hover", 
          brush = "plot_brush") 
     ) 
     ) 
    ) 
    } 

    ui <- shinyUI(fluidPage(theme="simplex.min.css", 
          tags$style(type="text/css", 
             "label {font-size: 12px;}", 
             ".recalculating {opacity: 1.0;}" 
          ), 
          tags$head(
           tags$style(HTML(" 
               @import url('//fonts.googleapis.com/css?family=Lobster|Cabin:400,700'); 

               h1 { 
               font-family: 'Lobster', cursive; 
               font-weight: 500; 
               line-height: 1.1; 
               color: #48ca3b; 
               } 

               ")), 
           tags$script(HTML(js)) 
          ), 

          # Application title 
          tags$h2("Google!!!"), 
          p("An adaptation of the", 
           tags$a(href="https://google.com", "Google"), 
           "from", 
           tags$a(href="https://duckduckgo.com/", "DuckDuckGo"), 
           "to get the best possible results without selling yourself"), 
          hr(), 

          fluidRow(
           column(6, tags$h3("Scenario A")), 
           column(6, tags$h3("Scenario B")) 
          ), 
          fluidRow(
           column(12, renderInputs("a")) 
          ), 
          fluidRow(
           column(6, 
            plotOutput("a_distPlot", height = "600px") 
          ), 
           column(6, 
            plotOutput("b_distPlot", height = "600px") 
          ) 
          ) 
          ) 
       ) 


    server <- function(input, output) { 
     output$plot1 <- renderPlot({ 
     plot(mtcars$wt, mtcars$mpg) 
     }) 

     output$info <- renderText({ 
     xy_str <- function(e) { 
      if(is.null(e)) return("NULL\n") 
      paste0("x=", round(e$x, 1), " y=", round(e$y, 1), "\n") 
     } 
     xy_range_str <- function(e) { 
      if(is.null(e)) return("NULL\n") 
      paste0("xmin=", round(e$xmin, 1), " xmax=", round(e$xmax, 1), 
       " ymin=", round(e$ymin, 1), " ymax=", round(e$ymax, 1)) 
     } 

     paste0(
      "click: ", xy_str(input$plot_click), 
      "dblclick: ", xy_str(input$plot_dblclick), 
      "hover: ", xy_str(input$plot_hover), 
      "brush: ", xy_range_str(input$plot_brush) 
     ) 
     }) 
    } 

    shinyApp(ui, server) 


    ################################ 

Nếu bạn muốn nó làm việc xoay chỉ có một yếu tố bạn cần phải sửa đổi js như thế này:

js<-"$(function() { 
     var $elie = $(document.getElementsByClassName('form-group shiny-input-container')); 
    rotate(270); 
    function rotate(degree) {   
     $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); 
     $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); 
    } 
});" 

Nó vẫn cần một bit công việc để sửa các chức năng như trượt và đệm của div và thêm id tùy chỉnh trên tất cả các phần tử bạn muốn xoay: do đó đảm bảo bạn sẽ không áp dụng js trên phần tử bạn không muốn và nhận được sự lộn xộn từ ví dụ đầu tiên, nhưng nó phải là ag điểm khởi đầu tốt.