如何以闪亮的方式内联显示小部件

Posted

技术标签:

【中文标题】如何以闪亮的方式内联显示小部件【英文标题】:How to display widgets inline in shiny 【发布时间】:2016-08-11 02:29:17 【问题描述】:

我有下面的代码来显示小部件内联(在同一行)闪亮

div(style="display:inline-block; width: 150px;height: 75px;",selectInput("ddllgra", "Function:",c('mean','median','sd','count','min','max'), selected='mean')),
div(style="display:inline-block; width: 150px;height: 75px;",textInput(inputId="xlimitsmax", label="x-max", value = 0.5))

它在 UI 中出现,但不是以相同的行顺序。一个在上侧,另一个在下侧,同一行。

有没有办法纠正这种错位?

【问题讨论】:

很奇怪,如果我使用 RStudio 查看器,一切都会对齐。你用的是哪个浏览器? 【参考方案1】:

vertical-align:top 添加到您的style

rm(list = ls())
library(shiny)

ui <- fluidPage(
    sidebarPanel(
          div(style="display: inline-block;vertical-align:top; width: 150px;",selectInput("ddllgra", "Function:",c('mean','median','sd','count','min','max'), selected='mean')),
          div(style="display: inline-block;vertical-align:top; width: 150px;",textInput(inputId="xlimitsmax", label="x-max", value = 0.5))),
    mainPanel()
)
server <- shinyServer(function(input,output))
shinyApp(ui, server)

编辑:如何在 div 之间添加空格

您可以使用相同的方法:下面的示例在 div 之间有 100px

rm(list = ls())
library(shiny)

ui <- fluidPage(
  sidebarPanel(
    div(style="display: inline-block;vertical-align:top; width: 150px;",selectInput("ddllgra", "Function:",c('mean','median','sd','count','min','max'), selected='mean')),
    div(style="display: inline-block;vertical-align:top; width: 100px;",html("<br>")),
    div(style="display: inline-block;vertical-align:top; width: 150px;",textInput(inputId="xlimitsmax", label="x-max", value = 0.5))),
  mainPanel()
)
server <- shinyServer(function(input,output))
shinyApp(ui, server)

【讨论】:

谢谢。这对我有帮助。还有没有办法在小部件之间创建空间? @PorkChop 根据您的回答注册。 (in-line) 小部件之间的空间,我想知道当它们在不同的行中时,我们是否可以控制小部件之间的空间。假设我在 2 行 X 2 列中有“4”个小部件,并且想要减少第一行和第二行之间的空间。请参阅link 很好,但如果是sidebarPanel,你会如何处理 2 个小部件 x 2 行?【参考方案2】:

您应该使用fluidRow 创建一个fluidPage,然后使用column 函数。

     fluidPage(fluidRow(
                        column(2, selectInput()),
                        column(1, selectInput()),
                        column(2, textInput())
                        )
               )

更多详情,请在闪亮功能references 中查找fluidPagefluidRowcolumn

【讨论】:

是的。我试过这个。以您的代码为例,在某些情况下,我不会根据用户输入显示 selectinput。在这种情况下,textinput 应该首先出现在 selectinput 的位置。但这不是使用流体行发生的。

以上是关于如何以闪亮的方式内联显示小部件的主要内容,如果未能解决你的问题,请参考以下文章

Django:如何更改内联表单集中的字段小部件

如何以闪亮的方式遍历多个上传小部件?

以闪亮的方式显示来自本地驱动器的 pdf

具有内联可编辑列表的剑道网格

带有清晰表单的内联表单集 - 仅显示一次标签

DT Table 中的闪亮小部件