shinydashboardヘッダーの右側にテキストを追加

Question

ダッシュボードヘッダーのサイドバーアイコンの右側にテキストを追加するにはどうすればよいですか？以前の同様のソリューションは、dashboardHeader()のアップデートでは機能しなくなったようです。

これは私が基本的な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) 

これを行うより良い方法はありますか？

Answer 1

dashboardHeaderは、タイプdropdownMenuのエレメントが必要です。だから、ハッキーな解決策を見つけるのは難しいでしょう。可能な（ハッキー）オプションは、次のとおりです。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

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ファイル

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

テキストの部分を制御するCSSスタイルシート（style.cssディレクトリ1）次のコードで縮小定義された最大サイズと無制限にウィンドウのサイズを変更するにameters：

.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 &ティファニーの答えに追加します動的であれば、shinyjs::html機能でユーザーの入力に基づいて変更することができます。

たとえば、ヘッダーに選択したタブの名前を表示するために使用します。サイドバーメニューにidを指定している限り、サーバー機能で選択したタブ名にアクセスできます。私の場合はtabsです。

私はこの場合も pageHeaderには、Geovanyのコードのヘッダに追加され divに idを追加する必要がありました：

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) 
})