R语言如何在使用bslib5的shiny应用程序中使用样式参数排列ui元素

dgiusagp 于 2023-06-03 发布在其他

关注(0)|答案(2)|浏览(142)

我开发了一个闪亮的应用程序ui布局，可以与bslib4一起使用，但是当我切换到bslib5时，我的格式福尔斯崩溃了。我不知道为什么？
这是我的代码

library(shiny)
library(bslib)

ui <- navbarPage("My App",
                 id = "navbar",

  theme = bslib::bs_theme(version = 4, #setting bootstrap version
                          bootswatch = "darkly",
                          base_font = "roboto",
                          font_scale = 1.2),

  tabPanel("TAB 1",
           fluidPage(
               fluidRow(selectInput("dataset", label = "Dataset",
                                    choices = ls("package:datasets")),
                        actionButton("enter", label = "confirm choice",
                                     style = "margin-top: 32px; height: 38px; margin-left: 10px;"
                        )
               ),
               verbatimTextOutput("summary"),
               tableOutput("table")
             )
  ),
  tabPanel("TAB 2",
           h3("bla bla"))
)

server <- function(input, output, session) {

}

shinyApp(ui, server)

当使用bslib 4时，它看起来像这样

但是当我使用bslib 5时，它看起来像这样

如何在bslib 5中对齐按钮？我想在应用程序的结果部分使用bslib::card()，所以我需要bslib 5。

来源：https://stackoverflow.com/questions/76366992/how-to-line-up-ui-elements-using-style-argument-in-shiny-app-that-uses-bslib-5

2条答案

按热度按时间

4c8rllxm1#

我们可以使用style参数：style = "margin-top: 35px; margin-left: 10px; height: 38px;"
div()函数为selectInput和actionButton创建容器元素。
使用class参数，我们可以将CSS类分配给div元素，以向容器添加样式。
通过在容器中添加Bootstrap类d-flex类，我们可以使用flexbox布局。

library(shiny)
library(bslib)

ui <- navbarPage(
  "My App",
  id = "navbar",
  theme = bs_theme(
    version = 5,
    bootswatch = "darkly",
    base_font = "roboto",
    font_scale = 1.2
  ),
  tabPanel(
    "TAB 1",
    fluidPage(
      fluidRow(
        div(
          class = "d-flex",
          style = "margin-top: 32px;",
          selectInput(
            "dataset",
            label = "Dataset",
            choices = ls("package:datasets")
          ),
          actionButton(
            "enter",
            label = "Confirm Choice",
            style = "margin-top: 35px; margin-left: 10px; height: 38px;"
          )
        )
      ),
      verbatimTextOutput("summary"),
      tableOutput("table")
    )
  ),
  tabPanel("TAB 2", h3("bla bla"))
)

server <- function(input, output, session) {
  
}

shinyApp(ui, server)