2017-04-09 7 views
2

ヘッダーパネルのドロップダウンメニューに複数のリンクを入れたいのですが、垂直グループ化されたドロップダウンメニューが必要な間に、タグ$ liを使ってフラットな水平レイアウトで作成できます。shinydashboard header dropdownグループリンクを追加する

最小限の反復可能コードは以下の通りです。つまり、私はlinkAとlinkBをgrouplinkABの下に置き、ユーザーは新しいウィンドウでそれらの1つを開くことができます。それはコードのようにdropdownMenu(type = 'notifications'、...)で達成されるかもしれませんが、 "grouplinkAB"のグループ名をどこに置くべきか分かりません。また、クリックすると新しいウィンドウを開くことができませんリンクも、 "あなたは2つの通知があります"というテキストを隠す必要があるので、タグ$ liとタグ$ ulでそれを実現したいのですが、HTMLに関する知識はほとんどありません。

library(shinydashboard) 
library(shiny) 

runApp(
    shinyApp(
    ui = shinyUI(
     dashboardPage(
     dashboardHeader(title='Reporting Dashboard', 
         tags$li(class="dropdown",tags$a("grouplinkAB",href="http://stackoverflow.com/", target="_blank")), 
         tags$li(class="dropdown",tags$a("linkA",href="http://stackoverflow.com/", target="_blank")), 
         tags$li(class="dropdown",tags$a("linkB",href="http://stackoverflow.com/", target="_blank")), 
         dropdownMenu(type='notifications', 
            notificationItem(text='linkA',href="http://stackoverflow.com/"), 
            notificationItem(text='linkB',href="http://stackoverflow.com/") 
            ) 
     ), 
     dashboardSidebar(), 
     dashboardBody() 
    ) 
    ), 
    server = function(input, output){} 
), launch.browser = TRUE 
) 

答えて

2

私は1年ほど前同様のリクエストを見ましたが、それほど深くは見えませんでした。今回は私のコードを動作させようとしましたが、dropdownMenuコードを見てもそれを処理できませんでしたが、かなり簡単に修正できるようになっています。

私はそれをしないことを選択しましたが、代わりにこれを行うために特化したdropdownMenuの新しいバージョンを作成しました。ここで

コードは次のとおりです。

library(shinydashboard) 

dropdownHack <- function (...,badgeStatus = NULL, .list = NULL,menuname=NULL) 
{ 
    if (!is.null(badgeStatus)){ 
    shinydashboard:::validateStatus(badgeStatus) 
    } 
    items <- c(list(...), .list) 
    lapply(items, shinydashboard:::tagAssert, type = "li") 
    dropdownClass <- paste0("dropdown ", "text-menu") 
    numItems <- length(items) 
    if (is.null(badgeStatus)) { 
    badge <- NULL 
    } 
    else { 
    badge <- span(class = paste0("label label-", badgeStatus), numItems) 
    } 
    tags$li(class = dropdownClass, a(href="#", class="dropdown-toggle", 
            `data-toggle`="dropdown", menuname, badge), 
      tags$ul(class = "dropdown-menu", items ) 
) 
} 

menuitemHack <- function(text,href){ 
    notificationItem(text=text,href=href,icon=shiny::icon("rocket")) 
} 

runApp(
    shinyApp(
    ui = shinyUI(
     dashboardPage(
     dashboardHeader(title='Reporting Dashboard', 
         dropdownHack(menuname="GroupAB", 
            menuitemHack(text='linkA',href="http://stackoverflow.com/"), 
            menuitemHack(text='linkB',href="http://stackoverflow.com/") 
         ), 
         dropdownMenu(type='notifications', 
            notificationItem(text='linkA',href="http://stackoverflow.com/"), 
            notificationItem(text='linkB',href="http://stackoverflow.com/") 
         ) 
     ), 
     dashboardSidebar(), 
     dashboardBody() 
    ) 
    ), 
    server = function(input, output){} 
), launch.browser = TRUE 
) 

そして、ここではその結果である:

enter image description here

注:

  • それは、アイコンを必要とする、あなたはどんなfontAwesomeを選択することができますかグリフィコンは、何も持たない場合はおそらくどこかに空白があります。
  • ShinyDashboardの構造が大きく変わった場合、それが壊れると思いますので、そのことを念頭に置いてください。
  • 次のバージョンも同様にこのオプションをサポートしますが、ほんの数行の余分なコードになるでしょう。
+1

素晴らしい!それは期待どおりに動作します、ありがとうございます。 ここでは、ドロップダウンのデフォルト設定が広すぎてリンクを新しいウィンドウで開くことができません。私はそれについていくつかの設定を探します。 – earclimate

関連する問題