在shinydashboard标题右侧添加文本

如何在文本板标题侧栏图标的右侧添加文本？看起来以前的类似解决方案不再适用于dashboardHeader()的更新。在shinydashboard标题右侧添加文本

这就是我想在一个基本shinydashboard设置做：

Example of desired text location in shinydashboard

我可以使用策略从this answer得到的标题文本，但它的右对齐（我可以可能会修复自定义的CSS），也感觉很哈克。

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)

有没有更好的方法来做到这一点？

来源

2017-07-18 mikeck

dashboardHeader预计类型为dropdownMenu的元素。所以这将很难找到一个不hacky解决方案。可能的（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)

来源

2017-07-19 00:35:10 Geovany

一个有用的解决方案。我不确定哪个感觉更加黑客：伪造下拉菜单对象或使用javascript向导航栏中注入新类。 – mikeck

A的Geovany的代码以自定义字体自动调整大小稍作修改的版本，安置等将是：在directory1中含有

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"), 
           ) 
     ) 
    )

server.R文件在directory1中包含：

library(shiny) 
    library(shinydashboard) 
    server <- function(input, output) { }

css样式表（style.css在directory1）控制文本par

.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")

来源

2017-07-19 06:18:54 Tiffany

添加到Geovany & Tiffany的答案，如果你喜欢的文字内容与规定的最大尺寸和无限的收缩与下面的代码调整窗口ameters是动态的，您可以根据用户输入使用shinyjs::html函数进行更改。

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

我也有一个id添加到附加到标题中Geovany的代码div，在这种情况下pageHeader：

tags$script(HTML(' 
        $(document).ready(function() { 
        $("header").find("nav").append(\'<div id="pageHeader" class="myClass"></div>\'); 
        }) 
       '))

然后将这个服务器的功能将改变标题文字显示选定的选项卡，switch用于创建更可呈现的标题格式：

observeEvent(input$tabs, { 
    header <- switch(input$tabs, 
     tab1 = "Tab 1", 
     tab2 = "Tab 2", 
     tab3 = "Tab 3") 

    shinyjs::html("pageHeader", header) 
})

来源

2017-12-06 15:20:43

在shinydashboard标题右侧添加文本

回答

相关问题