调整仪表板页眉中图像、操作按钮和ι的位置 [英] Adapt the position of image, actionbuttons and tιtle in header of shinydashboard
本文介绍了调整仪表板页眉中图像、操作按钮和ι的位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有下面这个闪亮的应用程序，我想在标题中放一个图像、一个标题和四个操作按钮，就像附加的屏幕截图中一样。这4个按钮应该在标题下方，而不是覆盖图像。我怎么才能适应它呢？它取决于屏幕分辨率吗？字体和字号不应更改。
应该是这样的：
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyjs)
mytitle <- paste0("Life, Death & Statins")
dbHeader <- dashboardHeaderPlus(
titleWidth = "0px",
tags$li(a(
div(style = "margin-left:-15px;margin-bottom:-83px;margin-top:-15px;padding: 0px 1190px 0px 0px ; width: 290px;",
img(src = 'logo-primary-linen.png', height = "125px",width="232px")),
div(style="display: inline;margin-top:-35px; padding: 0px 90px 0px 1250px ;font-size: 44px ;color:#001641;font-family:Chronicle Display Light; width: 500px;",HTML(mytitle)),
div(style="display: inline;margin-top:15px; padding: 0px 0px 0px 0px;vertical-align:top; width: 150px;", actionButton("info", "Information",
style=" background-color: #faf0e6; border-color: #faf0e6")),
div(style="display: inline;padding: 0px 0px 0px 0px;vertical-align:top; width: 150px;", actionButton("conse", "Consent",
style=" background-color: #faf0e6; border-color: #faf0e6")),
div(style="display: inline;padding: 0px 0px 0px 0px;vertical-align:top; width: 150px;", actionButton("rp", "Run Project",
style=" background-color: #faf0e6; border-color: #faf0e6")),
div(style="display: inline;padding: 0px 0px 0px 0px;vertical-align:top; width: 150px;", actionButton("res", "Results",
style=" background-color: #faf0e6; border-color: #faf0e6"))
),
class = "dropdown")
)
shinyApp(
ui = dashboardPagePlus(
header = dbHeader,
sidebar = dashboardSidebar(width = "0px",
sidebarMenu(id = "sidebar", # id important for updateTabItems
menuItem("Information", tabName = "info", icon = icon("table")),
menuItem("Consent", tabName = "conse", icon = icon("line-chart")),
menuItem("Run Project", tabName = "rp", icon = icon("table")),
menuItem("Results", tabName = "res", icon = icon("line-chart"))
) ),
body = dashboardBody(
useShinyjs(),
tags$script(HTML("$('body').addClass('fixed');")),
tags$head(tags$style(".skin-blue .main-header .logo { padding: 0px;}")),
tabItems(
tabItem("info"
),
tabItem("conse"
),
tabItem("rp"),
tabItem("res"
)
)
)
),
server<-shinyServer(function(input, output,session) {
hide(selector = "body > div > header > nav > a")
}
)
)
推荐答案
太多的左侧填充将其推到右侧。试试这个
mytitle <- paste0("Life, Death & Statins")
dbHeader <- dashboardHeaderPlus(
titleWidth = "0px",
tags$li(a(
div(style = "margin-left:-15px;margin-bottom:-78px;margin-top:-15px;padding: 0px 1190px 0px 0px ; width: 290px;",
img(src = 'UOW.png', height = "155px",width="232px")),
div(style="display: inline;margin-top:-35px; padding: 0px 50px 0px 700px ;font-size: 44px ;color:#001641;font-family:Chronicle Display Light; width: 500px;",HTML(mytitle)),
div(style="display: inline; margin-top:15px; padding: 0px 0px 0px 700px;vertical-align:top; width: 150px;", actionButton("info", "Information",
style=" background-color: #faf0e6; border-color: #faf0e6")),
div(style="display: inline;padding: 0px 0px 0px 0px;vertical-align:top; width: 150px;", actionButton("conse", "Consent",
style=" background-color: #faf0e6; border-color: #faf0e6")),
div(style="display: inline;padding: 0px 0px 0px 0px;vertical-align:top; width: 150px;", actionButton("rp", "Run Project",
style=" background-color: #faf0e6; border-color: #faf0e6")),
div(style="display: inline;padding: 0px 0px 0px 0px;vertical-align:top; width: 150px;", actionButton("res", "Results",
style=" background-color: #faf0e6; border-color: #faf0e6"))
),
class = "dropdown")
)
shinyApp(
ui = dashboardPagePlus(
header = dbHeader,
sidebar = dashboardSidebar(width = "0px",
sidebarMenu(id = "sidebar", # id important for updateTabItems
menuItem("Information", tabName = "info", icon = icon("table")),
menuItem("Consent", tabName = "conse", icon = icon("line-chart")),
menuItem("Run Project", tabName = "rp", icon = icon("table")),
menuItem("Results", tabName = "res", icon = icon("line-chart"))
) ),
body = dashboardBody(
useShinyjs(),
tags$script(HTML("$('body').addClass('fixed');")),
tags$head(tags$style(".skin-blue .main-header .logo { padding: 0px;}")),
tabItems(
tabItem("info"
),
tabItem("conse"
),
tabItem("rp"),
tabItem("res"
)
)
)
),
server<-shinyServer(function(input, output,session) {
hide(selector = "body > div > header > nav > a")
}
)
)
这篇关于调整仪表板页眉中图像、操作按钮和ι的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
