R shinydashboard

时间:2018-03-22 17:01:25

标签: r shiny shinydashboard

我有一个使用shinydashboard的R闪亮应用程序。我想在屏幕左侧的中央和侧栏切换按钮(带有三个水平条)中设置徽标。

我使用以下代码在中心使用95%的标题宽度和徽标。但是,这会在右侧5%屏幕上使用切换按钮推动导航栏。 **如何将导航栏切换到左侧(如图所示)和带有徽标的标题栏? **

enter image description here

dashboardHeader(title = tags$a(tags$img(src='Logo.png', height=80)), 
 titleWidth = "95%")

任何建议都将受到赞赏。

谢谢, Krina

1 个答案:

答案 0 :(得分:2)

可能有更好的方法,但这里有一个hacky选项:

  1. Conceal the logo as a dropdownMenu
  2. 将徽标移至标题using css
  3. 的中心
  4. (可选)从徽标
  5. 中删除css hover效果

    其他dropdownMenus仍保持右对齐。

    enter image description here

    library(shiny)
    library(shinydashboard)
    
    css <- HTML(
        "/* move logo to center */
        #logo {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        /* remove hover effect */
        #logo > a:hover {
            background-color: transparent !important;
            color: transparent !important;
        }"
    )
    
    ui <- dashboardPage(
        dashboardHeader(title = "Project Title",
                        tags$li(class = "dropdown",
                                id = "logo",
                                tags$a(tags$img(height = "20px",
                                                src="https://www.r-project.org/logo/Rlogo.png")
                                ),
                                tags$style(css)
                        ),
                        dropdownMenu(type = "messages", 
                                     badgeStatus = "primary",
                                     taskItem(value = 20, 
                                              "Example"
                                     ))
        ),
        dashboardSidebar(),
        dashboardBody()
    )
    
    server <- function(input, output, session) {
    
    }
    
    shinyApp(ui, server)