如何在仪表板标题侧边栏图标的右侧添加文本？在 dashboardHeader() 的更新下，以前的类似解决方案似乎不再适用。
这是我在基本的闪亮仪表板设置中尝试做的事情：
我可以使用this answer 中的策略来获取标题中的文本，但它是右对齐的（我可能会修复自定义 css）并且感觉很hacky。
library(shiny)
library(shinydashboard)
ui <- dashboardPage(dashboardHeader(title = "demo",
tags$li(class = "dropdown",
tags$p("foo")
)
), dashboardSidebar(), dashboardBody())
server <- function(input, output) { }
shinyApp(ui, server)
有没有更好的方法来做到这一点？
【问题讨论】：
标签： r shiny shinydashboard
dashboardHeader 需要 dropdownMenu 类型的元素。所以很难找到一个不老套的解决方案。可能的（hacky）选项是：a）修改dashboardHeader函数，或b）在创建标题后使用一些JavaScript代码添加文本。以下是我尝试使用 JavaScript 解决您的问题，也许它可以帮助您。
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(
title = "demo"
),
dashboardSidebar(),
dashboardBody(
tags$head(tags$style(HTML(
'.myClass {
font-size: 20px;
line-height: 50px;
text-align: left;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
padding: 0 15px;
overflow: hidden;
color: white;
}
'))),
tags$script(HTML('
$(document).ready(function() {
$("header").find("nav").append(\'<span class="myClass"> Text Here </span>\');
})
'))
)
)
server <- function(input, output) { }
shinyApp(ui, server)
【讨论】：
Geovany 代码的一个稍微修改的版本，用于自定义字体自动调整大小、位置等，将是：
目录1中的ui.R文件包含：
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(
title = "demo"
),
dashboardSidebar(),
dashboardBody(
tags$script(HTML('
$(document).ready(function() {
$("header").find("nav").append(\'<div class="myClass"> Text Here </div>\');
})
')),
tags$head(
# Include our custom CSS
includeCSS("styles.css"),
)
)
)
目录 1 中的 server.R 文件包含：
library(shiny)
library(shinydashboard)
server <- function(input, output) { }
一个 css 样式表（目录 1 中的 style.css），用于控制调整窗口大小时的文本参数，具有定义的最大尺寸和无限缩小，使用以下代码：
.myClass {
line-height: 50px;
text-align: center;
font-family: "Arial";
padding: 0 15px;
color: black;
font-size: 2vw;
}
@media (min-width: 1200px) {
.myClass {
line-height: 50px;
text-align: center;
font-family: "Arial";
padding: 0 15px;
color: black;
font-size: x-large
}
}
运行使用：
shiny::runApp("path to directory1")
【讨论】：
添加到 Geovany 和 Tiffany 的答案中，如果您希望文本内容是动态的，您可以使用 shinyjs::html 函数根据用户输入进行更改。
例如，我使用它在标题中显示所选选项卡的名称。只要您为侧边栏菜单指定了id，就可以在服务器功能中访问选定的选项卡名称，在我的例子中是tabs。
我还必须将 id 添加到附加到 Geovany 代码中标题的 div 中，在本例中为 pageHeader。
然后将此添加到服务器函数将更改标题文本以显示所选选项卡，switch 用于创建更美观的标题格式。注意dashboardPage参数中的useShinyJs()：
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(
title = "demo"
),
dashboardSidebar(),
dashboardBody(
tags$head(tags$style(HTML(
'.myClass {
font-size: 20px;
line-height: 50px;
text-align: left;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
padding: 0 15px;
overflow: hidden;
color: white;
}
'))),
tags$script(HTML('
$(document).ready(function() {
$("header").find("nav").append(\'<div id="pageHeader" class="myClass"></div>\');
})
'))
),
useShinyjs()
)
server <- function(input, output) {
observeEvent(input$tabs, {
header <- switch(input$tabs,
tab1 = "Tab 1",
tab2 = "Tab 2",
tab3 = "Tab 3")
# you can use any other dynamic content you like
shinyjs::html("pageHeader", header)
})
}
shinyApp(ui, server)
【讨论】：
添加填充属性可能是一种解决方法。可以根据您的要求探索其他选项，例如宽度、边框和边距。
library(shiny)
library(shinydashboard)
ui <- dashboardPage(dashboardHeader(title = "demo",
tags$li(class = "dropdown",
style = "padding: 10px 1200px 0px 0px;",
tags$p("foo")
)
), dashboardSidebar(), dashboardBody())
server <- function(input, output) { }
shinyApp(ui, server)
希望这会有所帮助！
【讨论】：