Question

我构建了一个动态UI，并希望根据运行时可用的一些数据在屏幕上定位一个元素（比如一个按钮）。

例如，如果输入$ x的值为F，则将按钮置于窗口宽度的90％和窗口高度的50％（例如可见窗口的中间右侧），但如果输入$ x为T则把相同的按钮放在其他地方说右下角。

为此，我可能还需要提取窗口本身的信息。

任何想法如何做到这一点？

Answer 1

您可以使用input获取JavaScript窗口的尺寸。（Related SO question）

tags$head(tags$script('
      var dimension = [0, 0];
      $(document).on("shiny:connected", function(e) {
          dimension[0] = window.innerWidth;
          dimension[1] = window.innerHeight;
          Shiny.onInputChange("dimension", dimension);
      });
      $(window).resize(function(e) {
          dimension[0] = window.innerWidth;
          dimension[1] = window.innerHeight;
          Shiny.onInputChange("dimension", dimension);
      });
  '))

包含此脚本后，您可以input$dimensions中的shiny访问width（包含height和observer）。

因此，您可以引入使用input$dimension的{{1}}，并根据该内容创建自定义CSS：

observe( {
    if (input$slt == "TRUE") {
      # put the button at bottom right corner
      output$ui <- renderUI( {
        margin_left <- input$dimension[1] * 0.8  # 80% off left
        margin_top <- input$dimension[2] * 0.8   # 80% off top
        actionButton("btn", "Moving button at bottom",
                     style = sprintf("position: absolute; left: %spx; top: %spx;", margin_left, margin_top))
      })
    } else {
      # put the button at middle right
      output$ui <- renderUI( {
        margin_left <- input$dimension[1] * 0.8  # 80% off left
        margin_top <- input$dimension[2] * 0.5   # 50% off top
        actionButton("btn", "Moving button at middle",
                     style = sprintf("position: absolute; left: %spx; top: %spx;", margin_left, margin_top))
      })
    }
  })

不确定它有多有用。例如，在最右边放置一个元素时，最好使用以下内容："right: 0px;"。

动态定位r / shiny中的元素

1 个答案: