我使用闪亮的仪表板包,标题需要有标题、文本和徽标。
标题应位于左侧,文本应位于标题的中间/中心,徽标应位于右侧。仪表板侧边栏还有两个过滤器(选择输入)。中间的文本显示用户选择,因此文本的长度根据不同的选择而不同。我没有 css 背景,也不知道如何将可变长度文本放置在标题的中心。另一个问题是,当我最小化屏幕时,文本和徽标会堆叠在一起,并且不会保持在一行中,如下所示:
为了简化代码,我只使用了一个简单的文本,并且没有在此处显示我的服务器代码,但“长度可变的长文本取决于用户选择”基本上是uiOutput
并将根据选择而改变。
shinyApp(
ui = dashboardPage(
dashboardHeader(
title = HTML(paste0("Dashboard example")) , titleWidth = 455,
tags$li(class="dropdown",
tags$table(style="80%;align:center;border-collapse:seperate;border-spacing:20px;",
tags$tr(
tags$td(h3("long text with variable length dependant on user selections")),
tags$td(
a(href='link',
img(src = 'http://www.clipartbest.com/cliparts/nTX/8nj/nTX8njyEc.jpeg',
title= "image title", height = "50px"),
style = "display:block;position:absolute,width:50px; padding-top:10px; padding-bottom:10px;padding-right:10px;"),
class="dropdown"))))),
dashboardSidebar(),
dashboardBody(tags$head(
tags$style(HTML("
.my_class {
font-weight: bold;
color:white;
}"))
))),
server = function(input, output) { }
)
最小化屏幕会破坏标题,如下所示
Using the code provided below, I get this.