在使用 bs4Dash package 时在 shinydashboard header 添加徽标

Question

在仪表板 header 中添加徽标不适用于 bs4Dash 库。 有什么建议么？

# app.R ##
library(shiny)
library(shinydashboard)
library(bs4Dash)
library(shinydashboardPlus)



ui <- dashboardPage(
  dashboardHeader(# removed some lines
    title = div("", id = "home_logo", a(href = "#Home",
                                         )),
    controlbarIcon = shiny::icon("filter")
    
  ),
  dashboardSidebar(
    collapsed = TRUE
    
    
  ),
  dashboardBody(
    # new code  9 lines
    tags$head(tags$style(HTML('
        /* navbar (rest of the header) */
        .skin-blue .main-header .navbar {
                                background-image:url("https://www.r-project.org/logo/Rlogo.png");
                                background-position-x: 2%;
                                background-size: 70px 40px;
                                background-repeat: no-repeat;
                                background-color:#000;
                              }
        /* logo */
        .skin-blue .main-header .logo {
                              background-color: white;
                              }

        /* logo when hovered */
        .skin-blue .main-header .logo:hover {
                              background-color: white;
                              }

        /* navbar (rest of the header) */
        .skin-blue .main-header .navbar {
                              background-color: white;
        }  
                               
        /* body */
        .content-wrapper, .right-side {
                              background-color: white;
                                 }

        /* main sidebar */
        .skin-blue .main-sidebar {
                              background-color: snow;
        }
        /* toggle button when hovered  */                    
         .skin-blue .main-header .navbar .sidebar-toggle{
                              background-color: black;
         }
        /* toggle button when hovered  */                    
         .skin-blue .main-header .navbar .sidebar-toggle:hover{
                              background-color: black;
                              }
                              
       
       
                              '))),
    
    tags$style(type="text/css",".sidebar-toggle{ position: absolute;
}
.skin-white .main-header .logo, .skin-blue .main-header .logo, .skin-blue .main-header .logo:hover{
    background-color: white;}"),
    
    
    
    
  ),
  
  controlbar = dashboardControlbar(id = "dashboardControlbarID", collapsed = TRUE,skin = "black",icon = icon("filter"))
  
  
  
  
  
)

server <- function(input, output) {}


shinyApp(ui, server)

Answer 1

如何使用img -tag：

title = tags$img(src = 'https://www.r-project.org/logo/Rlogo.png', title = "Rlogo", height = "40px")

---

完整的例子包括。 一条链接：

library(shiny)
library(bs4Dash)

ui <- dashboardPage(
  dashboardHeader(title = a(target="_blank", href = 'https://www.r-project.org/',
                              img(src = 'https://www.r-project.org/logo/Rlogo.png', title = "Rlogo", height = "40px"),
                              style = "padding-top:5px; padding-bottom:5px;")),
  dashboardSidebar(),
  dashboardBody(
    # Boxes need to be put in a row (or column)
    fluidRow(
      box(plotOutput("plot1", height = 250)),
      
      box(
        title = "Controls",
        sliderInput("slider", "Number of observations:", 1, 100, 50)
      )
    )
  )
)

server <- function(input, output) {
  set.seed(122)
  histdata <- rnorm(500)
  
  output$plot1 <- renderPlot({
    data <- histdata[seq_len(input$slider)]
    hist(data)
  })
}

shinyApp(ui, server)