更改选项卡面板处于活动状态或悬停在闪亮状态时的背景色 [英] Change background color of tabPanel when it is active or hover over in Shiny

问题描述

我已经创建了一个R闪亮的应用程序，我希望在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)

非常感谢您在这方面的帮助。

css

您好，您需要用HTML()函数告诉SHINY推荐答案字符串是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)

希望这能有所帮助！

这篇关于更改选项卡面板处于活动状态或悬停在闪亮状态时的背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！