首页 > 解决方案 > 在侧边栏菜单项之一上方添加空间

问题描述

我想在侧边栏菜单项之一上方添加空间。例如,下面示例中的“小部件”应显示在页面底部的侧边栏下方(意味着菜单顶部应该有空间)。我尝试这样做,tags$div(style = "margin-top: 50px;",但没有得到想要的输出。

library(shinydashboard)
library(shiny)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(
    sidebarMenu(
    menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
    menuItem("Widgets", tabName = "widgets", icon = icon("th"))
    )
  ),
  dashboardBody(
    tabItems(
      # First tab content
      tabItem(tabName = "dashboard",
              fluidRow(
                box(plotOutput("plot1", height = 250)),
                
                box(
                  title = "Controls",
                  sliderInput("slider", "Number of observations:", 1, 100, 50)
                )
              )
      ),
      
      # Second tab content
      tabItem(tabName = "widgets",
              h2("Widgets tab content")
      )
    )
  )
)

server <- function(input, output) {
  set.seed(122)
  histdata <- rnorm(500)
  
  output$plot1 <- renderPlot({
    data <- histdata[seq_len(input$slider)]
    hist(data)
  })
}

shinyApp(ui, server)

标签: rshinyshinydashboard

解决方案


你可以使用这个 CSS:

css <- "
.sidebar-menu li:not(:last-child) {
  margin-bottom: 200px;
}
"

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(
    sidebarMenu(
      menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
      menuItem("Widgets", tabName = "widgets", icon = icon("th"))
    )
  ),
  dashboardBody(
    tags$head(
      tags$style(HTML(css))
    ),
    tabItems(
    ......

推荐阅读