tabPanel处于活动状态时将其更改为背景颜色,或者将其悬停在Shiny中

时间:2017-12-13 17:17:45

标签: r shiny

我创建了一个R Shiny应用程序,我想在tabPanel处于活动状态时或当我将鼠标悬停在其上时更改其背景颜色。我不确定我是否使用在css文件中定义正确的属性。

enter image description here

您可以在下面找到我使用的代码:

library(shiny)
library(shinydashboard)

ui <- function(){
                navbarPage(title = 'Hello', 
                           tabPanel("title2"),
                           tabPanel("title3"),

                tags$style(type = 'text/css', 
                          '.navbar { background-color: red;}',
                          '.navbar-default .navbar-brand{color: white;}',
                          '.tab-panel{ background-color: red; color: white}',
                          '.nav navbar-nav li.active:hover a, .nav navbar-nav li.active a {
                            background-color: green ;
                            border-color: green;
                            }'

                ))

}

server <- function(input, output, session){
}


shinyApp(ui = ui, server = server)

非常感谢你对此的帮助。

1 个答案:

答案 0 :(得分:1)

您好需要告诉我们CSS字符串是带有HTML()函数的HTML,如下例所示。更好但不必要的是将其放在head标签中。我也认为你的css代码有一些问题。注意始终使用.

引导所有课程
library(shiny)
library(shinydashboard)

ui <- function(){
  navbarPage(title = 'Hello', 
             tabPanel("title2"),
             tabPanel("title3"),
             tags$head(
               tags$style(type = 'text/css', 
                          HTML('.navbar { background-color: red;}
                          .navbar-default .navbar-brand{color: white;}
                          .tab-panel{ background-color: red; color: white}
                          .navbar-default .navbar-nav > .active > a, 
                           .navbar-default .navbar-nav > .active > a:focus, 
                           .navbar-default .navbar-nav > .active > a:hover {
                                color: #555;
                                background-color: green;
                            }')
                          )
              )
            )

}

server <- function(input, output, session){
}


shinyApp(ui = ui, server = server)

希望这有帮助!