How to add a company Logo to ShinyDashboard header (Not mainPanel or mainHeader)

前端 未结 2 995
独厮守ぢ
独厮守ぢ 2020-12-16 06:54

I tried to refer to below answers but the logo is locate inside the main panel but not the header panel... Any solution?

  • Adding a company Logo to ShinyDashboar
相关标签:
2条回答
  • 2020-12-16 07:24
    dashboardBody( 
        tags$img(align="right",src="http://www.pagesolutions.co.uk/wp-content/uploads/2016/03/Finalised-logo.png",height="50px"),
        tags$strong("PAGE SOLUTIONS",style="color:#0a90d3"),tags$p("CLASSIFICATION MODELING",style="color:black"),
        tags$p("Customer Classification"),
        ...
    )
    
    0 讨论(0)
  • 2020-12-16 07:37

    the solution is to conceal your image, such that shiny renders it like it would have rendered a normal dropdownMenu item.

    As you might have seen from your console, dashboardHeader throws errors

    Error in FUN(X[[i]], ...) : Expected tag to be of type li
    

    if you try to insert any custom HTML. And if you choose a li tag, it even elaborates

    Error in FUN(X[[i]], ...) : Expected tag to have class 'dropdown'
    

    So here is your deal, add your image in a li wrapper with class dropdown and you are good to go.

    Sample code:

    library(shinydashboard)
    library(shiny)
    
    runApp(
      shinyApp(
        ui = shinyUI(
          dashboardPage(
              dashboardHeader(title = 'Reporting Dashboard',
                tags$li(class = "dropdown",
                        tags$a(href="http://snap.uaf.edu", target="_blank", 
                               tags$img(height = "20px", alt="SNAP Logo", src="https://www.snap.uaf.edu/sites/default/files/pictures/snap_symbol_color.png")
                        )
                ),
                dropdownMenuOutput('messageMenu'),
                dropdownMenu(type = 'notifications',
                             notificationItem(text = '5 new users today', icon('users')),
                             notificationItem(text = '12 items delivered', 
                                              icon('truck'), status = 'success'),
                             notificationItem(text = 'Server load at 86%', 
                                              icon = icon('exclamation-triangle'), 
                                              status = 'warning')),
                dropdownMenu(type = 'tasks',
                             badgeStatus = 'success',
                             taskItem(value = 90, color = 'green', 'Documentation'),
                             taskItem(value = 17, color = 'aqua', 'Project X'),
                             taskItem(value = 75, color = 'yellow', 'Server deployment'),
                             taskItem(value = 80, color = 'red', 'Overall project'))
              ),
    
              dashboardSidebar(),
              dashboardBody()
          )
        ), 
    
        server = function(input, output){}
    
      ), launch.browser = TRUE
    )
    

    Hope this helps!

    0 讨论(0)
提交回复
热议问题