在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標題右側添加文本

回答

相關問題