我使用 R Shiny Dashboardpage 构建我的交互式仪表板。我想锁定 dashboardHeader 和 sidebarMenu,以便在滚动时,标题和侧边栏保持在同一位置。
对于 sidebarMenu,这可以在 CSS 中完成:
.skin-blue .main-sidebar {
position: fixed;
overflow: visible;
}
但是,当您对 dashboardHeader 尝试相同的技巧时,它失败了。它将下拉菜单(通知图标)放在左侧,而不是右上角。
如何在不更改 Shiny 应用程序设计的情况下修复 header ?
最小工作示例:
应用.R:
## app.R ##
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(title = "Basic dashboard",
dropdownMenu(type = "messages",
messageItem(
from = "Sales Dept",
message = "Sales are steady this month."
)
)
),
dashboardSidebar(
sidebarMenu(
menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
menuItem("Widgets", tabName = "widgets", icon = icon("th"))
)
),
dashboardBody(
## Add some CSS shit to change colors, width, etc.
tags$head(
tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")
),
fluidRow(
box(plotOutput("plot1", height = 2500))
)
)
)
server <- function(input, output) {
histdata <- rnorm(500)
output$plot1 <- renderPlot({
data <- histdata[1:50]
hist(data)
})
}
shinyApp(ui, server)
www/custom.css:
/* logo */
.skin-blue .main-header .logo {
position: fixed;
overflow: visible;
}
/* navbar (rest of the header) */
.skin-blue .main-header .navbar {
position: fixed;
overflow: visible;
}
/* main sidebar */
.skin-blue .main-sidebar {
position: fixed;
overflow: visible;
}
AdminLte(shinydashboard
使用的框架)有一个固定的布局(参见 here),您可以通过将此行放在您的 UI 中的某个位置来在您的应用程序中激活它:
tags$script(HTML("$('body').addClass('fixed');"))
(例如在dashboardBody
中)
注意:这将对标题和侧边栏应用固定布局。
我是一名优秀的程序员,十分优秀!