Question

我正在构建一个闪亮的仪表板应用程序，我想在两行中得到一个框（请参见下图）。

我试图混合列和行，但是我没有设法得到这个结果。

这是我的ui测试：

fluidRow(
                box(
                  width = 3,
                  title = "Analyses",
                  dataTableOutput("ind_ana") %>% withSpinner(type = getOption("spinner.type", default = 6))
                ),
                box(
                  width = 3,
                  title = "Limites de quantification",
                  dataTableOutput("ind_lq") %>% withSpinner(type = getOption("spinner.type", default = 6))
                ),
                box(width = 3,
                    title = "Valeurs de références",
                    dataTableOutput("tabFnade")
                    ),
                box(width = 3,
                    title = "Seuils",
                    splitLayout(
                      numericInput("seuil1", NULL, value = 0, min = 0, max =0),
                      colourInput("col1", NULL, "blue")
                    ),
                    splitLayout(
                      numericInput("seuil2", NULL, value = 0, min = 0, max =0),
                      colourInput("col2", NULL, "green")
                    ),
                    splitLayout(
                      numericInput("seuil3", NULL, value = 0, min = 0, max =0),
                      colourInput("col3", NULL, "yellow")
                    ),
                    splitLayout(
                      numericInput("seuil4", NULL, value = 0, min = 0, max =0),
                      colourInput("col4", NULL, "orange")
                    ),
                    splitLayout(
                      numericInput("seuil5", NULL, value = 0, min = 0, max =0),
                      colourInput("col5", NULL, "red")
                    ),
                    splitLayout(
                      numericInput("seuil6", NULL, value = 0, min = 0, max =0),
                      colourInput("col6", NULL, "brown")
                    )
                    )

我可以使用Shinydashboard（也许使用CSS）做到这一点吗？

Answer 1

我使用两个滑入3列的大盒子，使用闪亮的仪表板来做到这一点：

    stickManTranslateX = new Animated.value(0);

    moveStickManLeft = toValue => {
         this.stickManTranslateX.setValue(toValue);
    }

在两行中放一个盒子

1 个答案: