R Shiny：如何使幻灯片居中

Posted 2023-03-24

【中文标题】R Shiny：如何使幻灯片居中

【英文标题】：RShiny: How to center sliders

【发布时间】：2020-04-01 10:12:45

【问题描述】：

我是 RShiny 的新手，我正在尝试复制此模板：https://shiny.rstudio.com/gallery/retirement-simulation.html 我确实有这个模板的代码，但这是一个学习练习。

这是我目前所拥有的：

ui <- fluidPage(

  # Title goes here...
  titlePanel("Retirement: simulating wealth with random returns, inflation and withdrawals"),
  p("Description here..."),
  hr(),

  # Sidebar layout...
  sidebarLayout(
    # Sidebar panel...
    sidebarPanel(
      # Input: Slider for the number of observations to generate ----
      sliderInput("n",
                  "Param 1",
                  value = 500,
                  min = 1,
                  max = 1000),
      sliderInput("n",
                  "Param 2",
                  value = 500,
                  min = 1,
                  max = 1000),
      sliderInput("n",
                  "Param 3",
                  value = 500,
                  min = 1,
                  max = 1000),
      sliderInput("n",
                  "Param 4",
                  value = 500,
                  min = 1,
                  max = 1000)
    ),

    # Main panel...
    mainPanel(
      # Outputs of any plots...
      tabsetPanel(type = "tabs",
                  tabPanel("Plot", plotOutput("plot"))
      )
    )
  )
)

看起来不错，但我需要像上面的模板一样使滑块居中。非常感谢正确方向的指点！

谢谢，

乔布斯

【问题讨论】：

在侧边栏面板中使用 column 参数...其他选项是使用 box 在滑块周围设置框以进行更精细的控制

谢谢。我玩过这个，但我不明白列宽 1-12 部分。如何像上面的示例一样让 16 个滑块以 4 x 4 对齐？

【参考方案1】：

使用margin: auto CSS 规则：

div(style = "margin: auto; width: 80%", # this number can be any percentage you need
    sliderInput(
                ...
                width = "100%" # this number has to be "100%", nothing less
               )
   )

【参考方案2】：

您可以结合使用 wellPanel、fluidRow 和 column。

第一个fluidRow 将2 个wellPanel 并排放置，50% 分开。在每个 wellPanel 中，我们使用 fluidRows 定义一行，然后使用 2 个宽度为 6 的列来定义 2 个 50% 宽度的列。

ui <- navbarPage("Test",

     tabPanel("Data",

              fluidRow(column(
                6,
                wellPanel(
                  fluidRow(column(
                    6, sliderInput("input1", "input1", 0, 100, 5)
                  ),
                  column(
                    6, sliderInput("input2", "input2", 0, 100, 5)
                  )),

                  fluidRow(column(
                    6, sliderInput("input1", "input3", 0, 100, 5)
                  ),
                  column(
                    6, sliderInput("input3", "input4", 0, 100, 5)
                  )),

                  fluidRow(column(
                    6, sliderInput("input1", "input5", 0, 100, 5)
                  ),
                  column(
                    6, sliderInput("input2", "input6", 0, 100, 5)
                  ))
                )
              ))))

最终的输出应该是这样的