在shinydashboard标题中添加am图像会隐藏切换按钮

chy5wohz  于 2022-12-06  发布在  其他
关注(0)|答案(1)|浏览(158)

我试图在shinydashboard标题的切换按钮旁边添加一个徽标,但是切换按钮根本不显示。

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

library(shinydashboardPlus)


ui <- dashboardPage(
  dashboardHeader(
    title = div("", id = "home_logo", a(href = "#Home",
                                        (img(src = "namuda_icon.PNG", height = "25px", 
                                             style = "position: relative; top:-5px; left: -5rem;")) )),
    controlbarIcon = shiny::icon("filter")
    
  ),
  dashboardSidebar(
    collapsed = TRUE
    
      
    ),
  dashboardBody(

    tags$head(tags$style(HTML('
        /* 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;
    left: -23rem;
}
.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)
hmmo2u0o

hmmo2u0o1#

要在切换按钮旁边添加徽标,我们必须这样做:

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

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)

相关问题