如何修复语义仪表板的布局？

Question

我正在尝试使用 semantic.dashboard 库构建仪表板。我看到所有组件都在中心对齐。如何更改布局？

我从 semantic.dashboard 存储库中的示例中获取了以下代码。当我运行它时它工作得非常好。我看到侧边栏菜单和主体中的框之间有一个空格。我希望组件在侧边栏菜单中没有任何空间的情况下对齐。有什么办法可以实现吗？

library(shiny)
library(shiny.semantic)
library(semantic.dashboard)
library(ggplot2)
library(plotly)
library(DT)

ui <- dashboardPage(
  dashboardHeader(
    dropdownMenuOutput("dropdown"),
    dropdownMenu(type = "notifications",
                 taskItem("Project progress...", 50.777, color = "red")),
    dropdownMenu(
      icon = uiicon("red warning sign"),
      notificationItem("This is an important notification!", color = "red")
    )
  ),
  dashboardSidebar(side = "left",
                   sidebarMenu(
                     menuItem(
                       tabName = "plot_tab",
                       text = "My plot",
                       icon = icon("home")
                     ),
                     menuItem(
                       tabName = "table_tab",
                       text = "My table",
                       icon = icon("smile")
                     )
                   )),
  dashboardBody(tabItems(
    tabItem(tabName = "plot_tab",
            fluidRow(
              valueBox(
                "Unread Mail",
                44,
                icon("mail"),
                color = "blue",
                width = 5
              )
            ),
            fluidRow(
              box(
                title = "Sample box",
                color = "blue",
                width = 11,
                selectInput(
                  inputId =  "variable1",
                  choices = names(mtcars),
                  label = "Select first variable",
                  selected = "mpg"
                ),
                selectInput(
                  inputId =  "variable2",
                  choices = names(mtcars),
                  label = "Select second variable",
                  selected = "cyl"
                ),
                plotlyOutput("mtcars_plot")
              ),
              tabBox(
                title = "Sample box",
                color = "blue",
                width = 5,
                collapsible = FALSE,
                tabs = list(
                  list(menu = "First Tab", content = "Some text..."),
                  list(menu = "Second Tab", content = plotlyOutput("mtcars_plot2"))
                )
              )
            )),
    tabItem(
      tabName = "table_tab",
      fluidRow(
        valueBox(
          "Unread Mail",
          144,
          icon("mail"),
          color = "blue",
          width = 6,
          size = "small"
        ),
        valueBox(
          "Spam",
          20,
          icon("mail"),
          color = "red",
          width = 5,
          size = "small"
        ),
        valueBox(
          "Readed Mail",
          666,
          icon("mail"),
          color = "green",
          width = 5,
          size = "small"
        )
      ),
      fluidRow(
        box(
          title = "Classic box",
          color = "blue",
          ribbon = FALSE,
          title_side = "top left",
          width = 14,
          tags$div(
            dataTableOutput("mtcars_table")
            ,
            style = paste0("color:", semantic_palette[["blue"]], ";")
          )
        )
      )
    )
  )),
  theme = "slate"
)

server <- function(input, output) {
  output$mtcars_plot <-
    renderPlotly(plot_ly(
      mtcars,
      x = ~ mtcars[, input$variable1],
      y = ~ mtcars[, input$variable2],
      type = "scatter",
      mode = "markers"
    ))
  output$mtcars_plot2 <-
    renderPlotly(plot_ly(
      mtcars,
      x = ~ mtcars[, input$variable1],
      y = ~ mtcars[, input$variable2],
      type = "scatter",
      mode = "markers"
    ))

  output$mtcars_table <-
    renderDataTable(mtcars, options = list(dom = 't'))

  output$dropdown <- renderDropdownMenu({
    dropdownMenu(
      messageItem("User", "Test message", color = "teal", style = "min-width: 200px"),
      messageItem("Users", "Test message", color = "teal", icon = "users"),
      messageItem(
        "See this",
        "Another test",
        icon = "warning",
        color = "red"
      )
    )
  })
}

shinyApp(ui, server)

Answer 1

看起来问题出在dashboardBody 函数背后。它为每个导致大量填充的选项卡使用ui stackable container grid。

有两种解决方法：

1. 绕过dashboardBody 函数并从类中删除“容器”：

dash_body <- function (...) {
  shiny::div(
    class = "pusher container", style = "min-height: 100vh;",
    shiny::div(
      class = "ui segment", style = "min-height: 100vh;",
      shiny::tags$div(class = "ui stackable grid", ...)
    ), 
    semantic.dashboard:::body_js
  )
}

1. 添加 CSS 以删除此类的填充（在 dashboardBody 参数中添加第一行）：

tags$style(".pusher.container .ui.segment .ui.stackable.container.grid {margin:0px!important;}")