Question

如何在信息中心标题侧边栏图标的右侧添加文字？似乎以前的类似解决方案不再适用于dashboardHeader()的更新。

这是我在基本的shinydashboard设置中尝试做的事情：

Example of desired text location in shinydashboard

我可以使用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)

有更好的方法吗？

Answer 1

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)

Answer 2

用于自定义字体自动调整大小，放置等的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样式表（directory1中的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")

Answer 3

添加到Geovany＆amp;蒂芙尼的答案是，如果您希望文字内容是动态的，您可以根据用shinyjs::html功能的用户输入进行更改。

例如，我使用它来显示标题中所选标签的名称。只要您给侧边栏菜单id，我就可以访问服务器功能中的选定选项卡名称，在我的情况下，这是tabs。

我还必须在id添加div附加到Geovany代码标题中的pageHeader，在这种情况下switch。

然后将其添加到服务器功能将更改标题文本以显示所选选项卡，useShinyJs()用于创建更易于呈现的标题格式。请注意dashboardPage参数中的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)：

this.props.supprimerLine(key)

Answer 4

添加填充属性可以解决。可以根据您的要求探索宽度，边框和边距等其他选项。

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)

希望这会有所帮助！

在shinydashboard标题右侧添加文本

4 个答案: