时间戳

首页 > 解决方案 > 闪亮：对齐 inputPanel 和 wellPanel，或使用其他小部件

css - 闪亮：对齐 inputPanel 和 wellPanel，或使用其他小部件

问题描述

我正在尝试设置一个闪亮的应用程序，用户在其中输入一个值，并且有 2 个框在与输入框相同的行中设置了值。 这两个框中的设置值将是数字，但它们只需要显示在那些框中。

我曾经wellPanel显示包含设定值的 2 个框。

我要解决的问题是让所有 3 个盒子很好地排列在一起。结果，我想知道除了 wellPanel 之外是否还有另一个闪亮的小部件来做我想做的事情，或者是否有办法对齐它们（wellPanel 似乎没有太多的论据，我'不知道如何对齐它们）。在真正的应用程序中，还有一堆其他输入框很好地排列在这前 3 个框下方。

下面是示例图像，您可以在其中看到该numericInput框未与wellPanel用于保存范围的框对齐。

在此处输入图像描述

这是一个简单的可重现示例：

library(shiny)

# Define UI
ui <- fluidPage(headerPanel("Test app"),
                fluidRow(
                  column(
                    width = 3,
                    numericInput(
                      inputId = "x",
                      label = "Input number",
                      value = "",
                      min = 0,
                      max = 500
                    )
                  ),
                  column(width = 3,
                         wellPanel("low range value")),
                  column(width = 3,
                         wellPanel("high range value"))
                ))

# Server
server <- function(input, output) {}

# Run
shinyApp(ui = ui, server = server)

标签： cssrshiny

解决方案

另一种选择是你使用 ShinyDashboard，你有更多的可能性，其中之一是 valueBox 组件。这里的代码示例： 闪亮仪表板中的 valueBox

library(shiny)
library(shinydashboard)
ui <- dashboardPage(dashboardHeader(),
                    dashboardSidebar(),
                    dashboardBody(fluidRow(
                      column(
                        width = 3,
                        numericInput(
                          inputId = "x",
                          label = "Input number",
                          value = "",
                          min = 0,
                          max = 500
                        )
                      ),
                      column(
                        width = 3,
                        valueBox(width = 12, format(54500, big.mark = ","),
                          "low range value", icon = icon("coins"), color = "blue")
                      ),
                      column(
                        width =  3,
                        valueBox(width = 12, format(18754500, big.mark = ","),
                                 "long range value", icon = icon("fire"), color = "orange")
                      )
                    )
                  )
                )

server <- function(input, output) {}

# Run
shinyApp(ui = ui, server = server)

推荐阅读