以下是我的shiny 应用程序的编辑版本:

library(shiny)
library(bslib)

ui <- tagList(
  fluidPage(
    titlePanel(""),
    tags$head(tags$style(HTML(
      "
        .navbar-default {
            color: red !important;'
        }
        .navbar-default .navbar-nav > .active > a,
        .navbar-default .navbar-nav > li > a:hover {
            color: red !important;
        }
        .navbar-default .navbar-nav > li > a {
            color: pink !important;
        }
        "
    ))),
    
    navbarPage(
      windowTitle = "App Name",
      theme = bs_theme(bootswatch = "flatly",
                       base_font = font_google("Lato"),
                       primary = "#333F50",
                       bg = "white",
                       fg = "#D67540"),
      title = "I am the title",
      selected = "Main Tab 1",
      tabPanel(title = "Main Tab 1",
               fluidPage(
                 sidebarLayout(
                   sidebarPanel(textInput(inputId = "text_input", label = "Enter text:")),
                   mainPanel(textOutput(outputId = "text_output"))
                 )
               )
               ),
      tabPanel(title = "Main Tab 2",
               fluidPage(
                   fluidRow(
                     column(7,
                            navlistPanel(
                              tabPanel("Tab 1"),
                              tabPanel("Tab 2"),
                              tabPanel("Tab 3"),
                              widths = c(2, 10),
                              well = FALSE)
                            )))
               )
      )
    )
  )

server <- function(input, output){
  output$text_output <- renderText(input$text_input)
}

shinyApp(ui, server)

当前,"Main Tab 1"和"Main Tab 2"的文本在悬停/选中时为粉色和红色.

Main Tab 1

我还想对"Tab 1"、"Tab 2"和"Tab 3"应用类似的更改-对于这些,我希望在悬停/选中时文本 colored颜色 从青色变为黑色,从白色变为橙色.

我的理解是,color值旁边的!important强制所有链接继承相同的属性,但我希望导航栏标题中的链接和导航药丸中的链接使用不同的 colored颜色 .

我在这里问了一个相关的问题: How to change text colour of navbarPage links when hovered on (in shiny app)?

我如何才能做出这样的改变?

如有任何帮助,我们不胜感激:)

注意: colored颜色 是故意不美观的(我还在学习,只是用它们来区分)

推荐答案

好的--我已经执行了您的请求,但请看我回答的两个部分:

第1部分-解决方案

为了实现您请求的样式,我做了两件事:

  1. 我更改了navListPanel,将其插入类名为side_paneltags$div中.我将这navlistPanel放在一个带有定制类的div中,这样您想要用于面板的css就不会渗入其他.nav个类,包括Main .nav-header.
tags$div(
  navlistPanel(
    tabPanel("Tab 1"),
    tabPanel("Tab 2"),
    tabPanel("Tab 3"),
    widths = c(2, 10),
    well = FALSE),
  class = "side_panel"
)
  1. 然后,我将以下CSS添加到您的tags$style中,每行以.side_panel开头,以便只影响我们刚刚创建的类:
.side_panel .nav-pills a:hover {
    color: black; 
    background: rgba(253,126,20, 0.8);
}

.side_panel .nav-pills .nav-link.active {
  color: black;
  background: #fd7e14; /* BS orange */
}

实现这一结果 (Note:"Tab 2"悬停在上方,屏幕截图没有捕捉到我的鼠标):

enter image description here

第2部分-future 的样式

因为你似乎对你的应用程序的风格很挑剔(别担心,我对这种风格也很着迷),你应该考虑两件事.

  1. 与其在应用程序的开头插入所有的css,不如考虑在www文件夹中创建一个单独的style.css文件.这个www文件夹应该与您的app.R文件位于同一目录中.然后你可以使用shiny::includeCSS("www/style.css")(ref link)将所有这些CSS注入到你的应用程序中.

  2. 要学习如何在future 设计shiny 的应用程序的定制组件,你应该熟悉浏览器的Inspect功能.我在我的应用程序中主要使用bs4Dash,所以我不太熟悉你的应用程序的html组件.要找到对象及其css,我只需判断网页(右击+判断),然后使用ctrl+shift+c点击选项卡并查看它们的css.更进一步,您可以通过输入自定义值来动态更改CSS的样式.

祝好运!

Css相关问答推荐

如何允许在bslb中 Select 输入重叠卡片?

Css:有没有更快捷的方式来编写多媒体查询?

可折叠/可展开的数据表行:如何使Shadcn数据表中的可折叠内容全宽?

material 设计--Bootstrap输入域问题

尽管 URL 路径正确,但背景图像未显示

为什么我的 CSS 转换在 React 18 中不起作用

SCSS - Lighten/Darken 不编译?

我无法在 next.js 应用程序中传播 daisyui 的主题

通过css修改样式shadowroot元素

在活动状态下更改按钮的外观

如何测试页面上的文本被删除

CSS3 的 :root 伪类和 html 有什么区别?

宽度和高度似乎不适用于 :before 伪元素

Bootstrap:在列之间添加边距/填充空间

创建 CSS 全局变量:样式表主题管理

如何填充 100% 的剩余高度?

如何在 javascript 中获取 HTML 元素的样式值?

内联块列表项中不需要的边距

在 CSS 中使用多个 @font-face 规则

bootstrap 关闭响应菜单点击